微信小程序> 小程序学习音乐播放器组件的编写

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

浏览量:1591 时间: 来源:张芝山

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

首先看下组件的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/music@tag.png"/>  <!-- 对应文字 -->  <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/player@pause.png",    playSrc:"images/player@play.png",  },  //播放音乐时候,进行切换,如果切换的页面不是这个音乐的页面,那么按钮是播放的按钮,  //如果切换的页面是播放音乐对应的页面,按钮是显示暂停的按钮  //该方法也只能通过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}}"/>

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎