HTML5音乐播放进阶：教你如何实现歌词同步

你知道吗？在HTML5里，播放音乐可不是那么简单！我们要用audio标签来做这件事。虽然大家可能都只把这个标签放在网页上，但是如果加上歌词同步，就能让网页变得更有趣！所以今天我要教大家怎么用HTML5的audio标签来玩转歌词同步，希望能帮到你们。

插入audio标签

想弄歌词同步，先给网页加个audio标签。别忘了去掉loop=’loop’属性，否则会影响你靠ended属性检测音乐播没播完。再加上autoplay=’autoplay’能让网页打开就能听歌，还有controls=’controls’能看到音乐控制器。搞定这些，网页就能愉快地放歌！

下载和格式化歌词文件

想把歌词放到网页上，得先下点lrc格式的歌词文件，然后再把它们搞成适合的样子。开始时音乐里可没有歌词，所以得处理好才能往二维数组里插进去。结果就是歌曲和歌词能对应起来，而且在网页上也能同步展示！

XML/HTML Code复制内容到剪贴板

编写获取和同步歌词的函数

咱们要想顺畅用歌的歌词，就得先给它格式化下。要让歌词跟歌曲走，网页上得有个函数能把歌词搞到手，而且还得和音乐合拍儿。这样，只要更新现在的放歌时间，再跟歌词里的对上号，就能看着歌词跟着唱。

创建音乐列表并实现点击播放功能

除了可以歌词同步，咱们还能在这个页面加个音乐列表。只要你点下列表里的歌名，就能选首想听的歌，然后立刻就开始播放了。这样一来，换歌也轻松多了，还能看到选中的那首歌的歌词！

优化用户体验

搞定了上面那些功能后，咱们还能让用户体验更好！比如，在页面上加个进度条，让你知道现在播到哪儿了；再把音量调大调小，随心所欲听歌；或者设计个好看又好用的播放器样式，让你用得舒心；甚至加点CSS动画，让页面变得更炫酷。这样一来，用户肯定更喜欢在这儿听歌看歌词！

兼容性处理与调试技巧

XML/HTML Code复制内容到剪贴板
//歌词同步部分    
function parseLyric(text) {    
//将文本分隔成一行一行，存入数组    
var lines = text.split('n'),    
//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]    
pattern = /[d{2}:d{2}.d{2}]/g,    
//保存最终结果的数组    
result = [];    
//去掉不含时间的行    
while (!pattern.test(lines[0])) {    
lineslines = lines.slice(1);    
};    
//上面用'n'生成生成数组时，结果中最后一个为空元素，这里将去掉    
lines[lines.length - 1].length === 0 && lines.pop();    
lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {    
//提取出时间[xx:xx.xx]    
var time = v.match(pattern),    
//提取歌词    
vvalue = v.replace(pattern, '');    
//因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔    
time.forEach(function(v1, i1, a1) {    
//去掉时间里的中括号得到xx:xx.xx    
var t = v1.slice(1, -1).split(':');    
//将结果压入最终数组    
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);    
});    
});    
//最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词    
result.sort(function(a, b) {    
return a[0] - b[0];    
});    
return result;    
}

开发过程里要留意，因为不同浏览器对于HTML5标签的支持度不一样，可能会引发兼容性的问题！所以编写代码时得严格按照HTML5规范来，同时别忘了做好兼容性测试和调试。了解一些调试技巧以及应对常见问题的策略，就能更轻松地搞定兼容性问题，保证页面稳定运行~

扩展功能与应用场景

XML/HTML Code复制内容到剪贴板
function fn(sgname){    
$.get('music/'+sgname+'.lrc',function(data){    
var str=parseLyric(data);    
for(var i=0,li;i<str.length;i++){    
li=$('
'+str[i][1]+'
');    
$('#gc ul').append(li);    
}    
$('#aud')[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发    
for (var i = 0, l = str.length; i  str[i][0]) {    
//显示到页面    
$('#gc ul').css('top',-i*40+200+'px'); //让歌词向上移动    
$('#gc ul li').css('color','#fff');    
$('#gc ul li:nth-child('+(i+1)+')').css('color','red'); //高亮显示当前播放的哪一句歌词    
}    
}    
if(this.ended){ //判断当前播放的音乐是否播放完毕    
var songslen=$('.songs_list li').length;    
for(var i= 0,val;i<songslen;i++){    
val=$('.songs_list li:nth-child('+(i+1)+')').text();    
if(val==sgname){    
i=(i==(songslen-1))?1:i+2;    
sgname=$('.songs_list li:nth-child('+i+')').text(); //音乐播放完毕之后切换下一首音乐    
$('#gc ul').empty(); //清空歌词    
$('#aud').attr('src','music/'+sgname+'.mp3');    
fn(sgname);    
return;    
}    
}    
}    
};    
});    
} fn($('.songs_list li:nth-child(1)').text());

除基本功能以外，不妨想想能不能加些别的功能和环境来使网页更有趣。比如利用后台数据库帮大家存喜欢的歌，或者开个评论区，方便大家聊天；再比如搞个自动关机，这样大家就不用担心忘了关了。这些新功能既能提高网页品质，又能照顾到各种需求。

看了上面的教程和实操，是不是觉得你已经学会怎么用HTML5的audio标签来做歌词同步了？希望这个小文章能帮到你们！无论是想学还是想用的小伙伴都别忘了发挥你们的想象力，去探索前端开发的无限可能！