前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >民谣歌词基本格式_歌词创作

民谣歌词基本格式_歌词创作

作者头像
全栈程序员站长
发布2022-11-01 14:26:10
6690
发布2022-11-01 14:26:10
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

用JS解析LRC格式的歌词

1、把歌词载入。

方法一:直接把歌词粘贴到一个textarea文本域中,然后把它设置为隐藏。

代码语言:javascript
复制
<!-- 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把歌词读出来:

代码语言:javascript
复制
<script>
var lrc = document.getElementById("lrc_content").innerHTML;
</script>

方法二:用Ajax把后台的lrc文件载入。

代码语言:javascript
复制
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对象

代码如下:

代码语言:javascript
复制
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、把解析后的歌词呈现在页面上

定义一个列表标签:

代码语言:javascript
复制
<ul id="lyric"></ul>

用JS把歌词写到标签里面:

代码语言:javascript
复制
function showLRC() { 

var s="";
for(var i in oLRC.ms){ 
//遍历ms数组,把歌词加入列表
s+='<li>'+oLRC.ms[i].c+'</li>';
}
document.getElementById("lyric").innerHTML = s;
}
showLRC();

好了,解析后的歌词就可以用在歌曲播放页面上,用来在播放歌曲时呈现相应歌词了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/204274.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 用JS解析LRC格式的歌词
    • 1、把歌词载入。
      • 2、把LRC歌词解析为JS对象
        • 3、把解析后的歌词呈现在页面上
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档