小程序学习--音乐播放器组件的编写

实现功能切换期刊的时候,切换到音乐播放器,点击可以播放,再次点击暂停,切换期刊的时候,不会暂停音乐

首先看下组件的wsml代码:

<!--components/classic/music/index.wxml-->
<view hidden="{{hidden}}" class='container'>
  <!-- 音乐封面图 -->
  <image  class="classic-img {{playing?'rotation':''}}" src="{{img}}"/>
  <!-- 默认播放按钮 -->
  <image bind:tap="onPlay" class="player-img" src="{{!playing?playSrc:pauseSrc}}"/>
  <!-- 分类名 -->
  <image class="tag" src="images/[email protected]"/>
  <!-- 对应文字 -->
  <text class="content">{{content}}</text>
</view>

wxss代码:

/* components/classic/music/index.wxss */
.container{
  display: flex;
  flex-direction: column;
  align-items: center
}
.classic-img{
  width: 442rpx;
  height: 422rpx;
  margin-top: 60rpx;
  border-radius: 50%;
}
.player-img{
  width: 120rpx;
  height: 120rpx;
  position: relative;
  bottom: 270rpx;
}
.tag{
  width: 46rpx;
  height: 142rpx;
  /* 相对偏移 方向相反 */
  position: relative; 
  right:310rpx;
  bottom:58rpx;
}
.rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 12s linear infinite;
  -moz-animation: rotation 12s linear infinite;
  -webkit-animation: rotation 12s linear infinite;
  -o-animation: rotation 12s linear infinite;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

JS代码:

//定义一个变量来存放背景音乐管理对象
const mMgr = wx.getBackgroundAudioManager();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      img: String,
      content: String,
      src:String
      
  },

  /**
   * 组件的初始数据
   * 播放音乐 使用API
   */
  data: {
    playing:false,
    pauseSrc:"images/[email protected]",
    playSrc:"images/[email protected]",

  },
  //播放音乐时候,进行切换,如果切换的页面不是这个音乐的页面,那么按钮是播放的按钮,
  //如果切换的页面是播放音乐对应的页面,按钮是显示暂停的按钮
  //该方法也只能通过wx:if去触发 hidden不行
  attached(event){//方法的简写
      this._recoverStatus();//调用私有方法--恢复状态
      this._monitorSwitch();//调用私有方法--同步状态
  },




  //wx:if才能执行detached
  detached:function(event){
    // mMgr.stop();//重复生命周期------切换期刊的时候 音乐会停止
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onPlay:function(event){
      // 播放按钮的切换
      //如果音乐是未播放的状态 那么就播放音乐
      if(!this.data.playing){
        this.setData({
          playing: true,
        })
        mMgr.src = this.properties.src
      }else{//如果是播放状态 点击就暂停
        this.setData({
          playing: false,
        })
        mMgr.pause()
      }
    },
    //私有方法--切换音乐期刊的私有方法
    _recoverStatus:function(){
      //当所有的页面都没有音乐播放的时候,
      if(mMgr.paused){
        this.setData({
          playing:false,  //都处于没有播放的状态
        })
        return  //停止
      }
      //如果当前播放的音乐和当前页面相对应
      //当前播放的音乐地址   mMgr.src  等于当前页面播放的音乐
      if(mMgr.src== this.properties.src){
        this.setData({
          playing: true, //那就是处于播放的状态
        })
      }
    },
    //私有方法--外部播放开关状态和组件播放状态同步
    _monitorSwitch:function(){
      //点击播放 触发
      mMgr.onPlay((res)=>{
        this._recoverStatus()
      })
      //点击暂停 触发
      mMgr.onPause((res) => {
        this._recoverStatus()
      })
      //关掉外部开关的打叉  触发
      mMgr.onStop((res)=>{
        this._recoverStatus()
      })
      //音乐播放完成后 状态改变  
      mMgr.onEnded((res)=>{
        this._recoverStatus()  
      })
    }
  }

})

应用到page页面中:

<v-music  wx:if="{{classic.type==200}}" 
            src="{{classic.url}}" 
            img="{{classic.image}}" 
            content="{{classic.content}}"/>

代码的讲解都写在注释里,欢迎交流!