1、找到音乐文件用<audio>标签嵌入到HTML中
2、找到音乐的lrc歌词，复制在HTML中，可设为隐藏
3、[00:01.00]刀郎-西海情歌 类似于这样的，我用的是split()；分割，找到每一句的播放时间
4、调用audio.currentTime（歌曲当前播放时间）与歌词时间进行匹配
音乐播放器 [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]回不到我们的从前
《西海情歌》
$().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 " + arr[i].slice(-1)+" "; time[i] = arr[i].slice(-2,-1).toString(); p[i] = time[i].split(":"); } $("#right_bottom").html(htm); var j = 0; for(;j
@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{width: 680px;height: 480px;position: relative;margin:80px auto auto;border-radius: 8px;overflow:hidden;box-shadow:0 0 20px #12171A; }#music #left{width: 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{width: 180px;height: 410px;background-color: #12171A;float: right;background: rgba(0,0,0,0.9);}#music #right #right_top{width: 100%;height: 156px;padding-top: 20px;}#music #right #right_top #right_img{margin: 0px auto;width: 130px;border-radius: 50%;overflow:hidden;}#music #right #right_top #right_fond{text-align: center;color: white;width: 100%;font-family: 华文新魏;line-height: 20px;}#music #right #right_bottom{background:rgba(0,0,0,1.0);width: 100%;height: 234px;overflow-y:scroll;color: #fff;font-family: 华文新魏;text-align: center;line-height: 25px}#music #bottom{width: 100%;height: 70px;float: left;background-color:#12171A ;background:rgba(0,0,0,0.8);}#music #bottom #btn{width: 190px;height: 50px;margin: 10px auto;text-align: center;}#music #bottom #btn .play{height: 80%;width:40px;margin: 5px auto; }#music #bottom #btn .s{width: 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;}