2023年微信小程序媒体组件 audio

使用微信小程序媒体组件 audio，让你的企业更具吸引力。 1. 为什么选择使用小程序媒体组件 audio?

在设计企业的移动端应用时，音频功能是一项不可或缺的元素。而微信小程序媒体组件 audio 提供了一个方便简洁的解决方案。除了基本的播放、暂停、设置当前播放时间以及回到开头等功能，还支持是否循环播放、控制面板和媒体错误处理等操作。

2. 快速集成微信小程序媒体组件 audio

快速开始使用小程序媒体组件 audio 的方法如下：

- 第一步，在 wxml 文件中添加 audio 元素并配置 src 属性

<audio src="{{src}}" id="myAudio" controls loop></audio>

- 第二步，在 js 文件中初始化 audio 上下文 context 并设定相关事件处理函数

Page({
  onReady: function (e) {
    // 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    src: 'http://example.com/xxx.mp3',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  }
})

3. 小程序媒体组件 audio 的详细属性和事件列表

小程序媒体组件 audio 提供多种属性和事件，使得开发音频应用更加方便。下面列出了所有的属性和事件：

• id: audio 组件的唯一标识符
• src: 要播放音频的资源地址
• loop: 是否循环播放
• controls: 是否显示默认控件
• poster: 默认控件上的音频封面的图片资源地址，如果 controls 属性值为false则设置 poster 无效
• name: 默认控件上的音频名字，如果 controls 属性值为false则设置 name 无效
• author: 默认控件上的作者名字，如果 controls 属性值为false则设置 author 无效
• binderror: 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
• bindplay: 当开始/继续播放时触发 play 事件
• bindpause: 当暂停播放时触发 pause 事件
• bindtimeupdate: 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
• bindended: 当播放到末尾时触发 ended 事件

4. 常见的小程序媒体错误列表

小程序媒体组件 audio 的常见错误码如下：

返回错误码	描述
MEDIA_ERR_ABORTED	获取资源被用户禁止
MEDIA_ERR_NETWORD	网络错误
MEDIA_ERR_DECODE	解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合适资源

5. 总结

小程序媒体组件 audio 提供了一系列方便