WeChatアプレット開発戦闘（29）：バックグラウンドミュージックの制御

アプレットは、バックグラウンドミュージックを再生するための一連のAPIも提供します。バックグラウンドミュージックと通常のミュージックの違いは、バックグラウンドミュージックが現在のページで再生された後、現在のアプレットの他のページに切り替えても再生が停止しないことです。ただし、アプレットが終了すると、バックグラウンドミュージックの再生が停止します。

アプレットでは、BGMの再生、BGMの一時停止、BGMの停止、およびBGMのランダムな検索が可能です。これら4つの機能は、それぞれ以下の4つの方法で実現されます。

wx。playBackgroundAudio：バックグラウンドミュージックを再生する

wx.pauseBackgroundAudio：バックグラウンドミュージックを一時停止する

wx.stopBackgroundAudio：バックグラウンドミュージックを停止する

wx.seekBackgroundAudio：バックグラウンドミュージックをランダムに検索

さらに、アプレットは、バックグラウンドミュージックの状態を取得するwx.getBackgroundAudioPlayerStateメソッドも提供します。これらのメソッドはすべて、いくつかのプロパティを設定する必要があります。これらの内容は、このセクションの事例とともに紹介されます。

このセクションでは、バックグラウンドミュージックをオンラインで再生できる小さなプログラムを実装します。メインインターフェイスを図1に示します。

図1バックグラウンドミュージックの再生の主なインターフェイス

この小さなプログラムの制御部分は、3つの<button>コンポーネントと1つの<slider>コンポーネントで構成されています。「BGMを再生」ボタンをクリックしてBGMを再生し、「BGMを一時停止」ボタンをクリックしてBGMを一時停止し、もう一度「BGMを再生」ボタンをクリックしてBGMを再生し続け、「BGMを停止」ボタンをクリックします。バックグラウンドミュージックの再生を停止します。

<slider>コンポーネントのスライダーをスライドさせることで、BGMの特定の位置を特定し、その位置からBGMを再生し続けます。シミュレーターでテストすると、シミュレーターの下に音楽コントローラーが表示され、一時停止してBGMの再生を続けることができます。

以下は、図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>コンポーネントのドラッグイベントはシーク関数にバインドされ、3つのボタンはplayBackgroundAudio、pauseBackgroundAudio、stopBackgroundAudio関数にバインドされています。これらのAPIはBGMのデュレーションを取得できないため、デュレーション（06:41）はレイアウトコードで直接指定されます。<slider>コンポーネントの最大属性値は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 = this
update()
//  开启定时器，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メソッドはバックグラウンドミュージックのオンライン再生をサポートし、オンラインバックグラウンドミュージックのURLはdataUrl属性で指定されます
ここでは、app.globalData.backgroundAudioPlaying変数を使用して、バックグラウンドミュージックの再生状態を保存します。ここで、app.globalDataはグローバルスコープです。バックグラウンドミュージックは現在のアプレットに対してグローバルであるため、バックグラウンドミュージックを再生している現在のウィンドウが閉じている場合でも、再生状態変数が有効であるため、現在のアプレットに対してグローバルであるこれらの変数をapp.globalDataに配置する必要があります。
この例では、JavaScriptの標準タイマーを使用してバックグラウンドミュージックの現在の位置を取得し、バックグラウンドミュージックの位置を500ミリ秒ごとにwx.getBackgroundAudioPlayerStateメソッドで取得します。

この記事に興味がある場合は、Li Ning先生のWeChatパブリックアカウント（unitymarvel）を追加できます。

「Geek Origin」の公式アカウントをフォローして、無料のテクニカルビデオや記事を入手してください。

WeChatアプレット開発戦闘（29）：バックグラウンドミュージックの制御

おすすめ