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

  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>

标签: 小程序

添加新评论