私域电商软件及相关增值服务提供商    

免费试用
2023年微信小程序媒体组件 audio
作者: --时间: 2025-07-29 16:49:42 阅读量:
使用微信小程序媒体组件 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 提供了一系列方便

一套系统全搞定
  • 商家管理
  • 商品管理
  • 订单管理
  • 会员管理
  • 营销中心
  • 供应链入驻
  • 财务管理
  • 支付分账
  • 商城直播
免费试用
更多产品任你选
B2B2C多用户商城系统

类天猫&京东模式系统

了解更多
B2B2B电商交易系统

全渠道订货/采购及经销商管
理数字化系统

了解更多
S2B2B电商交易系统

上下游资源整合数字化解决方

了解更多
企业集采商城系统

中大型企业数字化采购与交易
系统

了解更多
员工福利商城系统

集福利管理、发放于一体的员
工福利商城

了解更多

电话咨询 微信咨询 0元开店