audio实现歌词同步

网上已经可以找到和歌词同步的不少方法，但是刚刚接触H5的小白，也想写上一些自己歌词同步时一些想法。我由于只考虑前端，所以就没有涉及服务器的问题了，浏览器本身请求本地文件比较严格，会出现如下错误

所以你就需要修改浏览器的相关配置，这里奉上链接
http://www.w3dev.cn/article/20141031/file-protocol-config-chrome-support-ajax-request.aspx
首先呢，我先附上自己做的网站，因为自己比较喜欢看霹雳布袋戏，所以我就用霹雳布袋戏的歌曲测试啦（哈哈，扯远啦），附上图


好的，看完了效果图，哈，知道自己做的水水的，不喜勿喷。
那么首先我们就是要先使用标签

<audio id="musicAudio" controls="controls" style="width:800px;" class="audioCss">
            你的浏览器不兼容.
    </audio>

好的，使用了标签，那么现在我们就要开始导入歌单啦。
因为我想多复习下ajax，所以处理ajax的数据就比较多啦
首先是自动生成歌单，歌单文件名是music.xml内容如下

然后使用ajax处理数据，并且在网页上面生成歌单，同时给每个li加上点击事件，代码如下

$.ajax({
            type:"GET",
            url:"order/music.xml",
            success: function(order){
   
   
                var li = "";
                $(order).find("music").each(function(){
   
   
                    var title = $(this).find("title").text();
                    var id    = $(this).find("author").text();
                    li=li+"<li id='"+id+"' title='"+title+"' key='no' onclick='ajaxMusic(this)'>"+title+"</li>";
                });
                $("#musicOl").append(li);
                $("#musicOl li").each(function(){
   
   
                    $(this).mousemove(function(e){
   
   
                        if($(this).attr("key")!='yes')
                            $(this).css("color","black");
                    });
                    $(this).mouseout(function(e){