// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
current: 0,
// 播放列表数据
playlist: [{
id: 1,
title: '钢琴协奏曲',
singer: '肖邦',
src: 'http://localhost:3000/1.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 2,
title: '奏鸣曲',
singer: '莫扎特',
src: 'http://localhost:3000/2.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 3,
title: '欢乐颂',
singer: '贝多芬',
src: 'http://localhost:3000/1.mp3',
coverImgUrl: '/images/cover.jpg'
}, {
id: 4,
title: '爱之梦',
singer: '李斯特',
src: 'http://localhost:3000/2.mp3',
coverImgUrl: '/images/cover.jpg'
}],
state: 'paused',
playIndex: 0,
play: {
currentTime: '00:00',
duration: '00:00',
percent: 0,
title: '',
singer: '',
coverImgUrl: '/images/cover.jpg',
}
},
// 页面切换
changeItem: function(e) {
this.setData({
current: e.target.dataset.item,
})
},
// 实现播放器播放功能
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()
}
})
在课堂音乐小程序的基础上，继续完善音乐推荐页面推荐歌曲功能。具体要实现的功能：用户点击某一首推荐音乐，该音乐添加到播放列表里，并开始播放。请详细描述实现思路，对关键代码进行解释，附上可以体现该功能的截图，并提交完整代码压缩包。
