2.一起看一下 audio.wxml

  
<audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}"  bindplay="bindPlay" bindpause='bindPause' bindended='bindEnd' binderror='bindError' bindtimeupdate='bindTimeUpdate' controls loop>audio>  
<button type="primary" class="audioButton" bindtap="audioPlay">播放button>  
<button type="primary" class="audioButton" bindtap="audioPause">暫停button>  
<button type="primary" class="audioButton" bindtap="audio14">設置當前播放時間為14秒button>  
<button type="primary" class="audioButton" bindtap="audioStart">回到開頭button>  

①id為audio組件的唯一標識，在js中通過該id獲取audio上下文context

this.audioCtx = wx.createAudioContext('myAudio')  

②poster、name、author、src為audio資源，詳見屬性表
③bindplay、bindpause、bindended監聽audio的播放、暫停和結束，在js中進行實現

bindPlay: function () {//監聽音樂開始/繼續播放  
    console.log("<" + this.data.name + '>繼續播放')  
  },  
  bindPause: function () {//監聽音樂暫停  
    console.log("<" + this.data.name + '>暫停播放')  
  },  
  bindEnd: function () {//監聽音樂播放結束  
    console.log("<" + this.data.name + '>結束播放')  
  },  

④binderror監聽audio的錯誤

bindError: function (error) {//監聽錯誤，錯誤信息error.detail.errMsg  
    console.log(error.detail.errMsg)  
  },

其中errMsg有四種
返回錯誤碼 描述
MEDIAERRABORTED 獲取資源被用戶禁止
MEDIAERRNETWORD 網絡錯誤
MEDIAERRDECODE 解碼錯誤
MEDIAERRSRCNOTSUPPOERTED 不合適資源
我將模擬器設置為offline觸發了“MEDIAERRSRCNOTSUPPOERTED”，暫未觸發成功過其他錯誤。
⑤bindtimeupdate監聽播放時間的變化，單位為s

bindTimeUpdate:function(timeupdate){  
    console.log("當前播放位置："+timeupdate.detail.currentTime+"s")  
  },  

⑥loop為true則音樂自動循環播放
⑦controls控制播放窗口（紅色框內部分）的可見性↓

2.完整的js代碼↓

Page({  
  onReady: function (e) {  
    // 使用 wx.createAudioContext 獲取 audio 上下文 context  
    this.audioCtx = wx.createAudioContext('myAudio')  
  },  
  data: {  
    // poster: '../../resources/image/隔壁團.jpg',  
    // name: '夏天海邊',  
    // author: '隔壁團樂隊',  
    // src: '../../resources/audio/夏天海邊.mp3',  
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',  
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',  
    name: '此時此刻',  
    author: '許巍'  
  },  
  bindPlay: function () {//監聽音樂開始/繼續播放  
    console.log("<" + this.data.name + '>繼續播放')  
  },  
  bindPause: function () {//監聽音樂暫停  
    console.log("<" + this.data.name + '>暫停播放')  
  },  
  bindEnd: function () {//監聽音樂播放結束  
    console.log("<" + this.data.name + '>結束播放')  
  },  
  bindError: function (error) {//監聽錯誤，錯誤信息error.detail.errMsg  
    console.log("=================================")  
    console.log(error.detail.errMsg)  
    console.log("=================================")  
  },  
  bindTimeUpdate:function(timeupdate){  
    console.log("當前播放位置："+timeupdate.detail.currentTime+"s")  
  },  
  audioPlay: function () {//點擊“播放”觸發  
    this.audioCtx.play()  
  },  
  audioPause: function () {//點擊“暫停”觸發  
    this.audioCtx.pause()  
  },  
  audio14: function () {//設置當前播放時間為14秒，seek單位為s  
    this.audioCtx.seek(14)  
  },  
  audioStart: function () {  
    this.audioCtx.seek(0)  
  }  
})  

audioContext 對象的方法列表：
方法 參數 說明
setSrc src 音頻的地址
play 無 播放
pause 無 暫停
seek position 跳轉到指定位置，單位 s

3.wxss樣式文件↓

/* pages/audio/audio.wxss */  
.audioButton{  
  margin-left: 20px;  
  margin-right: 20px;  
  margin-top: 20px;  
} 

4.上面給出的js源碼中使用了網絡資源，我們也可以使用本地資源。建立一個與pages同級的資源文件夾。目錄結構如下↓（但是需要注意，微信小程序有大小限制。太大資源會無法在實體機上預覽）

使用本地資源后，其他功能都不受影響，但是seek（14）有bug，每次都是從頭開始播放。不知道是不是小程序的bug難過。今天關于audio的部分就記錄到這里啦