小程序的背景音频

最近在写一个文章列表,点击每篇文章进入文章详情页面,会有不同的背景音乐,点击返回,背景音乐仍然会在后台播放

在app.js的onLaunch函数中

 //获取全局唯一的背景音频管理器
    this.appMusic=wx.getBackgroundAudioManager();

在app.json中配置在后台运行的功能

"requiredBackgroundModes": ["audio"],

在详情页面的onLoad函数中,调用一下方法

setMusic (){
   //若连着两次进入 同一个页面,则不需要设置音乐,直接是后台正在播放的音乐
    //在a页面将音乐停止或者正常播放完,再次进入同一a页面需要重新设置音乐,所有有了后半部分的判断
    if ((app.globalData.postID != this.data.postID) || (app.globalData.postID == this.data.postID&&app.globalData.isStop)) {
      console.log('需要设置音乐')
      app.appMusic.startTime = '10'
      app.appMusic.src = this.data.musicIndex.url;
      app.appMusic.title = this.data.musicIndex.title;
      app.appMusic.coverImgUrl = this.data.musicIndex.coverImg;
    } 
    //监听音乐播放
    app.appMusic.onPlay(() => {
      console.log('音乐播放了');
      this.setData({
        isStart: true
      })
    });
    //监听音乐暂停
    app.appMusic.onPause(() => {
      console.log('音乐暂停了');
      this.setData({
        isStart: false
      })
    });
    //监听音乐停止
    app.appMusic.onStop(() => {
      console.log('音乐停止了')
      app.globalData.isStop=true;
      this.setData({
        isStart: false
      })
    })
    //监听到音乐播放完了
    app.appMusic.onEnded(()=>{
      app.globalData.isStop = true;
      this.setData({
        isStart:false
      })
    })
  },

在点击详情页面的,控制音乐播放暂停的小图标

<image wx:if="{{isStart}}" src="/images/music/music-stop.png" class="music" bindtap="goMusic"/>
<image wx:else src="/images/music/music-start.png" class="music" bindtap="goMusic"/>

goMusic (){
    if(this.data.isStart){//需要暂停
         app.appMusic.pause();
    }else{//需要播放
           //若是音乐停止之后的播放
           if(app.globalData.isStop){//从头播放
              app.appMusic.startTime = '10'
              app.appMusic.src = this.data.musicIndex.url;
              app.appMusic.title = this.data.musicIndex.title;
              app.appMusic.coverImgUrl = this.data.musicIndex.coverImg;
           }else{//接着暂停的开始播放
             app.appMusic.play();
           }
    }
    this.setData({
      isStart:!this.data.isStart
    })
  },

判断两次进入的文章详情是否是同一篇文章

//当从详情页面 返回列表页面,会执行onUnload
onUnload: function () {
    //目的保存上一个页面的id,再次进入这个页面音乐会接着播放
    app.globalData.postID=this.data.postID;
  },

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值