You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
3.3 KiB
144 lines
3.3 KiB
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
item: 0,
|
|
tab: 0,
|
|
// 播放列表数据
|
|
playlist: [{
|
|
id: 1,
|
|
title: '青藏高原',
|
|
singer: '韩红',
|
|
src: 'http://localhost:3000/1.mp3',
|
|
coverImgUrl: '/images/M5[0D{]L(M8CRAD`MUOJ$$1.png'
|
|
}, {
|
|
id: 2,
|
|
title: 'See You Again',
|
|
singer: 'Khalifa_Charlie Puth',
|
|
src: 'http://localhost:3000/2.mp3',
|
|
coverImgUrl: '/images/cover.jpg'
|
|
}, {
|
|
id: 3,
|
|
title: '情字最大',
|
|
singer: '平生青崖',
|
|
src: 'http://localhost:3000/3.mp3',
|
|
coverImgUrl: '/images/cover.jpg'
|
|
}, {
|
|
id: 4,
|
|
title: '半岛铁盒',
|
|
singer: '周杰伦',
|
|
src: 'http://localhost:3000/4.mp3',
|
|
coverImgUrl: '/images/]4$N_UNNP)RO6W`KWI`US5Y.png'
|
|
}],
|
|
state: 'paused',
|
|
playIndex: 0,
|
|
play: {
|
|
currentTime: '00:00',
|
|
duration: '00:00',
|
|
percent: 0,
|
|
title: '',
|
|
singer: '',
|
|
coverImgUrl: '/images/cover.jpg',
|
|
}
|
|
},
|
|
|
|
// 页面切换
|
|
changeItem: function(e) {
|
|
this.setData({
|
|
item: e.target.dataset.item,
|
|
})
|
|
},
|
|
// tab切换
|
|
changeTab: function(e) {
|
|
this.setData({
|
|
tab: e.detail.current
|
|
})
|
|
},
|
|
|
|
// 实现播放器播放功能
|
|
audioCtx: null,
|
|
onReady: function() {
|
|
this.audioCtx = wx.createInnerAudioContext()
|
|
// 默认选择第1曲
|
|
this.setMusic(0)
|
|
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
|
|
})
|
|
})
|
|
// 格式化时间
|
|
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)
|
|
}
|
|
},
|
|
// 音乐播放
|
|
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
|
|
})
|
|
},
|
|
|
|
// 播放按钮
|
|
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()
|
|
}
|
|
})
|
|
|