js实现音乐播放器一

#音乐API
##1. audioObject


创建或者获取的audio对象，可通过以下两种方式得到
```
方法1:


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


var audioObject = new Audio('http://cloud.hunger-valley.com/music/玫瑰.mp3')
```
##2. audioObject.play()


开始播放


##3. audioObject.pause()


暂停播放


##4. audioObject.autoPlay


设置或者获取自动播放状态
```
audioObject.autoPlay = true  //设置为自动播放，下次更换 audioObject.src 后会自动播放音乐
audioObject.autoPlay = false //设置不自动播放
console.log(audioObject.autoPlay)
```
##5.audioObject.src


设置或者获取音乐地址
```
audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
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


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


#事件
##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')
}
```


-----------------
  
- HTMLElement. hidden 是一个 Boolean
类型，如果想要隐藏文档，值设置为 true，否则值设置为
false
这是完全不同于使用 CSS 属性 display来控制一个元素的可见性 。  hidden 属性应用于所有的展现模式，并且不应该用来隐藏用户直接访问的内容。


- getComputedStyle 获取元素样式----- 
var element = document.querySelector(element)
getComputedStyle(element).width === xxxpx   parseInt将字符串转为数字


- element.style 设置element的css的属性（eg:element.style.width = 111px）
- e.offsetX 当前鼠标在element上的横坐标坐标
- e.offsetY当前鼠标在element上的纵坐标坐标


- 111 + ''  = '111'      将数字装换为字符串




----