在线音乐播放器搭建

一、所涉及到的相关知识应用：

1.ajax 的使用；
2.DOM 的操作；
3.关于事件相关的一些操作；
4.音乐相关 api 的使用。

二、整理核心点逻辑，并对功能有一定认识：

1. 音乐从哪里来：

比如说歌曲的数据可以放在一个数组里面，直接去用；也可以通过从服务端去获取，使用 ajax 去获取数据。
获取到之后就得到一个音乐的数据，一个数组。我们得到的音乐数据应该包括：音乐标题、作者、背景图片、音乐地址。

2. 如何去操作播放音乐：

比如我有了一个音乐地址，应该如何去播放？音量我能不能控制？播放过程中播放了多少时间我能不能得到，能不能去暂停它？
这些即我们需要的功能，或者说技术关键点。

3. 如何把他们组装起来。

比如把音乐播放器放在页面上，然后结合事件，当点击按钮时再执行对应具体操作。

三、. 音乐播放器

1. API

1. audioObject

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

方法一：

方法二：

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

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

2. 事件

1. playing

当音乐开始播放，暂停后重新开始播放，设置 currenTime 后开始播放时触发：

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')
})

4. 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)
  }
}

5. volumechange

当音量改变时触发：

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

整合后的代码：

  
    
    
    
    
  
  
    
    

    

      

        

          

            
            
            
          
          

            
My Song
            
Jay
          
        
        

          

            

            

          
          
0:00
        
        

          
贰佰-玫瑰
          
IF YOU-Big Bang
        
      
    


    
  

预览效果