我的博客里面还有关于视频播放器的，感兴趣的小伙伴可以来看看。

 这是利用audio做的一个歌词随音乐而动的html页面。

这个简单的音频播放器是用ajax请求本地服务器的lrc文件，lrc文件就是歌词文件。

把歌词放在盒子里面，通过audio的timeupdata事件监听音乐的播放，并获取当前播放的时间currentTime，然后通过当前播放的时间于歌词的时间匹配，匹配到的话就把歌词盒子往上移动。

    这里让当前的时间和之前做的时间数组匹配用了一个方法，先声明一个全局变量，并赋值为0，作为记录播放到第几局的一个变量，同时也是时间数组的下标，因为时间数组里面，下边就是第几句，对应的值就是第几句播放时的时间，当现在的时间大于时间数组的时间的时候，让该句歌词颜色变红并且字体变大，然后m++，然后让歌词盒子向上移动一个li的高度。这里歌词盒子有个初始top，这样做为了让当前的歌词显示在屏幕的中间。

   当前歌词变完色的同时，上一句歌词还要变回原样，所以在上面那一步操作之前，还要把当前m对应的歌词样式变回原样，还要注意的是这个m要大于一。

解决循环（loop）为true的时候，onended这个事件是不能用的问题

   还有就是，当循环（loop）为true的时候，onended这个事件是不能用的，所以我加了一个if语句，来判断这首歌是否播放完。做法就是，声明一个pretime的变量，赋初值为0，意思就是当前timeupdata时间监听的currentTime的上一个currentTime，比较preTime和currentTime，正常情况下currentTime是肯定大于preTime的，但当第一次播放结束时currentTime是小于preTime的，所以就用这个来判断音乐的循环播放。

如果在子盒子上加个margin-top，这个属性会作用到父盒子上，解决方法就是给子盒子加个边框

获取音频的currentTime属性，其实得到的是一个字符串，在比较的时候不知道这个问题，每次在判断是否播放完的时候的第十秒就出错了，然后把它转换成数字就行了。