用JS解析LRC格式的歌词
1、把歌词载入。
方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。
再用JS把歌词读出来：
方法二：用Ajax把后台的lrc文件载入。
var lrc = ""; function getLRC() { var ajax = new XMLHttpRequest(); ajax.open("GET", "media/沙漠骆驼 - 展展与罗罗.lrc"); ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { lrc = ajax.responseText; //console.log(lrc); createLrcObj(lrc); // 调用createLrcObj函数，并传入lrc参数 } }; ajax.send(null); } getLRC(); 2、把LRC歌词解析为JS对象
代码如下：
var oLRC = { ti: "", //歌曲名 ar: "", //演唱者 al: "", //专辑名 by: "", //歌词制作人 offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置 ms: [] //歌词数组{t:时间,c:歌词} }; function createLrcObj(lrc) { if(lrc.length==0) return; var lrcs = lrc.split('\n');//用回车拆分成数组 for(var i in lrcs) {//遍历歌词数组 lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格 var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容 var s = t.split(":");//分离:前后文字 if(isNaN(parseInt(s[0]))) { //不是数值 for (var i in oLRC) { if (i != "ms" && i == s[0].toLowerCase()) { oLRC[i] = s[1]; } } }else { //是数值 var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个 var start = 0; for(var k in arr){ start += arr[k].length; //计算歌词位置 } var content = lrcs[i].substring(start);//获取歌词内容 for (var k in arr){ var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容 var s = t.split(":");//分离:前后文字 oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组 t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3), c: content }); } } } oLRC.ms.sort(function (a, b) {//按时间顺序排序 return a.t-b.t; }); /* for(var i in oLRC){ //查看解析结果 console.log(i,":",oLRC[i]); }*/ } createLrcObj(lrc);3、把解析后的歌词呈现在页面上
定义一个列表标签：
用JS把歌词写到标签里面：
function showLRC() { var s=""; for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表 s+=''+oLRC.ms[i].c+' '; } document.getElementById("lyric").innerHTML = s; } showLRC(); 以上完毕。
以下是结合这个页面加工后的完整代码：https://blog.csdn.net/yzy_csdn/article/details/
带歌词歌曲
效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230179.html原文链接：https://javaforall.net
