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 encapsulate the carousel component in Vue3

Purpose Encapsulate the carousel component and us...

Why MySQL does not recommend using null columns with default values

The answer you often hear is that using a NULL va...

Detailed explanation of Docker Compose deployment and basic usage

1. Docker Compose Overview Compose is a tool for ...

UDP simple server client code example

I won’t go into details about the theory of UDP. ...

Teach you how to use vscode to build a react-native development environment

question The code has no prompt: Many non-front-e...

How to stop CSS animation midway and maintain the posture

Preface I once encountered a difficult problem. I...

An example of refactoring a jigsaw puzzle game using vue3

Preface It took two days to reconstruct a puzzle ...

How to add Tomcat Server configuration to Eclipse

1. Window -> preferences to open the eclipse p...

Perfect solution to Google Chrome autofill problem

In Google Chrome, after successful login, Google ...

How to use anti-shake and throttling in Vue

Table of contents Preface concept Stabilization d...

mysql zip file installation tutorial

This article shares the specific method of instal...

How to use vue-video-player to achieve live broadcast

Table of contents 1. Install vue-video-player 2. ...

JS practical object-oriented snake game example

Table of contents think 1. Greedy Snake Effect Pi...

Analysis of MySQL cumulative aggregation principle and usage examples

This article uses examples to illustrate the prin...