HTML5 播放器

一.歌曲播放进度

currentTime() ：以秒为单位返回从开始播放到目前所花的时间，也可设置 currentTime 的值来跳转到特定位置；

duration：获取媒体文件的播放时长，以秒为单位，如果无法获取，则为 NaN；

歌曲进度：首先先设置一个定时器，分别获取这两个值，用当前播放的秒数除以歌曲总秒数，再乘以歌曲进度条的总宽度（px），就能算出歌曲进度条一秒钟可以走多少了。

歌曲进度调节：点击进度条的某个位置，歌曲跳转到响应位置，这个功能的实现是先获取到点击的位置距离进度条最左边的长度，接着获得这段距离在整个进度条的长度里所占的百分比，用这个百分比乘以歌曲的总长度，就能算出该给 currentTime 设置的值了。

二.歌曲时间显示

歌曲显示：在计算歌曲进度的定时器内，不断发送歌曲的播放时间和总时间，左边的时间为歌曲的播放时间，也就是 currentTime 的值，右边的时间用总时间减去 currentTime ，并将它们转换为我们需要的格式即可

三.音量的调节

volume：在0.0到1.0间设置音量值,或查询当前音量值；

音量调节：这个功能实现起来很简单，把 volume 的值设为 0.0，就静音了。在控件上调节音量的原理和也歌曲的进度条一样，判断点击位置距离第一个相对元素 Y 轴上最顶端的位置，然后再进一步计算出具体的数值，注意数值的格式，别超过1，并且小数点后只有1位。

四、播放列表与播放方式

把整个歌曲文件的信息都写在 json 文件里，获取并生成播放列表。当播放歌曲时，系统会生成当前播放歌曲的引索值（例如：1,2，表示第二张专辑的第三首歌，这个很重要，歌曲切换都是基于这个引索值的），当要播放下一曲时，系统会根据当前是什么播放方式（列表循环，单曲循环，随机播放，顺序播放），生成新的引索值，然后通知播放器，下一首该怎么播放，是随机，还是循环，还是播放结束

五、同步显示歌词

1.ajax获取歌词文件（lrc文件）。

2.用正则分别去过滤出歌词和歌词前面对应的时间，存入数组。

3.将歌词的时间和内容遍历存入 HTML。

4.每秒都去判断一下现在歌曲播放的时间，如果和临时数据 data-timeline 里的值一样，就滚动。