微信小程序audio音频组件

微信小程序audio音频组件

audio是专门用来播放音频的一个组件，audio组件默认是有样式的，上面的播放功能按钮等都可以进行交互，控制音频播放。同时，微信团队也专门提供了API以方便使用代码对音频进行控制。

因为一个页面中可以存在多个audio组件，所以在使用时要添加一个id属性来进行区分。audio属性如表所示：

audio默认样式如图所示：

如果不想采用默认样式也可以只给audio组件设置“scr”和“id”，手动来搭建样式。

在JavaScript文件中需要获取到对应audio组件的上下文，之后才能调用对应的API来进行控制，获取audio组件对应的上下文代码为“wx.createInnerAudioContext(‘idName’)”。API的操作需要在1.6.0以上的版本中进行。

• 播放API：InnerAudioContext.play()。
• 暂停API：InnerAudioContext.pause()暂停后再播放会从暂停处开始播放。
• 停止API：InnerAudioContext.stop()停止后再播放会从头开始播放。
• 跳转到某个时间API：InnerAudioContext.seek(number)跳转设置的时间，单位为秒，可以使用小数点精确到毫秒。

微信团队还提供了API来监听audio的播放结束、播放暂停等事件，都是以回调函数的方式。

• 监听开始播放API：InnerAudioContext.onCanplay(function callback)。
• 监听播放API：InnerAudioContext.onPlay(function callback)。
• 取消监听播放API：InnerAudioContext.offPlay(function callback)。
• 监听暂停播放API：InnerAudioContext.onPause(function callback)。
• 取消监听暂停播放API：InnerAudioContext.offPause(function callback)。
• 监听播放停止API：InnerAudioContext.onStop(function callback)。
• 监听音频跳转API：InnerAudioContext.offSeeked(function callback)。

酷客网相关文章：

• 微信小程序camera相机组件
• 微信小程序picker-view嵌入式滚动选择器组件
• 微信小程序picker滚动选择器组件
• 微信小程序textarea多行输入框组件