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

CSS to achieve text on the background image

Effect: <div class="imgs"> <!-...

Learn more about using regular expressions in JavaScript

Table of contents 1. What is a regular expression...

Summary of examples of common methods of JavaScript arrays

Table of contents Common array methods concat() M...

SQL function to merge a field together

Recently, I need to query all the fields in a rel...

How to use default values ​​for variables in SASS

Variables defined in SASS, the value set later wi...

SSM implements the mysql database account password ciphertext login function

introduction Our company is engaged in the resear...

JavaScript to achieve accordion effect

This article shares the specific code for JavaScr...

CocosCreator learning modular script

Cocos Creator modular script Cocos Creator allows...

How to use Docker to build a pypi private repository

1. Construction 1. Prepare htpasswd.txt file The ...

Use Navicate to connect to MySQL on Alibaba Cloud Server

1. First enter the server's mysql to modify p...

nginx automatically generates configuration files in docker container

When a company builds Docker automated deployment...