How to call the recording function and play audio in the WeChat applet

This article explains how to call the recording function and the method of playing audio in a small program. let's look at several pictures first.

1. for better understanding, the audio list was not loaded at the beginning. just move the code forward.

Code:

1. index. wxml

 
         
                  
                   
                    
                     
       
       
         Storage path: {item. filePath }}
        
       
         Storage Time: {item. createTime }}
        
       
         Audio size: {item. size} KB
        
                        
                     
                    
           
  
 
         
          
          
          
          
  
 
         
  Press and hold the recording
 

2. index. wxss

/** Index. wxss **/. speak-style {position: relative; height: 240rpx; width: 240rpx; border-radius: 20rpx; margin: 50% auto; background: # 26A5FF ;}. item-style {margin-top: 30rpx; margin-bottom: 30rpx ;}. text-style {text-align: center ;}. record-style {position: fixed; bottom: 0; left: 0; height: 120rpx; width: 100% ;}. btn-style {margin-left: 30rpx; margin-right: 30rpx ;}. sound-style {position: absolute; width: 74rpx; height: 150rpx; margin-top: 45rpx; margin-left: 83rpx ;}. board {overflow: hidden; border-bottom: 2rpx solid # 26A5FF;}/* column layout */. cell {display: flex; margin: 20rpx ;}. cell-hd {margin-left: 10rpx; color: #885A38 ;}. cell. cell-bd {flex: 1; position: relative;}/** show only one row */. date {font-size: 30rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}

3. index. js

// Index. js // Obtain the application instance var app = getApp () Page ({data: {j: 1, // The initial image isSpeaking: false in the frame animation, // whether the video is being spoken voices: [], // Audio array}, onLoad: function () {}, // Press touchdown: function () {console. log ("finger pressed... ") console. log ("new date:" + new Date) var _ this = this; speaking. call (this); this. setData ({isSpeaking: true}) // starts recording wx. startRecord ({success: function (res) {// temporary PATH. var tempFilePath = Res. tempFilePath console. log ("tempFilePath:" + tempFilePath) // persistently save wx. saveFile ({tempFilePath: tempFilePath, success: function (res) {// persistent path // the local file storage size is limited to 100 M var savedFilePath = res. savedFilePath console. log ("savedFilePath:" + savedFilePath)}) wx. showToast ({title: 'Congratulations! Recording successful ', icon: 'success', duration: 1000}) // Obtain the recording audio list wx. getSavedFileList ({success: function (res) {var voices = []; for (var I = 0; I <res. fileList. length; I ++) {// format the time var createTime = new Date (res. fileList [I]. createTime) // Convert the audio size B to KB var size = (res. fileList [I]. size/1024 ). toFixed (2); var voice = {filePath: res. fileList [I]. filePath, createTime: createTime, size: size}; console. log ("file path: "+ Res. fileList [I]. filePath) console. log ("file Time:" + createTime) console. log ("file size:" + size) voices = voices. concat (voice);} _ this. setData ({voices: voices}) }}, fail: function (res) {// recording failed wx. showModal ({title: 'HS', content: 'The recording position is incorrect! ', ShowCancel: false, success: function (res) {if (res. confirm) {console. log ('User click ') return }}})}, // finger up touchup: function () {console. log ("finger raised... ") this. setData ({isSpeaking: false,}) clearInterval (this. timer) wx. stopRecord ()}, // Click play recording gotoPlay: function (e) {var filePath = e. currentTarget. dataset. key; // click to start playing wx. showToast ({title: 'Start play', icon: 'success', duration: 1000}) wx. playVoice ({filePath: filePath, success: function () {wx. showToast ({title: 'Playing Terminal', icon: 'Success ', duration: 1000}) }}) // microphone frame animation function speaking () {var _ this = this; // microphone frame animation var I = 1; this. timer = setInterval (function () {I ++; I = I % 5; _ this. setData ({j: I})}, 200 );}

Through the above implementation, we can play and play happy recordings in the applet. have you learned?

Note:

1. the recorded audio is stored in a local temporary path by default. the second entry into the applet cannot be used normally and can be saved for a long time, but the local file size limit is 100 MB. it is best to upload the background.

2. the recording time cannot be too short. Otherwise, the recording will fail. it cannot exceed 60 seconds. the recording will be automatically stopped after 60 seconds.

3. you cannot play multiple audios at the same time during audio playback. you can view the files. you can play the audio files in a applet.

The above is the details of calling the recording function and audio playback method in the graphic and text explanation applet. For more information, see other related articles in the first PHP community!