微信小程式廣告自訂元件--媒體音訊播放元件audio

這篇文章解說微信小程式廣告自訂元件之元件audio為音訊播放元件，首先要根據音訊檔案的id來決定 要取得的音訊元件的上下文物件(相當於這個物件綁定某音訊元件)。

<audio controls loop poster=&#39;{{poster}}&#39; name=&#39;{{name}}&#39; author=&#39;{{author}}&#39; src=&#39;{{src}}&#39; id=&#39;audioID&#39;/>

<button size=&#39;mini&#39;  bindtap="audioPlay" > 播放</button>
<button bindtap="audioPause" size=&#39;mini&#39;>暂停</button>

controls顯示音訊控制鍵

loop循環播放

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

name音訊名稱

author作者

src音訊檔案

id唯一標識

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

Page({
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.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的詳細內容。更多資訊請關注PHP中文網其他相關文章！