JavaScript-歌词展示与音乐同步
目录
一、歌词数据
1、歌词加载
2、把歌词解析为JS对象
3、把搜集好的歌词信息，展示到页面上
4、整体代码
二、歌词与音乐同步
1、歌词和音乐展示
2、歌词和音乐同步，当前行高亮，随播放滚动
三、最终代码
一、歌词数据
1、歌词加载
我的歌词格式
使用ajax加载歌词
$.ajax({
type: "get",
url: "http://m.kuwo.cn/newh5/singles/songinfoandlrc?musicId=440613&httpsStatus=1",
success: function(result) {
//JSON格式的字符串，反序列化成一个JavaScript对象
lrc = JSON.parse(result);
console.log(lrc);//打印
}
});
2、把歌词解析为JS对象
var oLRC = {
offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
ms: [] //歌词数组{t:时间,c:歌词}
};
function createLrcObj(lrc) {
var lrc = lrc.data.lrclist;//获取到歌词集合部分，lrclist
for(var k in lrc) { //遍历lrc 对象的每个key/value对,k为key
oLRC.ms.push({ //把歌曲信息放入oLRC中
t: lrc[k].time,
c: lrc[k].lineLyric
});
}
//console.log(oLRC);
}
oLRC.ms.sort(function (a, b) {//按时间顺序排序
return a.t-b.t;
});
3、把搜集好的歌词信息，展示到页面上
在页面定义一个div，用于展示
歌词遍历，加工成标签，展示到页面
function showLRC() {
var s="";
for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表
s+='
}
document.getElementById("lyric").innerHTML = s;
}
4、整体代码
效果展示：
二、歌词与音乐同步
1、歌词和音乐展示
body中主代码
css 样式
页面整体效果：
2、歌词和音乐同步，当前行高亮，随播放滚动
/* 播放音乐时让当前行高亮显示并向上滚动 */
var lineNo = 0; //当前行
var C_pos = 3; //C位
var offset = -20; //滚动距离（应等于行高）
var audio = document.getElementById("bfq"); //播放器
var ul = document.getElementById("lyric"); //歌词容器列表
//高亮显示歌词当前行及文字滚动控制，行号为lineNo
function lineHigh() {
var lis = ul.getElementsByTagName("li"); //歌词数组
if(lineNo > 0) {
lis[lineNo - 1].removeAttribute("class"); //去掉上一行的高亮样式
}
lis[lineNo].className = "lineHigh"; //高亮显示当前行
//文字滚动
if(lineNo > C_pos) {
ul.style.transform = "translateY(" + (lineNo - C_pos) * offset + "px)"; //整体向上滚动一行高度
}
}
//滚回到开头，用于播放结束时
function goback() {
document.querySelector("#lyric .lineHigh").removeAttribute("class");
ul.style.transform = "translateY(0)";
lineNo = 0;
}
//监听播放器的timeupdate事件，实现文字与音频播放同步(正常播放 )
audio.ontimeupdate = function() {
if(lineNo == oLRC.ms.length)
return;
var curTime = audio.currentTime; //播放器时间
if(parseFloat(oLRC.ms[lineNo].t) <= curTime) {
lineHigh(); //高亮当前行
lineNo++;
}
};
//跳跃播放时，歌词回滚到对应位置
audio.onseeked = function() {
var curTime = audio.currentTime; //播放器时间
for(i = 0; i < oLRC.ms.length; i++) {
if(oLRC.ms[i].t <= curTime) { /*播放器往回拖*/
if(i == oLRC.ms.length - 1) { //歌词已经播放完，只剩音乐，直接跳到最后一句歌词
lineNo = i; //需要高亮的行
break;
}
if(oLRC.ms[i + 1].t < curTime) { //如果前一个时间也小于播放器时间，就继续循环
continue;
} else {
if(i < C_pos * 2) { //当前行，小于最初展示的数据，直接跳到展示到开头
ul.style.transform = "translateY(0)";
}
lineNo = i; //需要高亮的行
break;
}
/*播放器往前拖*/
} else {
lineNo = i; //需要高亮的行
break;
}
}
document.querySelector("#lyric .lineHigh").removeAttribute("class"); //消除之前的高亮
lineHigh(); //高亮当前行
};
//监听播放器的ended事件，播放结束时回滚歌词
audio.onended = function() {
goback(); //回滚歌词
};
三、最终代码
效果展示：
感谢博主：fenglin247 【分享的知识】
参考资料：用JS实现歌词与播放音乐同步_fenglin247的博客-CSDN博客_js歌词