微信小程序中createInnerAudioContext操作音频笔记

从微信小程序平台自基础库 1.6.0 版本开始,官方就不再推荐使用audio组件标签播放音频文件,替代方案是使用createInnerAudioContext接口来操作,音频文件的播放,暂停等一系列事件都改由异步回调的方式获取。

和标签的方式相比,createInnerAudioContext接口稍微复杂一点,这里以uniAPP为例,初始化音频接口:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onLoad() {
let vm = this;
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});

this.audioContext = innerAudioContext;
}

在页面PageonLoad生命周期回调函数中初始化,接口中音频文件的实践操作大部分都是onoff开头的回调,比如onPlayonError

在获得音频长度duration时,它是createInnerAudioContext对象的属性,需要在onCanplay函数中获取:

1
2
3
innerAudioContext.onCanplay(() => {
console.log(innerAudioContext.duration);
});

但是这时duration是0,并没有获取到音频文件的真实长度,解决办法如下:

1
2
3
4
5
6
7
8
9
10
innerAudioContext.onCanplay(() => {
console.log(innerAudioContext.duration);
let intervalID = setInterval(() => {
if (innerAudioContext.duration > 0) {
clearInterval(intervalID);
vm.audioDuration = innerAudioContext.duration;
console.log(vm.audioDuration);
}
}, 100);
});

onCanplay中,使用一个Interval定时器来不断获取长度信息,直到得到值。

Reference:

[1] https://zh.uniapp.dcloud.io/component/audio.html#
[2] https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html