WeChat applet implements the Record function

WeChat applet implements the Record function

This article shares the specific code for the WeChat applet to implement the Record function for your reference. The specific content is as follows

layout

<!--pages/record/record.wxml-->
<view>
 <button 
  class="tui-menu-list"
  bindtap="startRecordAac" 
  type="primary">Start recording (aac)</button>
 <button 
  class="tui-menu-list"
  bindtap="startRecordMp3" 
  type="primary">Start recording (mp3)</button>
 <button 
  class="tui-menu-list" 
  bindtap="stopRecord" 
  type="primary">Recording End</button>
 <button 
  class="tui-menu-list"
  bindtap="playRecord" 
  type="primary">Play recording</button>
</view>

style:

/* pages/record/record.wxss */
 
.tui-menu-list{
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}

Start and stop recording

// pages/record/record.js
Page({
 
  /**
   * Initial data of the page */
  data: {
 
  },
 
  onLoad:function (options) {
    var that = this
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onError(function () {
      that.tip("Recording failed!");
    })
    this.recorderManager.onStop(function (res) {
      that.setData({
        src:res.tempFilePath
      })
      console.log(res.tempFilePath)
      that.tip("Recording completed!")
    })
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.onError((res) => {
      that.tip("Playing recording failed!")
    })
  },
 
  //tip:function (msg) {
    wx.showModal({
      cancelColor: 'cancelColor',
      title:'Tips',
      content:msg,
      showCancel:false
    })
  },
 
  //Record aac
  startRecordAac:function () {
    this.recorderManager.start({
      format:'aac'
    })
  },
 
  //Record mp3
  startRecordMp3:function () {
    this.recorderManager.start({
      format:'mp3'
    })
  },
 
  //Stop recording stopRecord:function () {
    this.recorderManager.stop()
  },
 
  //Play the recordingplayRecord:function () {
    var that = this
    var src = this.data.src
    if (src='') {
      this.tip('Please record first')
      return
    }
    this.innerAudioContext.src = this.data.src
    this.innerAudioContext.play()
  }
 
  
})

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet recording function and upload (using node to parse and receive)
  • WeChat applet realizes recording function
  • WeChat applet to achieve microphone animation effect when recording
  • Problems and solutions encountered by WeChat applet recording file format silk
  • WeChat applet recording and playback recording function
  • WeChat applet development recorder audio playback animation example (real machine available)
  • WeChat applet - pictures, recordings, audio playback, music playback, videos, files code examples

<<:  Interpretation of syslogd and syslog.conf files under Linux

>>:  Simple writing of MYSQL stored procedures and functions

Recommend

How to analyze MySQL query performance

Table of contents Slow query basics: optimizing d...

MySQL constraint types and examples

constraint Constraints ensure data integrity and ...

IE6 distortion problem

question: <input type="hidden" name=...

Detailed explanation of the simple use of MySQL query cache

Table of contents 1. Implementation process of qu...

Detailed explanation of CocosCreator message distribution mechanism

Overview This article begins to introduce content...

Design Reference Beautiful and Original Blog Design

All blogs listed below are original and uniquely ...

MySQL query data by hour, fill in 0 if there is no data

Demand background A statistical interface, the fr...

Graphical explanation of the underlying principle of JavaScript scope chain

Table of contents Preface Scope 1. What is scope?...

What is JavaScript anti-shake and throttling

Table of contents 1. Function debounce 1. What is...

Vue implements simple image switching effect

This article example shares the specific code of ...

Learn to deploy microservices with docker in ten minutes

Since its release in 2013, Docker has been widely...