微信小程序音乐播放器

 

页面一

WXML:

<camera style="height: 300px;"></camera>

页面二

MUSIC.WXML:

<view class="tab">
  <view class="tab-item-{{i==0?'active':'default'}}" bindtap="changeItem" data-i="0">音乐推荐</view>
  <view class="tab-item-{{i==1?'active':'default'}}" bindtap="changeItem" data-i="1">播放器</view>
  <view class="tab-item-{{i==2?'active':'default'}}" bindtap="changeItem" data-i="2">播放列表</view>
</view>
<view class="content">
  <swiper current="{{i}}" bindchange="changeTap">
    <swiper-item>
      <include src="minfo.wxml"></include> 
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"></include>
    </swiper-item>
  </swiper>
</view>
<view class="player">
  <view>
    <image src="{{musiclist[m].poster}}" class="player-poster"></image>
  </view>
  <view class="player-info">
    <view>{{musiclist[m].title}}</view>
    <view>————{{musiclist[m].singer}}————</view>
  </view>
  <view class="player-controls">
    <image src="/pages/images/01.png" bindtap="changeItem" data-i="2"></image>
    <image wx:if="{{mstat=='pause'}}" src="/pages/images/02.png" bindtap="doPlay"></image>
    <image wx:if="{{mstat=='play'}}" src="/pages/images/02stop.png" bindtap="doPause"></image>
    <image src="/pages/images/03.png" bindtap="doNext"></image>
  </view>
</view>

MUSIC.WXSS:

/* pages/music/music.wxss */
page{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #17181a;
  color: #ddd;
}
.tab{
  display: flex; 
  line-height: 72rpx;
}
.tab-item-active{
  flex: 1;
  border-bottom: 1px solid #f00;
  text-align: center;
}
.tab-item-default{
  flex: 1;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.content{
  flex: 1;
}
.content>swiper{
  height: 100%;
}
.player{
  background-color: #222;
  height: 112rpx;
  border-top: 1px solid #333;
  display: flex;
  align-items: center;
}
.player-poster{
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 10rpx;
}
.player-controls>image{
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}
.player-info{
  flex: 1;
  font-size: 10pt;
  line-height: 45rpx;
  margin-left: 20rpx;
}
.player-info>view:last-child{
  color: #888;
}
.content-play-poster>image{
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  animation: rotateImage 10s linear infinite;
}
.container-play{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  text-align: center;
  font-size: 15pt;
}
@keyframes rotateImage{
  /*两个用from to ,多个用百分比*/
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.content-play-progress{
  display: flex;
  margin: 0 25rpx;
  align-items: center;
}
.slider{
  flex: 1;
}

MUSIC.JS:

Page({
  data: {
    i:0,/*与前面的i不一样*/
    m:0,
    mstat:"pause",
    duration:"00:00",
    currenttime:"00:00",
    percent:0,
    musiclist:[
      { id:1,
        src:"https://music.163.com/song/media/outer/url?id=1942366869.mp3",
        title:"玫瑰少年",
        singer:"蔡依林",
        poster:"http://p2.music.126.net/daxjoCVOQYvyHdSBzQfFJQ==/109951167407824697.jpg?param=50y50",
      },{id:2,
        src:"https://music.163.com/song/media/outer/url?id=1474411443.mp3",
        title:"爱你",
        singer:"王心凌",
        poster:"http://p2.music.126.net/bnUJ88C0V-WonLIlZvJ4Fg==/109951167466341797.jpg?param=50y50",
      },{id:3,
        src:"https://music.163.com/song/media/outer/url?id=1330348068.mp3",
        title:"起风了",
        singer:"林俊杰",
        poster:"http://p2.music.126.net/uWetPGM5p_wQZ45lrNPvAg==/109951164850033532.jpg?param=50y50",
        
      }
    ]
  },
  changeTap:function(e){
    this.setData({i:e.detail.current})
  },
  changeItem:function(e){
    this.setData({i:e.target.dataset.i})
  },
  doPlay:function(){
    this.audioCtx.play()
    this.setData({mstat:"play"})
  },
  doPause:function(){
    this.audioCtx.pause()
    this.setData({mstat:"pause"})
  },
  doNext:function(){
    var index = this.data.m >= this.data.musiclist.length-1 ? 0 : this.data.m+1
    this.setData({m:index})
    this.audioCtx.src=this.data.musiclist[this.data.m].src
    if(this.data.mstat=="play"){
      this.doPlay()
    }
    this.setData({currenttime:"00:00",percent:0})
    this.audioCtx.seek(0)
  },
  onReady: function () {
    this.audioCtx=wx.createInnerAudioContext()
    this.audioCtx.src=this.data.musiclist[this.data.m].src
    this.audioCtx.pause()
    var that = this
    this.audioCtx.onTimeUpdate(function(){
      var cur=that.audioCtx.currentTime
      var dur=that.audioCtx.duration
      var per=cur/dur*100
      that.setData({currenttime:that.formatTime(cur),duration:that.formatTime(dur),percent:per})
    })
  },
  formatTime:function(time){
      var m = Math.floor(time/60)/*floor向下取整四舍五舍*/
      var s = Math.floor(time)%60/*Math.floor(time)去除毫秒*/
      return(m<10 ? '0'+m : m)+":"+(s<10 ? '0' + s:s)
  },
  changeTime:function(e){
    var newcur = Number(e.detail.value)/100 * this.audioCtx.duration
    this.audioCtx.seek(newcur)
    this.setData({currenttime:this.formatTime(newcur)})
  },

PLAY.WXML:

<view class="container-play">
  <view class="content-play-info">
    <view>{{musiclist[m].title}}</view>
    <view>{{musiclist[m].singer}}</view>
  </view>
  <view class="content-play-poster">
    <image src="{{musiclist[m].poster}}"></image>
  </view>
  <view class="content-play-progress">
    <view>{{currenttime}}</view>
    <view class="slider">
      <slider block-size="12" value="{{percent}}" bindchange="changeTime">
      </slider>
    </view>
    <view>{{duration}}</view>
  </view>
</view>

PLAYLIST.WXML:

c

MINFO.WXML:

a