微信小程序开发音乐播放器

const { formatTime } = require("../../utils/util") Page({ data: { item: 0, tab:0, state: 'paused', playIndex: 0, play: { currentTime: '00:00', duration: '00:00', percent: 0, title: ' ', singer: ' ', coverImgUrl: '/pages/index/images/cover1.jpg', }, playlist: [{ id: 1, title: '玫瑰少年', singer: '蔡依林', src: '/pages/index/music/蔡依林 _ 五月天 - 玫瑰少年 (Live).mp3', coverImgUrl: '/pages/index/images/li01.jpg' },{ id: 2, title: '大鱼', singer: '周深', src: '/pages/index/music/周深 - 大鱼.mp3', coverImgUrl: '/pages/index/images/li02.jpg' },{ id: 3, title: '缺氧', singer: '许佳豪', src: '/pages/index/music/烟(许佳豪) - 缺氧 (Live).mp3', coverImgUrl: '/pages/index/images/li03.jpg' },{ id: 4, title: '消愁', singer: '薛之谦', src: '/pages/index/music/薛之谦 _ 毛不易 - 消愁 (Live).mp3', coverImgUrl: '/pages/index/images/li04.jpg' }], }, changeItem: function(e) { this.setData({ item: e.target.dataset.item }) }, changeTab: function(e) { this.setData({ tab: e.detail.current }) }, 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': '00:00', 'play.percent': 0 }) }, // udioCtx: null, // onReady: function(){ // this.audioCtx = wx.createInnerAudioContext() // this.setMusic(0) // }, 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) } }, 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() } }, sliderChange: function(e){ var second = e.detail.value*this.audioCtx.duration/100 this.audioCtx.seek(second) }, change:function(e){ this.setMusic(e.currentTarget.dataset.index) this.play() } })