微信官方大大提供了完整的音频相关api,可以直接看看官方文档熟悉下。
录音:https://developers.weixin.qq.com/miniprogram/dev/api/media/recorder/wx.getRecorderManager.html
音频播放:https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html
录音:注意需要用户授权scope.record
先获取全局唯一的录音管理器:
const recorderManager = wx.getRecorderManager();//创建录音对象
一般我们设计录音都是长按触发录制,我这里也一样,提前给按钮绑定longpress(长按)、touchend(手指触摸动作结束)、touchcancel(手指触摸动作被打断,如来电提醒,弹窗)3个事件,详见https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html,示例如下:
<view catchlongpress="handleRecordStart" catchtouchend="handleRecordStop" catchtouchcancel="touchcancel"></view>
// 长按开始录制
handleRecordStart() {
var that = this;
// 弹窗提示
this.setData({isRecording: true,recordTip: '正在录音'});
// 如果当前正在播放录音那就停止播放
myAudio.stop();
this.setData({ isPlay:false});
// 开始录音
recorderManager.start({
duration: 60000,
format: 'mp3'
});
// 监听录音开始事件
recorderManager.onStart(()=>{
// 手动计时-暂时无法在录音播放之前获取到时长只能手动计时
that.data.tapeTime=0;
that.timer=setInterval(() => {
that.data.tapeTime++;
}, 1000);
// 超过60秒自动停止并发送录音
setTimeout(()=>{
recorderManager.stop();// 结束录音
that.recorderManagerOnStop();// 对停止录音进行监控
},60000);
});
},
注意:微信小程序目前只支持最多10分钟的录音。另外本人暂时没有想到办法直接获取录音的时长,只能手动计时,希望有办法的可以分享一下谢谢。
// 松开停止录制
handleRecordStop() {
recorderManager.stop();// 结束录音
this.recorderManagerOnStop();// 对停止录音进行监控
},
注意:在录音超过60秒以及松开停止录制时都对录音停止进行了监听,其实也就是每次都绑定了一次监听事件onStop,实际只需要对recorderManager录音对象在页面中只绑定一次监听事件即可(可参照下文音频监听事件的绑定),这里我的处理不够细腻。
// 触摸动作被打断-如来电提醒,授权弹窗等
touchcancel(){
// 前面录的不做处理,需重新录制
recorderManager.stop();
this.setData({isRecording: false});
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
封装监听录音结束处理函数:
// 监听录音结束
recorderManagerOnStop(){
var that = this;
if (that.timer) {
clearInterval(that.timer);
that.timer = null;
}
recorderManager.onStop((res) => {// 录音管理器自带的监控事件onStop
// 对录音时长进行判断,少于3s的不进行发送,并做出提示
if (res.duration <= 3000) {
that.setData({ recordTip: '时间太短,请超过3秒' }, () => {
// 关闭弹窗
setTimeout(() => {
that.setData({ isRecording: false });
}, 1000);
});
} else {
const {tempFilePath} = res;
// 关闭弹窗、展示录音播放按钮和时长
that.setData({ isRecording: false ,tempFilePath,haveTape: true,tapeTime: that.data.tapeTime});
}
})
},
录音录好了之后,通过音频上下文对象控制播放/停止播放。
音频播放:
先创建内部audio上下文InnerAudioContext对象:
const myAudio = wx.createInnerAudioContext();//创建音频对象
// 点击播放/暂停音频
handlePlay() {
let that=this;
that.setData({ isPlay: !that.data.isPlay },()=>{
myAudio.src=that.data.tempFilePath;
if(that.data.isPlay){
myAudio.play();
}else{
myAudio.stop();
}
});
},
一般播放停止的时候按钮样式会发生改变,我们可以在onLoad中提前绑定好相关的监听事件:
onLoad: function () {
// 监听播放自然结束时,修改按钮展示
myAudio.onEnded(()=>{
this.changeIsPlay();
});
// 监听被停止时,修改按钮展示(如有需要,对播放暂停也可进行监听,事件onPause)
myAudio.onStop(()=>{
this.changeIsPlay();
});
// 监听音频因为受到系统占用而被中断开始事件。以下场景会触发此事件:闹钟、电话、FaceTime 通话、微信语音聊天、微信视频聊天。此事件触发后,小程序内所有音频会暂停
wx.onAudioInterruptionBegin(()=>{
myAudio.stop();
})
},
//播放完毕修改按钮状态
changeIsPlay(){
this.setData({isPlay:false,isPlay2:false});
},