一、歌词数据

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;//获取到歌词集合部分，lrclistfor(var k in lrc) { //遍历lrc 对象的每个key/value对,k为keyoLRC.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，用于展示

<ul id="lyric"></ul>

歌词遍历，加工成标签，展示到页面

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

4、整体代码

<html><head><meta charset="UTF-8"><title>歌词展示</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$.ajax({type: "get",url: "http://m.kuwo.cn/newh5/singles/songinfoandlrc?musicId=440613&httpsStatus=1",success: function(result) {//JSON格式的字符串，反序列化成一个JavaScript对象var lrc = JSON.parse(result);//获取歌词部分createLrcObj(lrc)//展示歌词showLRC()}});var oLRC = {offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置ms: [] //歌词数组{t:时间,c:歌词}};function createLrcObj(lrc) {var lrc = lrc.data.lrclist; //获取到歌词集合部分//console.log(lrc);for(var k in lrc) { //遍历packJson 对象的每个key/value对,k为key//console.log(lrc[k].lineLyric +" "+lrc[k].time )oLRC.ms.push({t: lrc[k].time,c: lrc[k].lineLyric});}console.log(oLRC);}function showLRC() {var s = "";for(var i in oLRC.ms) { //遍历ms数组，把歌词加入列表s += '<li>' + oLRC.ms[i].c + '</li>';}document.getElementById("lyric").innerHTML = s;}</script></head><body><ul id="lyric"></ul></body></html>

效果展示：

二、歌词与音乐同步

1、歌词和音乐展示

body中主代码

<div class="lyric_area"><!-- 歌词 --><ul id="lyric"></ul>
</div>
<!-- 音频 -->
<audio id="bfq" src="http://win.web.ra01.sycdn.kuwo.cn/db5492f42d356582d32ea37f4757f7a4/63352e7d/resource/n3/320/74/27/4113470514.mp3" controls preload="auto" style="position: fixed;left: 42%;top: 22%;" /><br/>

css 样式

<style>/*歌词样式*/.lyric_area {/*歌词区域高度*/height: 150px;/*隐藏超出部分*/overflow: hidden;margin-top: 15px;text-align: center;}/*歌词列表*/#lyric {/*行高，这个值要用在歌词滚动距离上*/line-height: 20px;/*滚动速度*/transition-duration: 600ms;}#lyric .lineHigh {/*高亮行*/color: #17e883;}#lyric li {list-style-type: none;/* 去除实心圆 */}
</style>

页面整体效果：

2、歌词和音乐同步，当前行高亮，随播放滚动

 /* 播放音乐时让当前行高亮显示并向上滚动 */var lineNo = 0; //当前行var C_pos = 3; //C位 var offset = -20; //滚动距离（应等于行高）var audio = document.getElementById("bfq"); //播放器var ul = document.getElementById("lyric"); //歌词容器列表//高亮显示歌词当前行及文字滚动控制，行号为lineNofunction 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(); //回滚歌词};

三、最终代码

<html><head><meta charset="UTF-8"><title>歌词展示</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$.ajax({type: "get",url: "http://m.kuwo.cn/newh5/singles/songinfoandlrc?musicId=440613&httpsStatus=1",success: function(result) {//JSON格式的字符串，反序列化成一个JavaScript对象var lrc = JSON.parse(result);//获取歌词部分createLrcObj(lrc);//展示歌词showLRC();}});var oLRC = {offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置ms: [] //歌词数组{t:时间,c:歌词}};function createLrcObj(lrc) {var lrc = lrc.data.lrclist; //获取到歌词集合部分//console.log(lrc);for(var k in lrc) { //遍历packJson 对象的每个key/value对,k为key//console.log(lrc[k].lineLyric +" "+lrc[k].time )oLRC.ms.push({t: lrc[k].time,c: lrc[k].lineLyric});}//console.log(oLRC);}function showLRC() {var s = "";for(var i in oLRC.ms) { //遍历ms数组，把歌词加入列表s += '<li>' + oLRC.ms[i].c + '</li>';}document.getElementById("lyric").innerHTML = s;}</script><style>/*歌词样式*/.lyric_area {/*歌词区域高度*/height: 150px;/*隐藏超出部分*/overflow: hidden;margin-top: 15px;text-align: center;}/*歌词列表*/#lyric {/*行高，这个值要用在歌词滚动距离上*/line-height: 20px;/*滚动速度*/transition-duration: 600ms;}#lyric .lineHigh {/*高亮行*/color: #17e883;}#lyric li {list-style-type: none;/* 去除实心圆 */}</style></head><body><div class="lyric_area"><!-- 歌词 --><ul id="lyric"></ul></div><!-- 音频 --><audio id="bfq" src="http://win.web.ra01.sycdn.kuwo.cn/db5492f42d356582d32ea37f4757f7a4/63352e7d/resource/n3/320/74/27/4113470514.mp3" controls preload="auto" style="position: fixed;left: 42%;top: 22%;" /><br/></body><script>/* 播放音乐时让当前行高亮显示并向上滚动 */var lineNo = 0; //当前行var C_pos = 3; //C位 var offset = -20; //滚动距离（应等于行高）var audio = document.getElementById("bfq"); //播放器var ul = document.getElementById("lyric"); //歌词容器列表//高亮显示歌词当前行及文字滚动控制，行号为lineNofunction 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(); //回滚歌词};</script></html>

效果展示：

感谢博主：fenglin247 【分享的知识】

参考资料：用JS实现歌词与播放音乐同步_fenglin247的博客-CSDN博客_js歌词

JavaScript-歌词展示与音乐同步相关推荐

用JS实现歌词与播放音乐同步
用JS实现歌词与播放音乐同步第一步:把歌词解析成JS对象参看我的上一篇文章:用JS解析LRC格式的歌词解析后的歌词写到页面的一个列表中,效果如下: 主要HTML代码: <!-- 播放器 - ...
python播放音乐同步歌词_使用Python下载歌词并嵌入歌曲文件中的实现代码
使用python扫描本地音乐并下载歌词这次这个真的是干货哦,昨晚弄了半晚上,,,,从8点吃完饭就开始写,一直到了快12点才弄好,,,新手,伤不起呀.... 先简单的说下吧,百度提供了一个音乐搜索的a ...
JavaScript CSS jQuery 网页音乐播放器
目录效果展示总结 index.html index.css index.js 效果展示总结音乐播放的功能基本实现了播放器最小化充分利用了弹性盒子,很好用专辑图像的旋转是使用CSS实现的,暂 ...
无线音乐同步管理器：Airfoil for mac
Airfoil for mac是Mac平台上一款优秀的音乐播放器和音频传输工具!airfoil mac可以将Spotify等音乐服务或Pandora等基于网络的音频无线发送到各种设备,包括Apple ...
JavaScript中的异步、同步
要理解JS中的异步.同步,需要先了解JS代码的执行过程和Event Loop. JavaScript代码的执行过程程序需要执行的操作都会被放入Call Stack(A LIFO (Last In, ...
mac 平台显示歌词最好的音乐播放器软件 —— Vox + LyricsX
2018年10月更新: Vox + LyricsX 滚动歌词,显示歌词面板完美支持 iTunes, Spotify, Vox, 可随播放器启动自动搜索歌词.下载歌词(~/Music/LyricsX ...
python播放音乐同步歌词范晓萱_范晓萱同步的歌词
你是不是在找范玮琪的这首同步的歌词?下面是学习啦!小编帮你整理了这首歌词的相关的资料希望对你有用! 同步的歌词同步-(电影<陪安东尼度过漫长岁月>主题曲)-范晓萱相隔两地的时空默契对 ...
python音乐同步歌词_使用python扫描本地音乐并下载歌词
这次这个真的是干货哦,昨晚弄了半晚上,从8点吃完饭就开始写,一直到了快12点才弄好,新手伤不起呀. 先简单的说下吧,百度提供了一个音乐搜索的api,你想百度请求类似于 http://box.zhang ...
python播放音乐同步歌词_linux 下 python 调用 mplayer 解析歌词同步播放显示
标签: 加载同目录同名歌词同步显示 #!/usr/bin/python # -*- coding: utf-8 -*- import sys, os, time, subprocess, re, ch ...

JavaScript-歌词展示与音乐同步

一、歌词数据

1、歌词加载

2、把歌词解析为JS对象

3、把搜集好的歌词信息，展示到页面上

4、整体代码

二、歌词与音乐同步

1、歌词和音乐展示

2、歌词和音乐同步，当前行高亮，随播放滚动

三、最终代码

JavaScript-歌词展示与音乐同步相关推荐

最新文章

热门文章