微信小程序开发实战（29）：控制背景音乐

灰太狼 2022-12-04 01:25 426阅读 0赞

小程序还提供一组用于播放背景音乐的API，背景音乐和普通音乐的区别就是背景音乐在当前页面播放后，即使切换到当前小程序的其他页面，也不会停止播放。但当小程序退出后，背景音乐就会停止播放。

在小程序中，允许播放背景音乐、暂停背景音乐、停止背景音乐和随机定位背景音乐。这4个功能分别由如下4个方法实现。

*  wx. playBackgroundAudio：播放背景音乐

*  wx.pauseBackgroundAudio：暂停背景音乐

*  wx.stopBackgroundAudio：停止背景音乐

*  wx.seekBackgroundAudio：随机定位背景音乐

除此之外，小程序还提供了wx.getBackgroundAudioPlayerState方法用来获取背景音乐状态。这几个方法都需要设置一些属性。这些内容会连同本节的案例一起介绍。

本节要实现一个可以在线播放背景音乐的小程序，主界面如图1所示。

![format_png][]

图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 = 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方法支持在线播放背景音乐，通过dataUrl属性指定在线背景音乐的Url
 *  这里使用app.globalData.backgroundAudioPlaying变量保存背景音乐的播放状态。其中app.globalData是全局作用域。由于背景音乐对于当前小程序来说是全局的，所以要求即使播放背景音乐的当前窗口关闭，播放状态变量仍然有效，所以需要将这些相对于当前小程序是全局的变量放到app.globalData中
 *  本例使用了JavaScript中标准的定时器来获取背景音乐播放的当前位置，每500毫秒通过wx.getBackgroundAudioPlayerState方法获取一次背景音乐播放的位置

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 1][]

关注  「极客起源」  公众号，获得更多免费技术视频和文章。

![format_png 2][]

[format_png]: /images/20221123/6c712696701b41f282a28f15923f07dd.png
[format_png 1]: /images/20221123/cfa7b36501f64b6393ef09225ffe3f43.png
[format_png 2]: /images/20221123/c89e0365053744c5960af877a7fe5beb.png