<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>歌词同步</title>
<style>
body{
background:url("Img/起风了.jpg")centerno-repeat;
background-size:60%100%;
}
*{
margin:0auto;
padding:0;
}
.play{
color:#01e5ff;
font-size:24px;
}
.overPlay{
font-size:inherit;
color:#fff;
}
#p_lrc{
position:absolute;
padding-top:0px;
left:28%;
top:300px;
width:50%;
transition:top.5s;
margin:0auto;
}
.p_DisLrc{
overflow:hidden;
color:#b1abab;
width:70%;
height:600px;
position:relative;
margin:0auto;
}
#audio{
width:100%;
}
.p_audio{
width:50%;
margin:0auto;
}
.p_but{
position:absolute;
font-size:26px;
font-weight:900;
top:40%;
right:0%;
}
.p_butp{
cursor:pointer;
}
</style>
<linkhref="CSS/iconfont.css"rel="stylesheet"/>
</head>
<body>
<pid="p_1"style="display:none;">
</p>
<!--歌词显示界面-->
<pclass="p_DisLrc">
<pid="p_lrc">
<pid="lrc_row1"></p>
</p>
<!--用于调整歌词位置-->
<pclass="p_but">
<ponmousedown="time=setInterval(btn_down,0)"onmouseup="clearInterval
(time)"><iclass="iconfonticon-top"></i></p>
<ponmousedown="time=setInterval(btn_top,0)"onmouseup="clearInterval
(time)"><iclass="iconfonticon-down"></i></p>
</p>
</p>
<!--播放器控件-->
<pclass="p_audio">
<audioid="audio"controls="controls"autoplay="autoplay">
<sourcesrc="audio/起风了.mp3"type="audio/mpeg">
</audio>
</p>
<scriptsrc="JavaScript/jquery-3.3.1.js"></script>
<script>
varaudio=document.getElementById("audio");
varplay=$("#lrc_row1");
//将歌词添加到p中
$(document).ready(function(){
//加载歌词
$('#p_1').load("LRC/qifengle.lrc");
//获取所有歌词
setTimeout(function(){
varlrcArr=$("#p_1").text().split('\n');
for(vari=4;i<lrcArr.length;i++){
varp=document.createElement("p");
//空白歌词不进行加载
if(lrcArr[i].substring(10)!=""){
p.innerText=lrcArr[i].substring(10);
$("#p_lrc").append(p);
}
}
},200)
})
functionlrcDisplay(){
//获取播放进度(转换的格式为:00:00)
varminute=parseInt(audio.currentTime/60);//分钟
minute=minute==0?"00":(minute+"").length<2?"0"+minute:minute;
//获取秒数
varsecond=(parseInt(audio.currentTime))%60;
second=second==0?"00":(second+"").length<2?"0"+second:second;
//正则表达匹配歌词
varregex=newRegExp('\\['+(minute+":"+second)+'.+\\].+\n');
vartext=regex.exec($("#p_1").text());
if(text!=null){
varstr1=newString($(play).next().text());
varstr2=newString(text[0].substring(10));
if(str1.trim()==str2.trim()){
//歌词颜色变色
$(play).attr("class","overPlay");
play=$(play).next();
$(play).attr("class","play");
//歌词滚动(自动)
vartop=parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top",-1*((-1*top)+22)+"px");
}
}
}
setInterval(lrcDisplay,500);
//歌词滚动(手动)
vartime=null;
functionbtn_top(){
vartop=parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top",-1*((-1*top)+100)+"px");
}
functionbtn_down(){
vartop=parseInt($("#p_lrc").css("top"));
if(top<=0)
$("#p_lrc").css("top",-1*((-1*top)-100)+"px");
}
//调整歌词位置的函数
functionbtn_top(){
vartop=parseInt($("#p_lrc").css("top"));
$("#p_lrc").css("top",-1*((-1*top)+30)+"px");
}
/*
1.歌词文件不能是默认编码(记事本文件和lrc文件默认为ANSI编码)只需要改为UTF-8或
者GB2312,否则乱码
2.歌曲因为没有算毫秒差距,可能出现细微误差
3.因为网页同源策略的原因,外部直接打开html文件只能用firefox访问,
不能进行跨域访问,如果不使用文件读取可以在任意地方打开.
4.因为ajax识别原因,会把空格当做分割内容,即歌词文件名不能有空格
5.因为js对文件操作以及ajax请求存在诸多默认限制,若以类似方法在winfromasp等中很
多问题都会得到解决.
6.setTimeout()和setInterval()，在浏览器窗口非激活的状态下会停止工作或者以极慢的
速度工作。目前我已知就IE不会有这种问题。
*/
</script>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55112.shtml
