1、找到音乐文件用<audio>标签嵌入到HTML中
2、找到音乐的lrc歌词，复制在HTML中，可设为隐藏
3、[00:01.00]刀郎-西海情歌 类似于这样的，我用的是split()；分割，找到每一句的播放时间
4、调用audio.currentTime（歌曲当前播放时间）与歌词时间进行匹配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="css/index.css"></link> </head> <body> <audio id="xxqq" src="music/xhqq.mp3"></audio> <div id="music"> <div id="left"> <div id="lyrics" hidden="hidden"> [00:01.00]刀郎-西海情歌 [00:54.66]自你离开以后 [01:00.70]从此就丢了温柔 [01:07.31]等待在这雪山路漫长 [01:12.75]听寒风呼啸依旧 [01:20.21]一眼望不到边 [01:25.97]风似刀割我的脸 [01:32.75]等不到西海天际蔚蓝 [01:37.93]无言着苍茫的高原 [01:44.97]还记得你答应过我 [01:48.89]不会让我把你找不见 [01:52.73]可你跟随那南归的候鸟飞得那么远 [01:59.09]爱像风筝断了线 [02:02.16]拉不住你许下的诺言 [02:08.62]我在苦苦等待雪山之巅温暖的春天 [02:14.83]等待高原冰雪融化之后归来的孤雁 [02:21.21]爱再难以续情缘 [02:24.32]回不到我们的从前 [02:42.15]一眼望不到边 [02:48.36]风似刀割我的脸 [02:54.38]等不到西海天际蔚蓝 [03:00.08]无言着苍茫的高原 [03:07.17]还记得你答应过我 [03:11.01]不会让我把你找不见 [03:14.83]可你跟随那南归的候鸟飞得那 [03:21.13]爱像风筝断了线 [03:24.26]拉不住你许下的诺言 [03:30.65]我在苦苦等待雪山之巅温暖的春天 [03:36.98]等待高原冰雪融化之后归来的孤雁 [03:43.25]爱再难以续情缘 [03:46.41]回不到我们的从前 [04:23.35]还记得你答应过我 [04:26.80]不会让我把你找不见 [04:30.66]可你跟随那南归的候鸟飞得那 [04:36.86]爱像风筝断了线 [04:40.05]拉不住你许下的诺言 [04:46.37]我在苦苦等待雪山之巅温暖的春天 [04:52.66]等待高原冰雪融化之后归来的孤雁 [04:59.07]爱再难以续情缘 [05:02.20]回不到我们的从前 </div> </div> <div id="right"> <div id="right_top"> <div id="right_img"><img alt="刀郎" src="images/dl.jpg"></div> <div id="right_fond"><span>《西海情歌》</span></div> </div> <div id="right_bottom"> </div> </div> <div id="bottom"> <div id="btn"> <input class="s" type="button" value="←" id="s"> <input class="play" type="button" value="▲" id="play"> <input class="s" type="button" value="→" id="next"> </div> </div> </div> </body> </html>
$().ready(function(){
var gbqq = document.getElementById("xxqq");
var t = new Array();
var sing = 0;
$("#play").click(function(){
var j = 1;
if(sing == 0){
gbqq.play();
setInterval(function(){
if(t[j] == parseInt(gbqq.currentTime)){
$("#col"+j+"").addClass("col");
j++;
}
},1000);
sing = 1;
$("#play").val("||");
}
else{
gbqq.pause();
sing = 0;
$("#play").val("▲");
}
})
var lyrics = $("#lyrics").html();
var lyString = lyrics.toString();
var lyStringSpl1 = lyString.split("[");
var arr = new Array();
var time = new Array();
var p = new Array();
var now = 0;
var i = 0;
var htm = "";
for(;i<lyStringSpl1.length;i++){
arr[i] = lyStringSpl1[i].split("]");
htm =htm + "<p id='col"+i+"'>" + arr[i].slice(-1)+"</p>";
time[i] = arr[i].slice(-2,-1).toString();
p[i] = time[i].split(":");
}
$("#right_bottom").html(htm);
var j = 0;
for(;j<lyStringSpl1.length;j++){
t[j] = parseInt(p[j].slice(-2,-1))*60 + parseInt(p[j].slice(-1).toString().split(".").slice(-2,-1));
}
})
@charset "UTF-8";
*{margin: 0;padding: 0}
body{background-image: url("../images/bg.jpg");background-repeat: no-repeat;background-attachment:fixed;
background-position: center;}
#music{ 680px;height: 480px;position: relative;margin:80px auto auto;border-radius: 8px;overflow:hidden;box-shadow:0 0 20px #12171A; }
#music #left{ 500px;height: 410px;float: left;background-repeat: no-repeat;text-align: center;background-color: #12171A;
background: rgba(0,0,0,0.7);}
#music #left img{margin-top:80px;}
#music #right{ 180px;height: 410px;background-color: #12171A;float: right;background: rgba(0,0,0,0.9);}
#music #right #right_top{ 100%;height: 156px;padding-top: 20px;}
#music #right #right_top #right_img{margin: 0px auto; 130px;border-radius: 50%;overflow:hidden;}
#music #right #right_top #right_fond{text-align: center;color: white; 100%;font-family: 华文新魏;line-height: 20px;}
#music #right #right_bottom{background:rgba(0,0,0,1.0); 100%;height: 234px;overflow-y:scroll;color: #fff;font-family: 华文新魏;text-align: center;line-height: 25px}
#music #bottom{ 100%;height: 70px;float: left;background-color:#12171A ;background:rgba(0,0,0,0.8);}
#music #bottom #btn{ 190px;height: 50px;margin: 10px auto;text-align: center;}
#music #bottom #btn .play{height: 80%;40px;margin: 5px auto; }
#music #bottom #btn .s{ 30px;height: 30px;}
#music #bottom #btn input {border-radius: 50px;border: 0 solid;cursor: pointer;outline: none;}
#right_bottom::-webkit-scrollbar{display: none;}
.col{color: red;}