yinyue/pages/index/index.js

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/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)  
}
Page({

  data: {
    item: 0,
    tab: 0,
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),

    playlist: [{
      id:1,
      title:'祝你生日快乐',
      singer:'小丽',
      src:'http://127.0.0.1:3000/1.mp3',
      coverImgUrl:'/images/cover.jpg'
    },
    {
      id:2,
      title:'劳动最光荣',
      singer:'小朋',
      src:'http://127.0.0.1:3000/2.mp3',
      coverImgUrl:'/images/cover.jpg'
    },
    {
      id:3,
      title:'龙的传人',
      singer:'小华',
      src:'http://127.0.0.1:3000/3.mp3',
      coverImgUrl:'/images/cover.jpg'
    },
    {
      id:4,
      title:'小星星',
      singer:'小红',
      src:'http://127.0.0.1:3000/4.mp3',
      coverImgUrl:'/images/cover.jpg'
    }],
    state:'running',
    playIndex: 0,
    play:{
      currentTime:'00:00',
      duration:'00:00',
      percent:0,
      title:'',
      singer:'',
      coverImgUrl:'/images/cover.jpg',
    }
  },
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    const { nickName } = this.data.userInfo
    this.setData({
      "userInfo.avatarUrl": avatarUrl,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  onInputChange(e) {
    const nickName = e.detail.value
    const { avatarUrl } = this.data.userInfo
    this.setData({
      "userInfo.nickName": nickName,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item
    })
  },
  changeTab: function (e) {
    this.setData({
      tab: e.detail.current
    })
  },
  audioBam:null,
  onReady: function () {
    this.audioBam = wx.getBackgroundAudioManager()
    this.setMusic(0)
    this.audioBam.onError(() => {
      console.log('播放失败：'+ this.audioBam.src)
    })
    this.audioBam.onEnded(()=>{
      this.next()
    })
    var updateTime = 0
    this.audioBam.onTimeUpdate(()=>{
      var currentTime = parseInt(this.audioBam.currentTime)
      if(!this.sliderChangeLock && currentTime !==updateTime){
        updateTime = currentTime
        this.setData({
          'play.duration':formatTime(this.audioBam.duration || 0),
          'play.currentTime':formatTime(currentTime),
          'play.percent': currentTime / this.audioBam.duration * 100
        })
      }
    })
  },
  setMusic: function (index){
    var music = this.data.playlist[index]
    this.audioBam.src = music.src
    this.audioBam.title = music.title
    this.setData({
      playIndex:index,
      'play.title':music.title,
      'play.singer':music.singer,
      'play.coverImgUrl':music.coverImgUrl,
      'play.currentTime':'00.00',
      'play.duration':'00.00',
      'play.percent':0,
      state:'running'
    })
  },
  play: function (){
    this.audioBam.play()
    this.setData({
      state:'running'
    })
  },
  pause: function () {
    this.audioBam.pause()
    this.setData({
      state:'pause'
    })
  },
  next: function () {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
  },
  sliderChangeLock:false,
  sliderChanging :function (e) {
    var second = e.detail.value*this.audioBam.duration/100
    this.sliderChangeLock =true
    this.setData({
      'play.currentTime':formatTime(second),
    })
    
  },
  sliderChange:function (e) {
    var second =e.detail.value*this.audioBam.duration/100
    this.audioBam.seek(second)
    setTimeout(()=>{
      this.sliderChangeLock = false
    },1000)
    
  }

})