做的一个简单的半成品播放器
一、需求分析
1、写静态页面
2、通过getMusicList函数用Ajax获取歌曲数据列表musiclist
3、通过loadMusic函数实现歌曲的播放功能
4、根据获取的歌曲数据来设置歌名、作者和背景图片
5、设置进度条随歌曲进度而实时变更，通过给audio对象绑定ontimeupdate事件来实现
6、设置歌曲时间随歌曲进度而实时更新，通过给audio对象绑定ontimeupdate或者setimeInval来实现
7、设置暂停键的功能
8、设置下一首的功能
9、设置上一首的功能
10、设置歌曲播放完成后，自动播放下一首的功能
11、设置点击进度条切换歌曲进度的功能
二、解析对象
currentIndex 歌曲的当前下标
audio 当前歌曲对象
MusicList 歌曲数据对象
musicObj 当前歌曲对象 loadMusic函数传递的参数
三、前提知识(audio对象的属性)
1、audioObject
创建或者获取的audio对象，可通过以下两种方式得到
方法1:
console.log(audioObject.src)
6、audioObject.volume
设置或者获取音量，最大值为1，0为静音
audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)
7、audioObject.loop
设置或者获取循环状态
audioObject.loop = true
console.log(audioObject.loop)
8、audioObject.duration
获取音乐长度，单位为秒
console.log(audioObject.duration)
9、 audioObject.currentTime
设置或者获取播放时间
console.log(audioObject.currentTime)
10、 audioObject.ended
判断音乐是否播放完毕，只读属性
11、audio.paused
表示音频对象是否处于暂停状态，可以用来设置暂停键
四、前提知识(audio对象的事件)
1、playing
当音乐开始播放，暂停后重新开始播放，设置currentTime后开始播放时触发
audioObject.addEventListener('playing', function(){
console.log('playing')
})
2、pause
当音乐暂停时和结束时触发
audioObject.addEventListener('pause', function(){
console.log('pause')
})
3、ended
当音乐结束时触发
audioObject.addEventListener('ended', function(){
console.log('ended')
})
3、timeupdate
当currentTime更新时会触发timeupdate事件,这个事件的触发频率由系统决定，但是会保证每秒触发4-66次(前提是每次事件处理不会超过250ms.
//如下代码设置 每1秒左右执行一次
audioObject.shouldUpdate = true
audioObject.ontimeupdate = function(){
var _this = this
if(_this.shouldUpdate) {
//do something
console.log('update')
_this.shouldUpdate = false
setTimeout(function(){
_this.shouldUpdate = true
}, 1000)
}
}
4、volumechange
当音量改变时触发
audioObject.onvolumechange = function(){
console.log('volumechange')
}
五、遇到的坑
1、设置progress-now的宽度随着播放时间变化而变化
我写成的事这样
audio.οntimeupdate=function(){
$('.progress-now').style.width=(this.currentTime/this.duration)*(getComputedStyle($('.bar')).width)
}
实际上应该写成百分比就可以了
audio.οntimeupdate=function(e){
$('.progress-now').style.width = (this.currentTime/this.duration)*100 + '%'}
2、两种方式设置歌曲时间随进度变化
1)设置ontimeupdate来设置，每秒触发4-66次，时间变化不均匀
audio.οntimeupdate=function(e){
$('.progress-now').style.width = (this.currentTime/this.duration)*100 + '%'
var min=Math.floor(this.currentTime/60)
var sec= Math.floor(this.currentTime %60)>9?(Math.floor(this.currentTime%60)):('0'+Math.floor(this.currentTime%60))
$('.time').innerText=''+min+':'+sec
}
2)通过setInterval来设置，每秒一次，时间变化均匀
注意：这个函数不能写成this.currentTime %60，不然输出会变成NaN。要写成audio.currentTime。我猜想应该是和set intervalthis的值会发生改变。之后填坑
audio.οnplay=function(){
clock =setInterval(function(){
var min=Math.floor(audio.currentTime/60)
var sec= Math.floor(audio.currentTime %60)>9?(Math.floor(audio.currentTime%60)):('0'+Math.floor(audio.currentTime%60))
$('.time').innerText=''+min+':'+sec
})
}
audio.οnpause=function(){
clearInterval(clock)
}
注意:不能写成 var clock，clock必须是全局变量，没办法传递参数到clearInterval(clock),会报以下错
3、做宽度相除，需要加上parseInt将字符串转换成数值
不然输出奇怪的数值
$('.musicbox .bar').οnclick=function(e){
var percent=e.offsetX/ parseInt(getComputedStyle(this).width)
audio.currentTime= audio.duration*percent
//不要忘记了parseInt，把宽度转换为数值
}
4、下一首的下标实现增加循环
currentIndex = (++currentIndex)%MusicList.length
5、上一首的下标实现自减循环
currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length
6、GitHub不支持http协议
GitHub是https协议的，我在代码里面写了http协议，就报错了，需要全部改成https。
7、需要把引入js文件的代码放在最后，不然会报错
Uncaught TypeError: Cannot set property 'onclick' of null。
原因是加载到onclick这个代码的时候，发现dom结构还没有加载好，所以要把引入js文件的代码放在html的最后
8、引入js文件的路径错误
本地测试没有问题，但是上传github后出现了引入js错误，发现是路径错误，需要加上./表示相对于当前的文件夹中的js和css
六、预览链接
