小程序

微信小程序中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;
}

在页面Page的onLoad生命周期回调函数中初始化，接口中音频文件的实践操作大部分都是on或off开头的回调，比如onPlay，onError。

在获得音频长度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