用JS解析LRC格式的歌词，实现歌词同步滚动效果
时间：12-08来源：作者：点击数：
用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]如此妖娆婀娜
</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);
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);
解析后的歌词位于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();
以上完毕。
以下是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>带歌词歌曲</title>
<script src="../js/jquery-1.12.4.js"></script>
<style>
/* https://blog.csdn.net/yzy_csdn/article/details/84536646 */
div{
width:340px;
height:50px;
margin:0 auto;
overflow:hidden;
}
ul{
transition-duration: 600ms;
}
ul, li{
list-style:none;
padding: 0;
margin: 0;
}
.aplayer-lrc-contents li.on{
color: #0e90d2;
}
.aplayer-lrc-contents li p{
overflow: hidden;
text-overflow: ellipsis;
height: 16px;
line-height: 16px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
text-align: center;
margin-top: 0;
margin-bottom: 16px;
}
audio{
margin-top: 10px;
}
.aplayer-lrc:after,.aplayer-lrc:before {
position: absolute;
z-index: 1;
display: block;
overflow: hidden;
content: ' ';
width: 100%
}
.aplayer-lrc:before {
top: 25px;
height: 4%;
background: -webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));
background: linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )
}
/*.aplayer-lrc:after {*/
/*bottom: 0;*/
/*height: 33%;*/
/*background: -webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);*/
/*background: -webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));*/
/*background: linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);*/
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )*/
/*}*/
</style>
</head>
<body>
<div class="aplayer-lrc">
<ul id="lrclist" class="aplayer-lrc-contents" style="transform: translateY(0px);"><!-- 保证歌词在正中间 -->
</ul>
</div>
<audio id="audio" src="music/找一个字代替.mp3" controls="controls" autoplay></audio>
<script>
var lrc = "";
function getLRC() {
var ajax = new XMLHttpRequest();
ajax.open("GET", "lrc/找一个字代替.lrc");
ajax.onreadystatechange = function () {
// if (ajax.readyState === 4 && ajax.status === 200) {
// lrc = ajax.responseText;
// // document.getElementById("lyric1").innerHTML = lrc;
// createLrcObj(lrc);
// }
// if (ajax.readyState !== 4 && ajax.status === 404) {
// console.log(ajax.status);
// document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暂无歌词"+"</p></li>";
// // ul.innerHTML += "<li><p>"+"暂无歌词"+"</p></li>";//ul里填充歌词
// }
// 判断响应是否完成：XMLHttpRequest 对象的 readystate属性值为4的时候
if ( ajax.readyState === 4 ) {
//再判断是否可用 ：XMLHttpRequest 对象的 status 属性为值 200
if ( ajax.status === 200 ) {
lrc = ajax.responseText;
createLrcObj(lrc);
} else {
document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暂无歌词"+"</p></li>";
}
}
};
ajax.send(null);
}
getLRC();
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) {//遍历歌词数组
if (lrcs.hasOwnProperty(i)) {
lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
var t_lrc = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
var s_text = t_lrc.split(":");//分离:号前后的文字
if (isNaN(parseInt(s_text[0]))) { //不是数值，基本上是歌曲名、作者等信息
for (var j in oLRC) {
if (j !== "ms" && j === s_text[0].toLowerCase()) {
oLRC[j] = s_text[1];
}
}
} else { //是数值，基本上就是歌词时间点
var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
var start = 0;
for (var lrc_position in arr) {
if (arr.hasOwnProperty(lrc_position)) {
start += arr[lrc_position].length; //计算歌词位置
}
}
var content = lrcs[i].substring(start);//获取歌词内容
for (var k in arr) {
if (arr.hasOwnProperty(k)) {
var t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
var s = t.split(":");//分离:前后文字
oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
t: parseFloat(s[0].substr(0,2)) * 60 + parseFloat(s[1].substring(0,6)),//注意转换成number格式
// t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
c: content
});
}
}
}
}
}
oLRC.ms.sort(function (a, b) {//按时间顺序排序
return a.t - b.t;
});
// var lrc_result = "";
var lrcTime = [];//歌词对应的时间数组
var ul = $("#lrclist")[0];//获取ul
for (var n in oLRC.ms) {//遍历ms数组，把歌词加入列表
// lrc_result += '<li>' + oLRC.ms[n].c + '</li>';
// document.getElementById("lyric").innerHTML = lrc_result;
ul.innerHTML += "<li><p>"+oLRC.ms[n].c+"</p></li>";//ul里填充歌词
}
// console.log(oLRC.ms[0].t); // 时间00:00.231中的0.231
// console.log(oLRC.ms.length);
// for(var result in oLRC){ //查看解析结果
// // console.log(result,":",oLRC[result]);
// }
for(var x=0;x< oLRC.ms.length; x++){
lrcTime[x] = oLRC.ms[x].t;
}
lrcTime[oLRC.ms.length] = lrcTime[oLRC.ms.length-1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后一句
var $li = $("#lrclist>li");//获取所有li
var currentLine = 0;//当前播放到哪一句了
var currentTime;//当前播放的时间
var audio = document.getElementById("audio");
var ppxx;//保存ul的translateY值
audio.ontimeupdate = function() {//audio时间改变事件
currentTime = audio.currentTime;
for (j=currentLine, len=lrcTime.length; j<len; j++){ // len=50
if (currentTime<lrcTime[j+1] && currentTime>lrcTime[j]){
currentLine = j;
// ppxx = 250-(currentLine*32);
ppxx = -currentLine*32;
ul.style.transform = "translateY("+ppxx+"px)";
$li.get(currentLine-1).className="";
// console.log("on"+currentLine);
$li.get(currentLine).className="on";
break;
}
}
};
audio.onseeked = function() {//audio进度更改后事件
currentTime = audio.currentTime;
console.log(" off"+currentLine);
$li.get(currentLine).className="";
for (k=0, len=lrcTime.length; k<len; k++){
if (currentTime<lrcTime[k+1] && currentTime<lrcTime[k]){
currentLine = k;
break;
}
}
};
}
</script>
</body>
</html>
效果：
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号