页面效果图:
未录音的数据,点击开始录音,点击停止录音上传录音
已录音状态可以播放录音、重新录制功能
代码:
创建内部 audio 上下文 InnerAudioContext 对象
获取全局唯一的录音管理器 RecorderManager
// 监听页面加载时,创建内部 audio 上下文 InnerAudioContext 对象
onLoad(options){
const innerAudioContext = wx.createInnerAudioContext({
useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
})
// 获取全局唯一的录音管理器 RecorderManager
const recorderManager = wx.getRecorderManager();
this.setData({
innerAudioContext:innerAudioContext,
recorderManager,
})
}
点击开始录音
handleStart(){
// 开始录音
this.data.recorderManager.start({
format: 'wav', // 录音格式
});
this.setData({
isAudio:true,
})
},
点击停止录音
handleStop(){
// 监听录音结束事件
this.data.recorderManager.onStop((res)=>{
this.setData({
isAudio:false,
audioSrc:res.tempFilePath, // 录音文件的临时路径
duration:res.duration/1000 // duration 录音时长,单位ms,我需要的是s,做了处理
});
// 停止录音后,上传文件
this.getUploadFile(res.tempFilePath)
});
// 停止录音
this.data.recorderManager.stop()
},
// 停止录音后,上传文件
getUploadFile(file){
wx.uploadFile({
filePath: file,
name: 'file',
// 上传文件的接口地址
url: `${app.globalData.baseUrl}/xxxx/uploadVoice`,
formData: {
'user': 'test',
'file':'blob.ogg'
},
header: {
Authorization: `Bearer ${wx.getStorageSync('token')}`,
},
timeout: 0,
success: (result) => {
wx.showToast({
title: '录音成功',
})
// 上传文件成功后,调用接口自动保存录音文件
this.getUpload(result.data)
},
fail: (res) => {
wx.showToast({
title: res.message,
})
},
complete: (res) => {
console.log(res,'《=====录音成功或失败都会调用');
},
})
},
监听录音结束事件返回的res
点击播放录音
handlePlay(){
// 录音文件地址
this.data.innerAudioContext.src = this.data.item.audioUrl;
// 播放录音
this.data.innerAudioContext.play();
this.setData({
isPlay:true
})
// 监听音频自然播放至结束的事件,播放结束,停止播放
this.data.innerAudioContext.onEnded(()=>{
this.handleStopPlay()
})
},
// 暂停播放
handleStopPlay(){
this.setData({
isPlay:false
});
this.data.innerAudioContext.stop();
},