实现简易音乐播放器-PartTwo

实现进度条

  使用一个

设置样式来作为进度条的导轨；在其内部使用两个

分别设置样式来作为当前播放时间所占的进度条和其头部的拖拽点。
  通过音乐媒体文件的 currentTime 和 duration 来计算出当前时间占音乐总时间的百分比(currentTime / duration)；结合导轨的宽度(Element.clientWidth)即可算出当前播放时间所占进度条的宽度(X轴)和其头部拖拽点的位置(X轴)。将上述操作设置在定时器中来定时执行以实现播放时进度条的增长。
  当有点击时间使播放进度发生改变时，通过点击事件中鼠标的与浏览器左边界的距离 e.clientX 和 进度条导轨与浏览器左边界的距离 Element.getBoundingClientRect().left 来计算出点击位置在进度条上的距离；根据此来设置当前播放时间、所占进度条的宽度(X轴)和其头部拖拽点的位置(X轴)。
  通过 mousedown 、 mousemove 和 mouseup 事件来响应鼠标按键点击，鼠标移动(拖拽)，鼠标按键抬起的动作；在 mousemove 事件中通过移动事件中鼠标的与浏览器左边界的距离 e.clientX 和 进度条导轨与浏览器左边界的距离 Element.getBoundingClientRect().left 来计算出当前移动到的位置；根据位置比例计算出对应的播放时间，在 mouseup 事件中将该时间设置为音乐媒体文件的 currentTime 来实现播放进度的跳转。
  

    
    
    
    
    


    
    

        

        

        

    
    

        00:00
        

            

            

        
        00:00
    
    
    

  对样式进行细微的调整，如对 playingBar 的 margin-left 设置少4个像素(其宽度的一半)使其中心对应鼠标点击或拖拽时的目标点。