微信小程序開發實戰（29）：控制背景音樂

小程序還提供一組用於播放背景音樂的API，背景音樂和普通音樂的區別就是背景音樂在當前頁面播放後，即便切換到當前小程序的其餘頁面，也不會中止播放。但當小程序退出後，背景音樂就會中止播放。

在小程序中，容許播放背景音樂、暫停背景音樂、中止背景音樂和隨機定位背景音樂。這4個功能分別由以下4個方法實現。

• wx. playBackgroundAudio：播放背景音樂

• wx.pauseBackgroundAudio：暫停背景音樂

• wx.stopBackgroundAudio：中止背景音樂

• wx.seekBackgroundAudio：隨機定位背景音樂

除此以外，小程序還提供了wx.getBackgroundAudioPlayerState方法用來獲取背景音樂狀態。這幾個方法都須要設置一些屬性。這些內容會連同本節的案例一塊兒介紹。

本節要實現一個能夠在線播放背景音樂的小程序，主界面如圖1所示。

圖1  播放背景音樂的主界面

該小程序用於控制部分由3個<button>組件和一個<slider>組件組成。點擊「播放背景音樂」按鈕，會播放背景音樂，點擊「暫停背景音樂」按鈕，會暫停播放背景音樂，再次點擊「播放背景音樂」按鈕，會繼續播放背景音樂，點擊「中止背景音樂」按鈕，會中止背景音樂的播放。

經過滑動<slider>組件的滑桿，會定位到背景音樂的某一個位置，從該位置繼續播放背景音樂。若是在模擬器上測試，在模擬器的下方，會出現一個音樂控制器，能夠暫停和繼續播放背景音樂。

下面是實現圖10-11所示界面的佈局代碼。

<view style="margin: 30px;"> <view style="width: 100%;display: flex;"> <text style="width: 100%;font-size: 60px;margin: 20px; text-align: center; ">{{formatedPlayTime}}</text> </view> <slider style="width: 100%" min="0" max="401" step="1" value="{{playTime}}" bindchange="seek" ></slider> <view style="font-size: 28px; width: 100%;display: flex;justify-content: space-between;box-sizing: border-box;"> <text>00:00</text> <text>06:41</text> </view> <button style="margin-top:20px" bindtap="playBackgroundAudio">播放背景音樂</button> <button style="margin-top:20px" bindtap="pauseBackgroundAudio">暫停背景音樂</button> <button style="margin-top:20px" bindtap="stopBackgroundAudio">中止背景音樂</button></view>

從這段佈局代碼能夠看到，<slider>組件的拖動事件和seek函數綁定，而3個按鈕分別和playBackgroundAudio、pauseBackgroundAudio和stopBackgroundAudio函數綁定。因爲這些API沒法獲取背景音樂的時長，因此在佈局代碼中直接指定了時長（06:41）。<slider>組件的max屬性值是401。每個刻度表示1秒。06:41的時長正好是401秒。

下面是完整的JavaScript代碼。

// 背景音樂文件對應的Url（在線播放）var dataUrl ='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' var app = getApp()Page({ data: { playTime:0, // <slider>組件當前的位置 formatedPlayTime: '00:00:00' // 當前播放的位置 }, //播放背景音樂 playBackgroundAudio: function () { var that = this wx.playBackgroundAudio({ dataUrl: dataUrl, title: '此時此刻',  }) this.enableInterval() app.globalData.backgroundAudioPlaying = true }, // 暫停背景音樂 pauseBackgroundAudio: function () { var that = this wx.pauseBackgroundAudio() app.globalData.backgroundAudioPlaying = false }, // 中止背景音樂 stopBackgroundAudio: function () { var that = this wx.stopBackgroundAudio({ success: function (res) { that.setData({ playTime: 0, formatedPlayTime: '00:00:00' }) } }) app.globalData.backgroundAudioPlaying = false  }, // 將秒格式的時間格式化爲00:00:00形式（時分秒） formatTime: function (time) { if (typeof time !== 'number' || time < 0) { return time } var hour = parseInt(time / 3600) time = time % 3600 var minute = parseInt(time / 60) time = time % 60 var second = time  return ([hour, minute, second]).map(function (n) { n = n.toString() return n[1] ? n : '0' + n }).join(':') }, // 隨機定位背景音樂 seek: function (e) {  clearInterval(this.updateInterval) var that = this  wx.seekBackgroundAudio({ position: e.detail.value, complete: function () { // 實際會延遲兩秒左右才跳過去 setTimeout(function () { that.enableInterval() }, 2000) } }) }, // 開啓定時器，播放計時 enableInterval: function () { var that = thisupdate()// 開啓定時器，500毫秒獲取一次背景音樂的播放位置 this.updateInterval = setInterval(update, 500)  function update() { wx.getBackgroundAudioPlayerState({ success: function (res) { if (res.currentPosition != undefined) {that.setData({ playTime: res.currentPosition, formatedPlayTime: that.formatTime(res.currentPosition + 1) }) } } }) } },})

咱們能夠從以下幾點理解這段代碼。

• wx.playBackgroundAudio方法支持在線播放背景音樂，經過dataUrl屬性指定在線背景音樂的Url
• 這裏使用app.globalData.backgroundAudioPlaying變量保存背景音樂的播放狀態。其中app.globalData是全局做用域。因爲背景音樂對於當前小程序來講是全局的，因此要求即便播放背景音樂的當前窗口關閉，播放狀態變量仍然有效，因此須要將這些相對於當前小程序是全局的變量放到app.globalData中
• 本例使用了JavaScript中標準的定時器來獲取背景音樂播放的當前位置，每500毫秒經過wx.getBackgroundAudioPlayerState方法獲取一次背景音樂播放的位置

對本文感興趣，能夠加李寧老師微信公衆號（unitymarvel）：

關注  「極客起源」  公衆號，得到更多免費技術視頻和文章。

本文分享自微信公衆號 - 極客起源（geekculture）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。