music/pages/index/index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    item:0,
    tab:0,
    state:'paused',
    playIndex:0,
    play:{
      currenTime:'00:00',
      duration:'00:00',
      percent:0,
      title:'',
      singer:'',
      coverImgUrl:'/image/cover.jpg',
    },
    playlist:[{
      id:1,title:'钢琴协奏曲',singer:'肖邦',
      src:'http://localhost:3000/1.mp3',coverImgUrl:'/image/cover.jpg'
    },{
      id:2,title:'奏鸣曲',singer:'莫扎特',
      src:'http://localhost:3000/1.mp3',coverImgUrl:'/image/cover.jpg'
    },{
      id:3,title:'欢乐颂',singer:'贝多芬',
      src:'http://localhost:3000/2.mp3',coverImgUrl:'/image/cover.jpg'
    },{
      id:4,title:'爱之梦',singer:'李斯特',
      src:'h',coverImgUrl:'/image/cover.jpg'
    }]
  },
  changeItem:function(e){
    this.setData({
      item:e.target.dataset.item
    })
  },
  changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  audioCtx:null,
  onReady:function() {
      this.audioCtx=wx.createInnerAudioContext()
      var that=this
      this.audioCtx.onError(function(){
        console.log('播放失败:'+that.audioCtx.src)
      })
      this.audioCtx.onEnded(function(){
        that.next()
      })
      this.audioCtx.onPlay(function(){})
      this.audioCtx.onTimeUpdate(function(){
        that.setData({
          'play.duration':formatTime(that.audioCtx.duration),
          'play.currentTime':formatTime(that.audioCtx.currentTime),
          'play.percent':that.audioCtx.currentTime /
          that.audioCtx.duration*100
        })
      })
      this.setMusic(0)
      function formatTime(time){
        var minute=Math.floor(time/60)%60;
        var second=Math.floor(time)%60
        return(minute<10?'0'+minute:minute)+';'+(second<10?'0'+second:second)
      }
    },
    sliderChange:function(e){
    var second=e.detail.value*this.audioCtx.duration/100
    this.audioCtx.seek(second)
    },
  setMusic:function(index){
    var music=this.data.playlist[index]
    this.audioCtx.src=music.src
    this.setData({
      playIndex:index,
      'play.title':music.title,
      'play.singer':music.singer,
      'play.coverImgUrl':music.coverImgUrl,
      'play.currentTime':'00:00',
      'play.duration':0
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  
  play:function(){
    this.audioCtx.play()
    this.setData({state:'running'})
  },
  pause:function(){
    this.audioCtx.pause()
    this.setData({state:'paused'})
  },
  next:function(){
    var index=this.data.playIndex >= this.data.playlist.length - 1 ?
              0:this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state==='running'){
      this.play()
    }
  },
  change:function(e){
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})