微信小程序之----audio音頻播放

audio

audio為音頻組件，我們可以輕松的在小程序中播放音頻。

• audio組件屬性如下：

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

• 錯誤返回碼：MediaError.code

返回錯誤碼	描述
MEDIA_ERR_ABORTED	獲取資源被用戶禁止
MEDIA_ERR_NETWORD	網絡錯誤
MEDIA_ERR_DECODE	解碼錯誤
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合適資源

• wx.createAudioContext(audioId)

　　　　創建並返回audio上下文audioContext對象，控制音頻的播放暫停與跳轉。

方法	參數	說明
play	無	播放
pause	無	暫停
seek	position	跳轉到指定位置，單位 s

• wxml

<!-- 
    poster:音頻封面圖片
    name:歌名
    author:歌手
    src：音頻地址
    controls:是否顯示默認控件，也就是下面這個東東
                                              

    loop:是否循環播放
    id:標注唯一組件以this.audioCtx = wx.createAudioContext('myAudio')獲取控制組件的對象。
    bindplay:播放時觸發該事件
    bindpause：停止時觸發該事件
    bindtimeupdate:時間改變時觸發，該函數攜帶有參數detail={currentTime, duration}當前時間，持續播放時間
    bindended:播放結束時觸發
    binderror；播放錯誤時調用，攜帶參數detail = {errMsg: MediaError.code}

 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="funtimeupdate" bindended="funended" binderror="funerror"></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audio14">設置當前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

• js

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 獲取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  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',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  },
  funplay: function(){
      console.log("audio play");
  },
  funpause: function(){
      console.log("audio pause");
  },
  funtimeupdate: function(u){
      console.log(u.detail.currentTime);
      console.log(u.detail.duration);
  },
  funended: function(){
      console.log("audio end");
  },
  funerror: function(u){
      console.log(u.detail.errMsg);
  }
})

• 效果

 

 

今天早上發現微信小程序的官方文檔在實時跟新，之前的有些標簽或者方法不見了。以上是控制audio組件的方法是根據組件的唯一id生成相應的實例對象，通過對象的各種發放來控制組件。我現在看到的官方文檔是通過有個action屬性，給屬性指定特定的值組件就會執行特定的動作。

method	描述	data
play	播放
pause	暫停
setPlaybackRate	調整速度	倍速
setCurrentTime	設置當前時間	播放時間

• .wxml

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audioPlaybackRateSpeedUp">調為2倍速</button>
<button type="primary" bindtap="audioPlaybackRateNormal">調為1倍速</button>
<button type="primary" bindtap="audioPlaybackRateSlowDown">調為0.5倍速</button>
<button type="primary" bindtap="audio14">設置當前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

• .js

Page({
  data: {
    poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
    name: 'Sugar',
    author: 'Maroon 5'
  },
  audioPlay: function () {
    this.setData({
      action: {
        method: 'play'
      }
    });
  },
  audioPause: function () {
    this.setData({
      action: {
        method: 'pause'
      }
    });
  },
  audioPlaybackRateSpeedUp: function () {
    this.setData({
      action: {
        method: 'setPlaybackRate',
        data: 2//加快速度
      }
    });
  },
  audioPlaybackRateSlowDown: function () {
    this.setData({
      action: {
        method: 'setPlaybackRate',
        data: 0.5//小於零放慢速度
      }
    });
  },
  audio14: function () {
    this.setData({
      action: {
        method: 'setCurrentTime',
        data: 14
      }
    });
  },
  audioStart: function () {
    this.setData({
      action: {
        method: 'setCurrentTime',
        data: 0
      }
    });
  }
})

• 效果

 

上一種方法好像沒有不能控制播放速度，這種方法相比上一種比較方便，並且效率上應該也比較高。