小程序 音频、音乐播放器(可以点击音乐列表进行播放)

在电脑工具测试会出现进度条跟音乐时长不动不显示的问题，请在真机测试真机上一点事没有

效果图

不多比比直接上代码

wxml代码

<!-- 音频列表 -->
  <scroll-view scroll-y style="height:100%">
    <view class="playlist-items" wx:for="{{playList}}" wx:key='id' bindtap="change" data-index="{{index}}">
      <image class="playlist-cover" src="{{item.coverImgUrl}}"></image>
      <view class="playlist-info">
        <view class="playlist-title">{{item.title}}</view>
        <view class="playlist-singer">{{item.singer}}</view>
      </view>
      <text class="playlist-control" wx:if="{{index == playIndex}}">正在播放</text>
    </view>
  </scroll-view>
  <!-- 音乐栏 -->
  <view class="player">
    <image class="cover-img" src="{{play.coverImgUrl}}"></image>
    <view class="play-info">
      <view class="play-title">{{play.title}}</view>
      <view class="play-singer">{{play.singer}}</view>
      <view class="content-play-progress">
        <text>{{play.currentTime}}</text>
        <view>
        <!-- block-size进度球大小  value进度球位置   -->
          <slider block-size="12" value="{{play.percent}}" bindchange="sliderChange"/>
        </view>
        <text>{{play.duration}}</text>
      </view>
    </view>
    <view class="btns">
      <image src="/images/shang.png" bindtap="upper"></image>
      <image src="{{isPlay?'/images/tz.png':'/images/bf.png'}}" bindtap="{{isPlay?'audioPause':'audioPlay'}}"></image>
      <image src="/images/xia.png" bindtap="next"></image>
    </view>
  </view>

css代码

/* 音乐播放栏样式 */
.player{
  position: fixed;
  background-color: rgb(75,187,163);
  width: 100%;
  height: 150rpx;
  border-top: 1rpx solid wheat;
  bottom: 116rpx;
}
.player{
  display: flex;
  align-items: center;
  border-top: 1px solid black;
}
.player .cover-img{
  width: 120rpx;
  height: 120rpx;
  border-radius: 9rpx;
  margin: 25rpx;
}
.btns{
  margin: 15rpx;
}
.btns image{
  width: 70rpx;
  height: 70rpx;
}
.play-info{
  flex: 1;
}
.play-info .play-title{
  color:#333;
}
.play-info .play-singer{
  color:rgb(140,143,114);
  font-size: small;
}
.content-play-progress{
  display: flex;
  align-items: center;
}
.content-play-progress view{
  flex: 1;
}


/* 音频播放列表 */
.playlist-items{
  height: 120rpx;
  display:flex;
  align-items: center;
}
.playlist-cover{
    height: 100rpx;
    width: 100rpx;
    margin: 20rpx;
}
.playlist-info{
  flex: 1;
}
.playlist-singer{
  color: #888;
  font-size: small;
}
.playlist-control{
  color: rgb(216, 137, 137);
}

js代码

data: {
    // item:0,
    // tab:0,
    playIndex:0,
    //播放列表
    playList:[
      {
        id:1,
        singer:'singerl',
        title:'测试',
        coverImgUrl:'http://y.qq.com/music/photo_new/T002R300x300M000001YH5ds3TSUeu_1.jpg?max_age=2592000',
        src:'http://dl.stream.qqmusic.qq.com/C400002hDSQ81EATXV.m4a?guid=7228430279&vkey=F250C75A3280AF477A21F09D08A153C1585D3E9929E4CA6DCFEAC1D3C9D2CAF023F5706F44665A1095A4E0218FBFCC77DCCA9D206DC66FBE&uin=&fromtag=120032',
      },
      {
        id:2,
        singer:'singerl2',
        title:'测试2',
        coverImgUrl:'http://y.qq.com/music/photo_new/T002R300x300M0000013I7FE2LrTVa_2.jpg?max_age=2592000',
        src:'http://dl.stream.qqmusic.qq.com/C400003TqqCb0yU8Xu.m4a?guid=6128283555&vkey=0A1DB11AE6B7949A17152BA8262CC70D8912E4E591EBFB2E1E7E3D04ADE77124DD0C1391C583A8F2000BFF988175309368CEBC12E39C46CC&uin=&fromtag=120032',
      },
    ],
    //音乐栏默认配置
    paly:{
      singer:'',//音乐副标题
      title:'测试',//音乐标题
      coverImgUrl:'',//音乐杂志
      percent:0,//进度球位置
      currentTime:"00:00",//音乐进度时间
      duration:"00:00",//音乐进度总时间
    },
},
/**
  * 生命周期函数--监听页面加载
*/
onLoad: function (options) {
      // InnerAudioContext 实例，可通过 wx.createInnerAudioContext 接口获取实例。注意，音频播放过程中，可能被系统中断，可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件来处理这种情况
      this.audio = wx.createInnerAudioContext()
      this.setMusic(0)//调用配置默认方法
      this.audio.onError(function(res){
        console.log('播放错误'+that.audio.src)
      })
      this.audio.onEnded(function(){
        that.next()
      })
      //音频时长
      this.audio.onTimeUpdate(function(){
        that.setData({
          'play.duration':formatTime(that.audio.duration),
          'play.currentTime':formatTime(that.audio.currentTime),
          'play.percent':that.audio.currentTime / that.audio.duration * 100,
        })
      })
      //处理音频时长
      function formatTime(time){
        var minute = Math.floor(time / 60) % 60
        var second = Math.floor(time) % 60
        return ((minute > 10 ? minute : '0' + minute) + ":" + (second > 10 ? second : '0' + second))
      }
},
//设置音乐栏目默认值
setMusic:function(index){
  var music = this.data.playList[index]
  this.audio.src = music.src
  this.setData({
      'playIndex':index,
      'play.singer':music.singer,
      'play.title':music.title,
      'play.coverImgUrl':music.coverImgUrl,
      'play.percent':0,
      'play.currentTime':"00:00",
      'play.duration':"00:00",
  })
  //播放音乐   这里可以让音乐开始自己播放
  // this.audio.play()
},
//音频播放
audioPlay () {
  this.audio.onPlay(function(){
    console.log('播放成功')
  })
  this.audio.onError(function(res){
    console.log(res)
  })
  this.setData({
    'isPlay':true
  })
  this.audio.play()

},
音频播放停止
audioPause () {
  this.setData({
    'isPlay':false
  })
  this.audio.pause()

},
上一首   
upper(){
  var index = this.data.playIndex <= this.data.playList.length + 1 ? 0 : this.data.playIndex - 1
  this.setMusic(index)
  //如果在播放的话上一首也要自动播放    暂停状态下上一首仍然暂停
  if(this.data.isPlay){
    this.setData({'isPlay':true})
    this.audio.play()
  }
},
下一首    
next(){
  var index = this.data.playIndex >= this.data.playList.length - 1 ? 0 : this.data.playIndex + 1
  this.setMusic(index)
  //如果在播放的话下一首也要自动播放    暂停状态下下一首仍然暂停
  // if(this.data.isPlay){
    this.setData({'isPlay':true})
    this.audio.play()
  // }
},
//拖拽、自动变换进度球位置
sliderChange(e){
  var minute = this.audio.duration * e.detail.value / 100
  this.audio.seek(minute)
},
//点击播放列表播放音乐
change:function(e){
  var that =this
  this.setMusic(e.currentTarget.dataset.index)
  this.setData({'isPlay':true})
  that.audio.play();
},