闲话少说,直接上代码!
首先wxml
<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>
然后js
首先使用方法获取对象
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
然后写一个button来调用开始录音的方法。
//开始录音的时候
start: function () {
const options = {
duration: 10000,//指定录音的时长,单位 ms
sampleRate: 16000,//采样率
numberOfChannels: 1,//录音通道数
encodeBitRate: 96000,//编码码率
format: 'mp3',//音频格式,有效值 aac/mp3
frameSize: 50,//指定帧大小,单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
再写一个button来调用停止录音的方法
//停止录音
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)
})
},
但是你会发现点击播放根本播放不出来。这是为什么呢,路径也可以打印出来,原来小程序返回的临时路径根本无法播放,
需要通过wx.uploadFile()方法来从后台获取处理好的mp3文件来进行播放。
setTimeout(function () {
. var urls = app.globalData.urls + "/Web/UpVoice";
console.log(s.data.recodePath);
wx.uploadFile({
url: urls,
filePath: s.data.recodePath,
name: 'file',
. header: {
'content-type': 'multipart/form-data'
},
success: function (res) {
var str = res.data;
var data = JSON.parse(str);
if (data.states == 1) {
. var cEditData = s.data.editData;
. cEditData.recodeIdentity = data.identitys;
. s.setData({ editData: cEditData });
}
else {
wx.showModal({
title: '提示',
content: data.message,
showCancel: false,
success: function (res) {
. }
});
}
. wx.hideToast();
. },
fail: function (res) {
. console.log(res);
. wx.showModal({
title: '提示',
content: "网络请求失败,请确保网络是否正常",
showCancel: false,
. success: function (res) {
. }
});
wx.hideToast();
}
. })