微信小程序中媒體音頻播放組件audio的示例分析

這篇文章主要介紹微信小程序中媒體音頻播放組件audio的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

首先要根據音頻文件的id來確定 要獲取的音頻組件的上下文對象(相當于這個對象綁定某音頻組件)。

<audio controls loop poster='{{poster}}' name='{{name}}' author='{{author}}' src='{{src}}' id='audioID'/>

<button size='mini'  bindtap="audioPlay" > 播放</button>
<button bindtap="audioPause" size='mini'>暫停</button>

controls顯示音頻控制鍵

loop循環播放

poster在控制播放鍵是加的圖片

name音頻名稱

author作者

src音頻文件

id唯一標識

雖然可以通過controls來播放, 如果不要controls, 也可以通過js的事件來控制播放與暫停

Page({
  data: {
    poster: 'https://cache.yisu.com/upload/information/20201208/261/14923.jpg?max_age=2592000',
    name: '此時此刻',
    author: '許巍',
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },

  /**獲取 audio上下文audioContext對象 */
  onReady: function () {
    // 使用API: wx.createAudioContext 獲取 此音頻組件的 上下文對象
    this.audioCtx = wx.createAudioContext('audioID')
  },
  
  /**播放 */
  audioPlay: function() {
    this.audioCtx.play();
  },

  /**暫停 */
  audioPause : function() {
    this.audioCtx.pause();
  }
})

1.首先要根據音頻文件的id來確定 要獲取的音頻組件的上下文對象(相當于這個對象綁定某音頻組件)

2.通過此對象調用函數就能直接控制播放(play)與暫停(pause)

wx.createAudioContext

對于這個API, 是根據音頻組件創建其上下文對象(這個對象可以播放該音頻文件)

上面使用this.audioCtx = wx.createAudioContext('audioID')  --> 為this創建了audioCtx屬性并賦了值

還可以跳轉到指定的時間:

/**跳轉播放到20秒 */
  audio20: function () {
    this.ctx.seek(20);
  }

以上是“微信小程序中媒體音頻播放組件audio的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！