2023年微信小程序媒體組件 audio

使用微信小程序媒體組件 audio，讓你的企業(yè)更具吸引力。 1. 為什么選擇使用小程序媒體組件 audio?

在設(shè)計企業(yè)的移動端應(yīng)用時，音頻功能是一項不可或缺的元素。而微信小程序媒體組件 audio 提供了一個方便簡潔的解決方案。除了基本的播放、暫停、設(shè)置當前播放時間以及回到開頭等功能，還支持是否循環(huán)播放、控制面板和媒體錯誤處理等操作。

2. 快速集成微信小程序媒體組件 audio

快速開始使用小程序媒體組件 audio 的方法如下：

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

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

- 第二步，在 js 文件中初始化 audio 上下文 context 并設(shè)定相關(guān)事件處理函數(shù)

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 提供多種屬性和事件，使得開發(fā)音頻應(yīng)用更加方便。下面列出了所有的屬性和事件：

• id: audio 組件的唯一標識符
• src: 要播放音頻的資源地址
• loop: 是否循環(huán)播放
• controls: 是否顯示默認控件
• poster: 默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為false則設(shè)置 poster 無效
• name: 默認控件上的音頻名字，如果 controls 屬性值為false則設(shè)置 name 無效
• author: 默認控件上的作者名字，如果 controls 屬性值為false則設(shè)置 author 無效
• binderror: 當發(fā)生錯誤時觸發(fā) error 事件，detail = {errMsg: MediaError.code}
• bindplay: 當開始/繼續(xù)播放時觸發(fā) play 事件
• bindpause: 當暫停播放時觸發(fā) pause 事件
• bindtimeupdate: 當播放進度改變時觸發(fā) timeupdate 事件，detail = {currentTime, duration}
• bindended: 當播放到末尾時觸發(fā) ended 事件

4. 常見的小程序媒體錯誤列表

小程序媒體組件 audio 的常見錯誤碼如下：

返回錯誤碼	描述
MEDIA_ERR_ABORTED	獲取資源被用戶禁止
MEDIA_ERR_NETWORD	網(wǎng)絡(luò)錯誤
MEDIA_ERR_DECODE	解碼錯誤
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合適資源

5. 總結(jié)

小程序媒體組件 audio 提供了一系列方便

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標明：himall原創(chuàng)>