网页中LRC歌词同步显示

<html><head> <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="21个人.wma"> <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="21个人.wma" 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>

网页中LRC歌词同步显示相关推荐

html+js的lrc歌词同步播放器
<html> <head> <title>lrc歌词同步播放器</title> <style> body, td { font-family ...
网页中的按钮无法显示问题解决
今天有朋友反映她的电脑有问题,打开的网页中按纽无法显示,例如:163.com的邮箱中,发送邮件的按钮无法显示. 问了她一下是不是修改过背景色,她说是.就知道问题所在了. 解决方法:IE-工具-Inte ...
Android中解析lrc歌词同步歌曲
</pre><pre name="code" class="java">//歌词解析类 public class LrcParser { ...
Android自定义View来实现解析lrc歌词同步滚动、上下拖动、缩放歌词等功能
http://blog.csdn.net/ouyang_peng/article/details/50813419 前言一LRC歌词文件简介 1什么是LRC歌词文件 2LRC歌词文件的格式 LRC歌 ...
Jplayer歌词同步显示插件
http://blog.csdn.net/wk313753744/article/details/38758317 1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图 ...
js解析lrc 实现lrc歌词同步滚动效果
这两天想着做一个h5的网页播放器,实现歌词同步滚动但是上网找了很多资料,竟发现没有比较完善的代码供参考,但是无意间看到了百度的千千音乐有这样的效果,就想着一定能通过js实现经过两三天的努力,终于做 ...
Jplayer歌词同步显示插件(在以前别人基础上修改)
1.该插件是一个jquery的编写的跟jplayer实现歌词同步的插件,最终效果如图: 2.首先引入jplayer的相关的js库和样式文件. <meta http-equiv="Con ...
android简单歌词,《Android_MP3播放器(初学简单版_歌名、歌手、歌词同步显示)》.doc...
Android_MP3播放器(初学简单版) --乐拐这是我学习Android以来的第二个程序--MP3播放器(简单版),我的第一个程序是比较实用的通讯录(文档地址是:/view/d013f64fc8 ...
Web前端，HTML表格相关标签和属性，在网页中表格结构的显示
一.表格的基本标签场景: 在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表代码 <table border=& ...

网页中LRC歌词同步显示

网页中LRC歌词同步显示相关推荐

最新文章

热门文章