小程序音乐播放

一.设置点击事件onMusicTap控制音乐播放
微信提供音乐播放控制器，只针对总控开关起作用，即在真机模式下，状态栏下的音乐播放控制器。
wx.pauseBackgroundAudio();
wx.playBackgroundAudio();
二（程序有6个页面，不同页面对应不同音乐）
1.解决问题：

2.通过程序图片点击控制音乐播放。
3.每个页面不同的音乐加载
4.通过2可以用图片控制总控开关，但是总控开关不能控制图片。将总控开关与程序图标开关联系，监听音乐播放完毕图标处理
5.未关闭音乐播放再次进入，图标显示音乐未播放
6.完成5后，未关闭音乐播放进入其他页面，图标变动

2.实现程序自己的音乐播放逻辑
根据当前音乐的播放状态改变音乐播放逻辑初始化定义isPlayingMusic:false

 //pause
    if (isPlayingMusic) {
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic: false
      })
    } else {
    //play 
      wx.playBackgroundAudio({
        dataUrl: this.data.dataUrl1,
        title: this.data.title1,
        coverImgUrl: this.data.coverImgUrl1,
      })
      this.setData({
        isPlayingMusic: true
      })

音乐启动和暂停图标切换

src="{{isPlayingMusic? '/image/icon/pausemusic.png':'/image/icon/playmusic.png'}}"

3.实现不同音乐切换

 wx.playBackgroundAudio({
        dataUrl: this.data.dataUrl1,
        title: this.data.title1,
        coverImgUrl: this.data.coverImgUrl1,
  })

4.解决总控开关和程序图标一致

setMusicMonitor: function() {
    //监听音乐播放
    wx.onBackgroundAudioPlay(event =>{
        if (app.globalData.g_currentMusicPostId == this.data.currentPostId) {
          // 播放当前页面音乐才改变图标
          this.setData({
            isPlayingMusic: true
          })
      }
      app.globalData.g_isPlayingMusic = true;
    });
    //监听音乐暂停
    wx.onBackgroundAudioPause(()=> {
      if (app.globalData.g_currentMusicPostId == this.data.currentPostId) {
          this.setData({
            isPlayingMusic: false
          })
      }
      app.globalData.g_isPlayingMusic = false;
    });
    
    //监听音乐停止
    wx.onBackgroundAudioStop(()=> {
      this.setData({
        isPlayingMusic: false
      })
      app.globalData.g_isPlayingMusic = false;
    });
  }

5.未关闭音乐播放再次进入该页面，图标显示音乐未播放
删除初始化定义isPlayingMusic:false无用，因为布尔型的变量初始化为false
定义全局变量 g_isPlayingMusic:false,

if (app.globalData.g_isPlayingMusic) {
this.setData({
isPlayingMusic: true
})在onload函数中定义，处理初始化页面时，页面图标
同时在4.中根据不同音乐状态改变全局变量g_isPlayingMusic
6.完成5后，未关闭音乐播放进入其他页面，图标变动
定义全局变量g_currentMusicPostId在5后加对当前页面的判断，并在4中+当前页面和播放音乐页面一致时，才改变图标，如此，播放音乐后去浏览其他页面，回来后该页面音乐播放也能显示播放状态。其他页面图标显示也不会被音乐打乱。
改变g_currentMusicPostId在onMusicTap音乐播放时，改变g_currentMusicPostId播放音乐的id

  if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === postId) {
      this.setData({
        isPlayingMusic: true
     })
    }

 onMusicTap: function(event) {
    var currentPostId = this.data.currentPostId;
    var isPlayingMusic = this.data.isPlayingMusic;
    //pause
    if (isPlayingMusic) {
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic: false
      })
      app.globalData.g_isPlayingMusic = false;
    } else {
    //play 
      wx.playBackgroundAudio({
        dataUrl: this.data.dataUrl1,
        title: this.data.title1,
        coverImgUrl: this.data.coverImgUrl1,
      })
      this.setData({
        isPlayingMusic: true
      })
      app.globalData.g_currentMusicPostId = this.data.currentPostId;
      app.globalData.g_isPlayingMusic = true;
    }
  }

猜你喜欢