lrc格式
用JS解析lrc格式的歌词
1、把歌词载入。
方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。
<!-- LRC歌词 -->
<textarea id="lrc_content" cols="30" style="display: none">[ti:沙漠骆驼]
[ar:展展与罗罗]
[al:沙漠骆驼]
[by:0]
[offset:0]
[00:00.59]沙漠骆驼 - 展展与罗罗
[00:02.97]词：展展与罗罗
[00:04.46]曲：展展与罗罗
[00:26.45]我要穿越这片沙漠
[00:28.51]找寻真的自我
[00:30.50]身边只有一匹骆驼陪我
[00:34.96]这片风儿吹过
[00:37.15]那片云儿飘过
[00:39.26]突然之间出现爱的小河
[00:43.63]我跨上沙漠之舟
[00:45.71]背上烟斗和沙漏
[00:47.92]手里还握着一壶烈酒
[00:52.35]漫长古道悠悠
[00:54.51]说不尽喜怒哀愁
[00:56.56]只有那骆驼奔忙依旧
[01:01.08][02:23.81][04:13.30]什么鬼魅传说
[01:03.12][02:25.94][04:15.20]什么魑魅魍魉妖魔
[01:05.43][02:28.30][04:17.47]只有那鹭鹰在幽幽的高歌
[01:09.81][02:32.61][04:21.83]漫天黄沙掠过
[01:11.90][02:35.04][04:23.90]走遍每个角落
[01:14.05][02:36.99][04:26.20]行走在无尽的苍茫星河
[01:18.69][02:41.50][04:30.60]白天黑夜交错
[01:20.80][02:43.56][04:32.65]如此妖娆婀娜
[01:22.85][02:45.85][04:35.01]蹉跎着岁月又蹉跎了自我
[01:27.20][02:50.16][04:39.25]前方迷途太多
[01:29.32][02:52.33][04:41.39]坚持才能洒脱
[01:31.56][02:54.46][04:43.58]走出黑暗就能逍遥又快活
[01:38.54]
[01:49.43]我寻找沙漠绿洲
[01:51.34]出现海市蜃楼
[01:53.44]我仿佛看到她在那里等候
[01:57.80]想起了她的温柔
[01:59.91]滚烫着我的胸口
[02:02.19]迷失在昨夜的那壶老酒
[02:06.42]我穿上大头皮鞋
[02:08.75]跨过凛冽荒野
[02:10.75]我仿佛穿越到另一个世界
[02:15.20]阿拉丁神灯要倾斜
[02:17.33]天堂地狱已然重叠
[02:19.51]突然之间飞来一只蝴蝶
[03:01.04]
[03:47.15]我已坠入在这神奇的国度
[03:51.28]驼铃相伴走向圣堂之路
[03:55.64]原谅我曾经恍惚陷入迷途
[03:59.80]遮住了眼眸
[04:01.80]湮没了意图
[04:04.02]怎能被这样征服
[04:48.19]梦里回到最初
[04:50.08]浪潮起起伏伏
[04:52.29]彷徨着未来又彷徨着孤独
[04:56.74]漫长人生旅途
[04:58.87]花开花落无数
[05:01.03]沸腾的时光怎能被荒芜
[05:05.76]清晨又到日暮
[05:07.48]天边飞鸟群逐
[05:09.79]摇曳着苍穹又描摹着黄土
[05:14.26]东方鱼肚白出
[05:16.53]烈日绽放吐露
[05:18.47]放下尘浮我已踏上归途
[05:25.04]</textarea>
再用JS把歌词读出来：
<script>
var lrc = document.getelementbyid("lrc_content").innerHTML;
</script>
方法二：用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);
}
};
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);
解析后的歌词位于oLRC对象的ms数组中：
oLRC.ms[i].t 是第i行歌词的时间，以秒计；
oLRC.ms[i].c 是第i行歌词。
3、把解析后的歌词呈现在页面上
定义一个列表标签：
<ul id="lyric"></ul>
用JS把歌词写到标签里面：
function showLRC() {
var s="";
for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表
s+='<li>'+oLRC.ms[i].c+'</li>';
}
document.getElementById("lyric").innerHTML = s;
}
showLRC();
好了，解析后的歌词就可以用在歌曲播放页面上，用来在播放歌曲时呈现相应歌词了。
相关阅读
在实际应用中，运营人员在编辑数据时不希望因不小心点击了浏览器的回退或刷新按钮导致花费了很长时间编辑的数据丢失。可以采用以
// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWi
最近在写一个页面，需要取时间段，没有后台支撑，前端根据时间段，实现hightcharts自动生成数据看我们前端直接用split这个属性，完美解决时
The old versions of JavaScript had no import, include, or require, so many different approaches to this problem have bee
目前一共建了7各表mainpost 主贴信息pm 短信存放路径prop道具信息retopiic 回帖信息systemset 系统设置topi