微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
小程序繼承了微信強大的語音處理功能,提供了錄音、音頻播放控制和背景音樂等功能,它們的功能不同,但有相似性。
1、錄音
小程序提供了wx.startRecord(Object object)開始錄音、wx.stopRecord()停止錄音和RecorderManager錄音管理器等接口對錄音功能進行控制。因為RecorderManager錄音管理器包含前兩個接口的功能,所以這里只介紹RecorderManager。
接口 | 功能和用途 |
---|---|
RecorderManager.resume() | 繼續(xù)錄音 |
RecorderManager.stop() | 停止錄音 |
RecorderManager.onStart(function callback) | 監(jiān)聽錄音開始事件 |
RecorderManager.onResume(function callback) | 監(jiān)聽錄音繼續(xù)事件 |
RecorderManager.onPause(function callback) | 監(jiān)聽錄音暫停事件 |
RecorderManager.onStop(function callback) | 監(jiān)聽錄音結束事件 |
RecorderManager.onFrameRecorded(function callback) | 監(jiān)聽已錄制完指定幀大小的文件事件。如果設置了 frameSize,則會回調(diào)此事件。 |
RecorderManager.onError(function callback) | 監(jiān)聽錄音錯誤事件 |
在使用錄音接口時,需要先授權開放錄音功能。
1.1 案例
本例使用RecorderManager錄音管理器實現(xiàn)錄音、暫停、繼續(xù)錄音、停止錄音和播放錄音等功能。
redorderManager.wxml
<button bindtap="start" class='btn'>開始錄音</button> <button bindtap="pause" class='btn'>暫停錄音</button> <button bindtap="resume" class='btn'>繼續(xù)錄音</button> <button bindtap="stop" class='btn'>停止錄音</button> <button bindtap="play" class='btn'>播放錄音</button>
redorderManager.js
const recorderManager = wx.getRecorderManager() const innerAudioContext = wx.createInnerAudioContext() Page({ data: { }, onLoad: function () { }, //開始錄音的時候 start: function () { var that=this const options = { duration: 10000,//指定錄音的時長,單位 ms sampleRate: 16000,//采樣率 numberOfChannels: 1,//錄音通道數(shù) encodeBitRate: 96000,//編碼碼率 format: 'mp3',//音頻格式,有效值 aac/mp3 frameSize: 50,//指定幀大小,單位 KB } //開始錄音 wx.authorize({ scope: 'scope.record', success() { console.log("錄音授權成功"); //第一次成功授權后 狀態(tài)切換為2 that.setData({ status: 2, }) recorderManager.start(options); recorderManager.onStart(() => { console.log('recorder start') }); //錯誤回調(diào) recorderManager.onError((res) => { console.log(res); }) }, fail() { console.log("第一次錄音授權失敗"); wx.showModal({ title: '提示', content: '您未授權錄音,功能將無法使用', showCancel: true, confirmText: "授權", confirmColor: "#52a2d8", success: function (res) { if (res.confirm) { //確認則打開設置頁面(重點) wx.openSetting({ success: (res) => { console.log(res.authSetting); if (!res.authSetting['scope.record']) { //未設置錄音授權 console.log("未設置錄音授權"); wx.showModal({ title: '提示', content: '您未授權錄音,功能將無法使用', showCancel: false, success: function (res) { }, }) } else { //第二次才成功授權 console.log("設置錄音授權成功"); that.setData({ status: 2, }) recorderManager.start(options); recorderManager.onStart(() => { console.log('recorder start') }); //錯誤回調(diào) recorderManager.onError((res) => { console.log(res); }) } }, fail: function () { console.log("授權設置錄音失敗"); } }) } else if (res.cancel) { console.log("cancel"); } }, fail: function () { console.log("openfail"); } }) } }) }, //暫停錄音 pause: function () { recorderManager.pause(); recorderManager.onPause((res) => { console.log('暫停錄音') }) }, //繼續(xù)錄音 resume: function () { recorderManager.resume(); recorderManager.onStart(() => { console.log('重新開始錄音') }); //錯誤回調(diào) recorderManager.onError((res) => { console.log(res); }) }, //停止錄音 stop: function () { recorderManager.stop(); recorderManager.onStop((res) => { this.tempFilePath = res.tempFilePath; console.log('停止錄音', res.tempFilePath) const { tempFilePath } = res }) }, //播放聲音 play: function () { innerAudioContext.autoplay = true innerAudioContext.src = this.tempFilePath, innerAudioContext.onPlay(() => { console.log('開始播放') }) innerAudioContext.onError((res) => { console.log(res.errMsg) console.log(res.errCode) }) }, })
通過recorderManager.wxml中的5個按鈕來調(diào)用RecorderManager錄音管理器的錄音、暫停、繼續(xù)錄音、停止錄音和播放錄音功能。在錄制好音頻之后也可以上傳到服務器,本例只是把錄制好的音頻存放在手機臨時目錄,然后用來播放。
這個功能不好再文章中展示,暫時不加視頻了,直到原理就行。
2、音頻播放控制
wx.createAudioContext()接口和wx.createInnerAudioContext接口包含了大多數(shù)音頻控制功能。這里主要介紹wx.createAudioContext()接口。wx.createAudioContext()是以組件<audio>為基礎的操作。
AudioContext實例對象可通過wx.createAudioContext接口獲取,它通過id跟一個<audio>組件綁定,操作對應的<audio>組件。AudioContext對象常用的函數(shù)如下所示。
接口 | 功能和用途 |
---|---|
AudioContext.setSrc(string src) | 設置音頻地址 |
AudioContext.play() | 播放音頻。 |
AudioContext.pause() | 暫停音頻。 |
AudioContext.seek(number position) | 跳轉(zhuǎn)到指定位置(單位,s)。 |
2.1 案例
本例通過wx.createAudioContext()接口湖區(qū)AudioContext實例,然后調(diào)用播放和暫停功能,最后用slider組件來定位播放位置。
AudioContext.wxml:
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <slider bindchange='change' min="0" max="160" value="{{time}}" color="blue" selected-color="red" show-value="true"></slider> <button class='b1' type="primary" size="mini" bindtap="audioPlay">播放</button> <button class='b1' type="primary" size="mini" bindtap="audioPause">暫停</button>
AudioContext.js:
Page({ onReady: function (e) { // 使用 wx.createAudioContext 獲取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') }, data: { time:0, poster: 'https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000', name: '稻香', author: '周杰倫', 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) } })
點擊播放之后,就有一首免費的稻香了。
以上就是微信小程序?qū)崿F(xiàn)錄音與音頻播放功能的詳細內(nèi)容,更多關于小程序錄音音頻播放的資料請關注腳本之家其它相關文章!
相關文章
使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例
這篇文章主要介紹了使用 js 簡單的實現(xiàn) bind、call 、aplly代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09JS獲取多維數(shù)組中相同鍵的值實現(xiàn)方法示例
這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實現(xiàn)方法,結合實例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下2017-01-01