从微信小程序平台自基础库 1.6.0 版本开始,官方就不再推荐使用audio
组件标签播放音频文件,替代方案是使用createInnerAudioContext
接口来操作,音频文件的播放,暂停等一系列事件都改由异步回调的方式获取。
和标签的方式相比,createInnerAudioContext
接口稍微复杂一点,这里以uniAPP
为例,初始化音频接口:
1 | onLoad() { |
在页面Page
的onLoad
生命周期回调函数中初始化,接口中音频文件的实践操作大部分都是on
或off
开头的回调,比如onPlay
,onError
。
在获得音频长度duration
时,它是createInnerAudioContext
对象的属性,需要在onCanplay
函数中获取:
1 | innerAudioContext.onCanplay(() => { |
但是这时duration是0,并没有获取到音频文件的真实长度,解决办法如下:
1 | innerAudioContext.onCanplay(() => { |
在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