网页中如何实现音乐和歌词同步_Java_Jsp_Jdk_eclipse_tomcat

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Java_Jsp_Jdk_eclipse_tomcat

网页中如何实现音乐和歌词同步

夜鹰教程网来源：www.yyjcw.com 日期：2016-12-8 6:08:36

音乐和歌词同步的网页特效代码，经测试，不支持firefox，希望有高手改一下。

<html><head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>音乐歌词同步测试</title>
<style>

</style>
<script language="javascript">
var scrollt=0;
var tflag=0;//存放时间和歌词的数组的下标
var lytext=new Array();//放存汉字的歌词
var lytime=new Array();//存放时间
var delay=10;
var line=0;
var scrollh=0;
function getLy()//取得歌词
{
var ly="[00:00]21个人.[00:10]制作:小黑.[00:20]歌手:游鸿明.[02:02][00:24]没想到是你.[00:29]看着，想着，说着失去.[02:12][00:35]想结束关系，又觉得可惜.[02:20][00:44]你红着双眼，试着，做着，想着改变. [02:30][00:54]但激情沉淀，结局更明显.[02:41][01:04]我看过温柔凋萎.[02:46][01:09]也听过诺言. [02:48][01:11]似玻璃破碎.[02:50]][01:14]我看过情人憔悴.[02:56][01:19]就好像刺猬为分离流泪. [03:00][01:23]伤心人负心人.[03:03][01:26]天下人痴情人.[03:05][01:28]只要是被伤心的人喝一杯. [01:33]自已人爱别人.[01:36]什么人狠心人.[01:38]不要再等,喝醉的灵魂.[03:46][01:45]music……. [02:06]谈著想著说著失去.[03:10]自已人爱别人.[03:12]什么人狠心人.[03:15]不要再等.[03:18]喝醉的灵魂. [03:56][03:23]多情人无心人.[03:59][03:25]无情人多伤人.[04:01][03:28]只要是被伤心的人喝一杯. [04:06][03:32]有心人无缘人.[04:08][03:34]有缘人断肠人.[04:11][03:37]何必再问新人换旧人. [04:20]music again……."
return ly;
}
function show(t)//显示歌词
{
var div1=document.getElementById("lyr");//取得层
document.getElementById("lyr").innerHTML=" ";//每次调用清空以前的一次
if(t<lytime[lytime.length-1])//先舍弃数组的最后一个
{
for(var k=0;k<lytext.length;k++)
{
if(lytime[k]<=t&&t<lytime[k+1])
{
scrollh=k*25;//让当前的滚动条的顶部改变一行的高度
div1.innerHTML+="<font color=red style=font-weight:bold>"+lytext[k]+"</font><br>";
}
else if(t<lytime[lytime.length-1])//数组的最后一个要舍弃
div1.innerHTML+=lytext[k]+"<br>";
}
}
else//加上数组的最后一个
{
for(var j=0;j<lytext.length-1;j++)
div1.innerHTML+=lytext[j]+"<br>";
div1.innerHTML+="<font color=red style=font-weight:bold>"+lytext[lytext.length-1]+"</font><br>";
}
}
function scrollBar()//设置滚动条的滚动
{
if(document.getElementById("lyr").scrollTop<=scrollh)
document.getElementById("lyr").scrollTop+=1;
if(document.getElementById("lyr").scrollTop>=scrollh+50)
document.getElementById("lyr").scrollTop-=1;
window.setTimeout("scrollBar()",delay);
}
function getReady()//在显示歌词前做好准备工作
{
var ly=getLy();//得到歌词
//alert(ly);
var arrly=ly.split(".");//转化成数组
for(var i=0;i<arrly.length;i++)
sToArray(arrly[i]);
sortAr();
/*for(var j=0;j<lytext.length;j++)
{
document.getElementById("lyr").innerHTML+=lytime[j]+lytext[j]+"<br>";
}*/
scrollBar();
}
function sToArray(str)//解析如“[02:02][00:24]没想到是你”的字符串前放入数组
{
var left=0;//"["的个数
var leftAr=new Array();
for(var k=0;k<str.length;k++)
{
if(str.charAt(k)=="[")
{
leftAr[left]=k;
left++;
}
}
if(left!=0)
{
for(var i=0;i<leftAr.length;i++)
{
lytext[tflag]=str.substring(str.lastIndexOf("]")+1);//放歌词
lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));//放时间
tflag++;
}
}
//alert(str.substring(leftAr[0]+1,leftAr[0]+6));
}
function sortAr()//按时间重新排序时间和歌词的数组
{
var temp=null;
var temp1=null;
for(var k=0;k<lytime.length;k++)
{
for(var j=0;j<lytime.length-k;j++)
{
if(lytime[j]>lytime[j+1])
{
temp=lytime[j];
temp1=lytext[j];
lytime[j]=lytime[j+1];
lytext[j]=lytext[j+1];
lytime[j+1]=temp;
lytext[j+1]=temp1;
}
}
}
}
function conSeconds(t)//把形如：01：25的时间转化成秒；
{
var m=t.substring(0,t.indexOf(":"));
var s=t.substring(t.indexOf(":")+1);
s=parseInt(s.replace(/\b(0+)/gi,""));
if(isNaN(s))
s=0;
var totalt=parseInt(m)*60+s;
//alert(parseInt(s.replace(/\b(0+)/gi,"")));
if(isNaN(totalt))
return 0;
return totalt;
}
function getSeconds()//得到当前播放器播放位置的时间
{
var t=getPosition();
t=t.toString();//数字转换成字符串
var s=t.substring(0,t.lastIndexOf("."));//得到当前的秒
//alert(s);
return s;
}
function getPosition()//返回当前播放的时间位置
{
var mm=document.getElementById("MediaPlayer1");
//var mmt=;
//alert(mmt);
return mm.CurrentPosition;
}
function mPlay()//开始播放
{
var ms=parseInt(getSeconds());
if(isNaN(ms))
show(0);
else
show(ms);
window.setTimeout("mPlay()",100)
}
window.setTimeout("mPlay()",100)
function test()//测试使用，
{
alert(lytime[lytime.length-1]);
}
</script>
</head>
<body onLoad="getReady()">
<object id="MediaPlayer1" width="460" height="68" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="FileName" value="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3">
<param name="ShowControls" value="1">
<param name="ShowPositionControls" value="0">
<param name="ShowAudioControls" value="1">
<param name="ShowTracker" value="1">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="1">
<param name="AutoSize" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowCaptioning" value="0">
<param name="AutoStart" value="1">
<param name="PlayCount" value="0">
<param name="AnimationAtStart" value="0">
<param name="TransparentAtStart" value="0">
<param name="AllowScan" value="0">
<param name="EnableContextMenu" value="1">
<param name="ClickToPlay" value="0">
<param name="InvokeURLs" value="1">
<param name="DefaultFrame" value="datawindow">
<embed src="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3" align="baseline" border="0" width="460" height="68"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin&"
name="MediaPlayer" showcontrols="1" showpositioncontrols="0"
showaudiocontrols="1" showtracker="1" showdisplay="0"
showstatusbar="1"
autosize="0"
showgotobar="0" showcaptioning="0" autostart="1" autorewind="0"
animationatstart="0" transparentatstart="0" allowscan="1"
enablecontextmenu="1" clicktoplay="0" invokeurls="1"
defaultframe="datawindow">
</embed>
</object>
<div id=lyr class=div>歌词加载中……</div>
</body>
</html>

复制链接网友评论收藏本文关闭此页

上一条：什么是MVC(三层架构) 下一条：初学教程：Java Socket网络编程浅析

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网