Shulou(Shulou.com)06/01 Report--

This article will explain in detail how WeChat Mini Programs realizes the recording and audio playback function. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Mini Program inherits the powerful voice processing functions of Wechat, providing recording, audio playback control and background music and other functions, their functions are different, but similar.

1. Recording

Mini Program provides interfaces such as wx.startRecord (Object object) to start recording, wx.stopRecord () to stop recording and RecorderManager recording Manager to control recording functions. Because the RecorderManager recording manager includes the functionality of the first two interfaces, only RecorderManager is introduced here.

Interface function and purpose RecorderManager.resume () continues recording RecorderManager.stop () stops recording RecorderManager.onStart (function callback) listens for recording start event RecorderManager.onResume (function callback) listens for recording continues event RecorderManager.onPause (function callback) listens for recording pause event RecorderManager.onStop (function callback) listens for recording end event RecorderManager.onFrameRecorded (function callback) listens for file events of a specified frame size. If frameSize is set, this event is called back. RecorderManager.onError (function callback) snooping recording error event

When using the recording interface, you need to authorize the open recording function first.

1.1 case

This example uses RecorderManager recording Manager to achieve recording, pause, resume recording, stop recording and play recording and other functions.

RedorderManager.wxml

Start recording pause recording continue recording stop playing recording

RedorderManager.js

Const recorderManager = wx.getRecorderManager () const innerAudioContext = wx.createInnerAudioContext () Page ({data: {}, onLoad: function () {}, / / when you start recording, start: function () {var that=this const options = {duration: 10000 recording time / specify the length of recording Unit ms sampleRate: 16000 mp3',// / sampling rate numberOfChannels: 1 number of channels for recording encodeBitRate: 96000 pound / coding rate format: 'mp3',// audio format, valid value aac/mp3 frameSize: 50 pound / specified frame size Unit KB} / / start recording wx.authorize ({scope: 'scope.record', success () {console.log ("recording authorization successful") / / switch to 2 that.setData ({status: 2,}) recorderManager.start (options) after the first successful authorization; recorderManager.onStart (() = > {console.log ('recorder start')}); / / error callback recorderManager.onError ((res) = > {console.log (res)) })}, fail () {console.log ("first recording authorization failed") Wx.showModal ({title: 'prompt', content: 'you are not authorized to record Features will not be available', showCancel: true, confirmText: "Authorization", confirmColor: "# 52a2d8" Success: function (res) {if (res.confirm) {/ / confirm to open the settings page (emphasis) wx.openSetting ({success: (res) = > {console.log (res.authSetting)) If (! res.authSetting ['scope.record']) {/ / recording authorization console.log is not set ("recording authorization is not set") Wx.showModal ({title: 'prompt', content: 'you are not authorized to record The function will not be able to use', showCancel: false, success: function (res) {},} else {/ / successfully authorize console.log for the second time ("set recording authorization successfully") That.setData ({status: 2,}) recorderManager.start (options); recorderManager.onStart (() = > {console.log ('recorder start')}) / / error callback recorderManager.onError ((res) = > {console.log (res);})}}, fail: function () {console.log ("authorization setting recording failed") }})} else if (res.cancel) {console.log ("cancel");}}, fail: function () {console.log ("openfail") }})})}, / / pause recording pause: function () {recorderManager.pause (); recorderManager.onPause ((res) = > {console.log ('pause recording')})}, / / resume recording resume: function () {recorderManager.resume () RecorderManager.onStart (() = > {console.log ('restart recording')}); / / error callback recorderManager.onError ((res) = > {console.log (res);})}, / / stop recording stop: function () {recorderManager.stop (); recorderManager.onStop ((res) = > {this.tempFilePath = res.tempFilePath Console.log ('stop recording', res.tempFilePath) const {tempFilePath} = res})}, / / play sound play: function () {innerAudioContext.autoplay = true innerAudioContext.src = this.tempFilePath InnerAudioContext.onPlay (() = > {console.log ('start playback')}) innerAudioContext.onError ((res) = > {console.log (res.errMsg) console.log (res.errCode)})},})

The recording, pausing, resuming, stopping and playback functions of the RecorderManager recording Manager are invoked through five buttons in recorderManager.wxml. After recording the audio, it can also be uploaded to the server. In this case, the recorded audio is stored in the phone's temporary directory and then used to play.

This function is not good to show in the article, do not add video for the time being, until the principle.

2. Audio playback control

The wx.createAudioContext () interface and the wx.createInnerAudioContext interface contain most audio control functions. This paper mainly introduces the wx.createAudioContext () interface. Wx.createAudioContext () is a component-based operation.

The AudioContext instance object can be obtained through the wx.createAudioContext interface, which binds to a component through id and manipulates the corresponding component. The common functions of the AudioContext object are as follows.

Interface function and purpose AudioContext.setSrc (string src) set audio address AudioContext.play () play audio. AudioContext.pause () pauses the audio. AudioContext.seek (number position) jumps to the specified location (in s). 2.1 case

This example uses wx.createAudioContext () to interface Lake District AudioContext instance, then calls the playback and pause functions, and finally uses the slider component to locate the playback position.

AudioContext.wxml:

Playback pause

AudioContext.js:

Page ({onReady: function (e) {/ / use wx.createAudioContext to get audio context context this.audioCtx = wx.createAudioContext ('myAudio')}, data: {time:0, poster:' https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000', name: 'Daoxiang', author: 'Jay Chou' Src: 'https://dl.stream.qqmusic.qq.com/RS020643ANK71H36gh.mp3?guid=5172738896&vkey=0B819C7570AAF78CC43A7C651E2C8C33FC76A07422EA718B9F8CAFD013F1BCF9E2DAF271064E05939716E400CE460A04669DFAC314460BB9&uin=1144722582&fromtag=66',}, audioPlay: function () {this.audioCtx.play ()}, audioPause: function () {this.audioCtx.pause ()}, audio14: function () {this.audioCtx.seek (0)}, change: function (e) {console.log (e) this.audioCtx.seek (e.detail.value)}})

After clicking to play, there will be a free song Daoxiang.

This is the end of the article on "how to realize the recording and audio playback function of WeChat Mini Programs". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.