实现一个简单音乐播放器

作的一个简单的半成品播放器

1、需求分析

一、写静态页面
二、经过getMusicList函数用Ajax获取歌曲数据列表musiclist
三、经过loadMusic函数实现歌曲的播放功能
四、根据获取的歌曲数据来设置歌名、做者和背景图片
五、设置进度条随歌曲进度而实时变动，经过给audio对象绑定ontimeupdate事件来实现
六、设置歌曲时间随歌曲进度而实时更新，经过给audio对象绑定ontimeupdate或者setimeInval来实现
七、设置暂停键的功能
八、设置下一首的功能
九、设置上一首的功能
十、设置歌曲播放完成后，自动播放下一首的功能
十一、设置点击进度条切换歌曲进度的功能

2、解析对象

currentIndex 歌曲的当前下标
audio 当前歌曲对象
MusicList 歌曲数据对象
musicObj 当前歌曲对象 loadMusic函数传递的参数

3、前提知识（audio对象的属性）

一、audioObject

建立或者获取的audio对象，可经过如下两种方式获得

方法1:

<audio id="music" src="http://cloud.hunger-valley.co...;>你的浏览器不支持喔！</audio>
<script>
var audioObject = document.querySelector('#music')
</script>
方法2

var audioObject = new Audio('http://cloud.hunger-valley.co...')

二、audioObject.play()

开始播放

三、audioObject.pause()

暂停播放

四、audioObject.autoPlay

设置或者获取自动播放状态

audioObject.autoPlay = true //设置为自动播放，下次更换 audioObject.src 后会自动播放音乐
audioObject.autoPlay = false //设置不自动播放
console.log(audioObject.autoPlay)

五、audioObject.src

设置或者获取音乐地址

audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)

六、audioObject.volume

设置或者获取音量，最大值为1，0为静音

audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)

七、audioObject.loop

设置或者获取循环状态

audioObject.loop = true
console.log(audioObject.loop)

八、audioObject.duration

获取音乐长度，单位为秒

console.log(audioObject.duration)

九、 audioObject.currentTime

设置或者获取播放时间

console.log(audioObject.currentTime)

十、 audioObject.ended

判断音乐是否播放完毕，只读属性

十一、audio.paused

表示音频对象是否处于暂停状态，能够用来设置暂停键

4、前提知识（audio对象的事件）

一、playing

当音乐开始播放，暂停后从新开始播放，设置currentTime后开始播放时触发

audioObject.addEventListener('playing', function(){
console.log('playing')
})

二、pause

当音乐暂停时和结束时触发

audioObject.addEventListener('pause', function(){
console.log('pause')
})

三、ended

当音乐结束时触发

audioObject.addEventListener('ended', function(){
console.log('ended')
})

三、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)

}
}

四、volumechange

当音量改变时触发

audioObject.onvolumechange = function(){
  console.log('volumechange')
}

5、遇到的坑

一、设置progress-now的宽度随着播放时间变化而变化

我写成的事这样

audio.ontimeupdate=function(){
        $('.progress-now').style.width=(this.currentTime/this.duration)*(getComputedStyle($('.bar')).width)
    }

实际上应该写成百分比就能够了

audio.ontimeupdate=function(e){
$('.progress-now').style.width = (this.currentTime/this.duration)*100 + '%'}

二、两种方式设置歌曲时间随进度变化

1）设置ontimeupdate来设置，每秒触发4-66次，时间变化不均匀

audio.ontimeupdate=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.onplay=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.onpause=function(){
        clearInterval(clock)
    }

注意:不能写成 var clock，clock必须是全局变量，没办法传递参数到clearInterval(clock),会报如下错

三、作宽度相除，须要加上parseInt将字符串转换成数值

否则输出奇怪的数值

$('.musicbox .bar').onclick=function(e){
         var percent=e.offsetX/ parseInt(getComputedStyle(this).width)
         audio.currentTime= audio.duration*percent
         //不要忘记了parseInt，把宽度转换为数值
     }

四、下一首的下标实现增长循环

currentIndex = (++currentIndex)%MusicList.length

五、上一首的下标实现自减循环

currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length

六、GitHub不支持http协议

GitHub是https协议的，我在代码里面写了http协议，就报错了，须要所有改为https。

七、须要把引入js文件的代码放在最后，否则会报错

Uncaught TypeError: Cannot set property 'onclick' of null。
缘由是加载到onclick这个代码的时候，发现dom结构尚未加载好，因此要把引入js文件的代码放在html的最后

八、引入js文件的路径错误

本地测试没有问题，可是上传github后出现了引入js错误，发现是路径错误，须要加上./表示相对于当前的文件夹中的js和css

6、预览连接

https://0612bamboo.github.io/...