微信小程序之实现一个简单的音乐播放器

本次讲解中我要实现的功能是：点击播放按钮音乐播放，再次点击音乐暂停，音乐播放过程中，点击页面播放暂停按钮控制后台播放与暂停。

1. 设置播放器的一些状态

   data: {
       // 播放状态，用于切换播放和暂停按钮,true为播放，false为暂停
       play: false,
       // 播放暂停按钮图片地址
       image: {
           play: 'play.png',
           pause: 'pause.png'
       },
       // 当前播放时间进度（秒），初始化0
       currentTime: 0,
       // 当前音频总时间（秒），初始化0
       duration： 0
   }

2. 获取全局唯一背景播放器，并返回BackgroundAudioManager实例，通过该实例提供的api接口就可以控制音频播放了。

   const bgAudio = wx.getBackgroundAudioManaget()

3. 设置音频属性

   // 设置音频标题
   bgAudio.title = '太湖美'
   // 设置音频图片
   bgAudio.coverImgUrl = 'taihumei.jpg'
   // 设置音频数据源，默认为空，一旦设置会自动播放
   bgAudio.src = 'taihumei.mp3'

4. 添加控制方法

   /**
    * 播放方法
    */
   musicPlay() {
       bgAudio.play()
   },
   /**
    * 暂停播放
    */
   musicPause() {
       bgAudio.pause()
   }

5. 添加监听方法

   // 在生命周期函数里添加
   onLoad: function(options) {
       // 监听播放事件
       bgAudio.onPlay( () => {
           // 标记当前状态为已播放状态
           this.setData({
               play: true
           })
       })
       
       // 监听暂停事件
       bgAudio.onPause( () => {
           // 标记当前状态为已播放状态
           this.setData({
               play: false
           })
       })
       
       // 监听停止事件
       bgAudio.onStop( () => {
           // 标记当前状态为已暂停状态
           this.setData({
               play: false
           })
       })
       
       // 监听背景音频播放进度更新事件
       bgAudio.onTimeUpdate( () => {
           // 在音乐播放状态下几乎实时回调这个事件方法，这里可以动态的更新播放进度
           // 如果当前音频的总时间为0，则更新总时间
           if (!this.data.duration) {
             this.setData({
               duration: bgAudio.duration
             })
           }
           
           // 更新当前播放时间
           // 由于一秒之内回调该事件的平均次数为4次。所以已秒为单位计算添加一个判断条件
           const currentTime = ~~bgAudio.currentTime
           if (currentTime > this.data.currentTime) {
               this.setData({
                   currentTime: currentTime
               })
           }
       })
   }

6. WXML页面

   <view class='play_container'>
     <image class='bg' src='{{src1}}'></image>
     <image wx:if='{{!play}}' class='play_btn' src='{{image.play}}'
      bindtap='musicPlay'></image>
     <image wx:else class='play_btn' src='{{image.pause}}'
      bindtap='musicPause'></image>
   </view>