小程序中提供了兩種錄音的API,wx.startRecord和wx.getRecorderManager(),前一個如今微信團隊已經再也不維護,因此在這裏寫一下新的錄音管理,比以前要強大
1.小程序錄音管理介紹 wx.getRecorderManager()
基礎庫 1.6.0 開始支持,低版本需作兼容處理,獲取全局惟一的錄音管理器 recorderManager。
2.小程序錄音管理代碼
// 錄音管理
let record = function (recorderManager) {
this.recorderManager = recorderManager
this.recordStart()
}
record.prototype = {
// 開始錄音
start: function (startObj) {
this.recorderManager.start(startObj)
},
//錄音開始事件
recordStart: function () {
this.recorderManager.onStart(() => {
console.log(this.recorderManager, 'this.recorderManager')
})
}
}
3.Page onLoad配置
//錄音管理,new 出 第二階段的實例
recorderManager = wx.getRecorderManager()
that.newRecord = new record(recorderManager)
that.newRecord.recorderManager.onStop((res) => {
console.log(res, '獲取錄製完的連接')
})
//播放錄音
innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.onEnded(() => {
console.log("音頻天然播放結束")
})
4.如今開始錄音
startRecord() {
let that = this,
startObj = {
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
//錄音開始
that.newRecord.start(startObj)
// 錄音計時器
recordTimeInterval = setInterval(function () {
}, 1000)
},
5.中止錄音
stopRecord() {
clearInterval(recordTimeInterval);
//中止錄音事件
this.newRecord.recorderManager.stop()
}
6.播放錄音
// 播放錄音
playVoice(e) {
let that = this
let srcPath = e.currentTarget.dataset.temppath, // 點擊當前傳遞的播放連接
duration = e.currentTarget.dataset.duration, // 錄音時間
index = e.currentTarget.dataset.index // 索引
checkArr[index] = srcPath //用於頁面判斷播放一個,另外一個暫停
// 播放
innerAudioContext.obeyMuteSwitch = false
innerAudioContext.src = srcPath
innerAudioContext.play()
// 時間減小器
playTimeInterval = setInterval(() => {
let playTime = that.data.playTime += 1
}, 1000)
}
7.中止播放
// 中止播放
stopVoice(forIndex, e) {
let index;
e !== undefined ? index = e.currentTarget.dataset.index : index = forIndex
clearInterval(playTimeInterval)
checkArr[index] = undefined
innerAudioContext.stop()
}
8.只能播放一個的代碼
// 只能播放一個
onePlayFor(tempFilePath, src) {
tempFilePath.forEach((el, i) => {
if (el.tempFilePath !== src) {
this.stopVoice(i)
}
})
}
效果圖
錄音與中止錄音使用小程序bind:touchstart='startRecord' bind:touchend='stopRecord' 事件