设为首页 | 热门标签 | RSS 订阅 | 加入收藏
游客可以选择 菜鸟导航 | 成为会员 | 马上登陆

返回首页
当前位置: 主页 > 资料馆 > 正文

音乐和歌词同步的网页特效代码

时间:2009-08-19 21:26 作者:飞雪鸿云 来源:未知 点击: 次
音乐和歌词同步的网页特效代码
　　

  1. <html><head> 
  2. <meta http-equiv=Content-Type content=text/html; charset=utf-8> 
  3. <title>音乐歌词同步测试</title> 
  4. <style> 
  5. <!--  
  6. .div  
  7. {  
  8. width:460px;  
  9. height:200px;  
  10. overflow-y:scroll;  
  11. padding-top:80px;  
  12. text-align:left;  
  13. padding-left:100px;  
  14. line-height:25px;  
  15. font-size:13px;  
  16. padding-bottom:50px;  
  17. }  
  18. --> 
  19. </style> 
  20. <script language="javascript"> 
  21. var scrollt=0;  
  22. var tflag=0;//存放时间和歌词的数组的下标  
  23. var lytext=new Array();//放存汉字的歌词  
  24. var lytime=new Array();//存放时间  
  25. var delay=10;  
  26. var line=0;  
  27. var scrollh=0;  
  28. function getLy()//取得歌词  
  29. {  
  30. 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……." 
  31. return ly;  
  32. }  
  33. function show(t)//显示歌词  
  34. {  
  35. var div1=document.getElementById("lyr");//取得层  
  36. document.getElementById("lyr").innerHTML=" ";//每次调用清空以前的一次  
  37. if(t<lytime[lytime.length-1])//先舍弃数组的最后一个  
  38. {  
  39. for(var k=0;k<lytext.length;k++)  
  40. {  
  41. if(lytime[k]<=t&&t<lytime[k+1])  
  42. {  
  43. scrollh=k*25;//让当前的滚动条的顶部改变一行的高度  
  44. div1.innerHTML+="<font color=red style=font-weight:bold>"+lytext[k]+"</font><br>";  
  45. }  
  46. else if(t<lytime[lytime.length-1])//数组的最后一个要舍弃  
  47. div1.innerHTML+=lytext[k]+"<br>";  
  48. }  
  49. }  
  50. else//加上数组的最后一个  
  51. {  
  52. for(var j=0;j<lytext.length-1;j++)  
  53. div1.innerHTML+=lytext[j]+"<br>";  
  54. div1.innerHTML+="<font color=red style=font-weight:bold>"+lytext[lytext.length-1]+"</font><br>";  
  55. }  
  56. }  
  57. function scrollBar()//设置滚动条的滚动  
  58. {  
  59. if(document.getElementById("lyr").scrollTop<=scrollh)  
  60. document.getElementById("lyr").scrollTop+=1;  
  61. if(document.getElementById("lyr").scrollTop>=scrollh+50)  
  62. document.getElementById("lyr").scrollTop-=1;  
  63. window.setTimeout("scrollBar()",delay);  
  64. }  
  65. function getReady()//在显示歌词前做好准备工作  
  66. {  
  67. var ly=getLy();//得到歌词  
  68. //alert(ly);  
  69. var arrly=ly.split(".");//转化成数组  
  70. for(var i=0;i<arrly.length;i++)  
  71. sToArray(arrly[i]);  
  72. sortAr();  
  73. /*for(var j=0;j<lytext.length;j++)  
  74. {  
  75. document.getElementById("lyr").innerHTML+=lytime[j]+lytext[j]+"<br>";  
  76. }*/  
  77. scrollBar();  
  78. }  
  79. function sToArray(str)//解析如“[02:02][00:24]没想到是你”的字符串前放入数组  
  80. {  
  81. var left=0;//"["的个数  
  82. var leftAr=new Array();  
  83. for(var k=0;k<str.length;k++)  
  84. {  
  85. if(str.charAt(k)=="[")  
  86. {  
  87. leftAr[left]=k;  
  88. left++;  
  89. }  
  90. }  
  91. if(left!=0)  
  92. {  
  93. for(var i=0;i<leftAr.length;i++)  
  94. {  
  95. lytext[tflag]=str.substring(str.lastIndexOf("]")+1);//放歌词  
  96. lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));//放时间  
  97. tflag++;  
  98. }  
  99. }  
  100. //alert(str.substring(leftAr[0]+1,leftAr[0]+6));  
  101. }  
  102. function sortAr()//按时间重新排序时间和歌词的数组  
  103. {  
  104. var temp=null;  
  105. var temp1=null;  
  106. for(var k=0;k<lytime.length;k++)  
  107. {  
  108. for(var j=0;j<lytime.length-k;j++)  
  109. {  
  110. if(lytime[j]>lytime[j+1])  
  111. {  
  112. temp=lytime[j];  
  113. temp1=lytext[j];  
  114. lytime[j]=lytime[j+1];  
  115. lytext[j]=lytext[j+1];  
  116. lytime[j+1]=temp;  
  117. lytext[j+1]=temp1;  
  118. }  
  119. }  
  120. }  
  121. }  
  122. function conSeconds(t)//把形如：01：25的时间转化成秒；  
  123. {  
  124. var m=t.substring(0,t.indexOf(":"));  
  125. var s=t.substring(t.indexOf(":")+1);  
  126. s=parseInt(s.replace(/\b(0+)/gi,""));  
  127. if(isNaN(s))  
  128. s=0;  
  129. var totalt=parseInt(m)*60+s;  
  130. //alert(parseInt(s.replace(/\b(0+)/gi,"")));  
  131. if(isNaN(totalt))  
  132. return 0;  
  133. return totalt;  
  134. }  
  135. function getSeconds()//得到当前播放器播放位置的时间  
  136. {  
  137. var t=getPosition();  
  138. tt=t.toString();//数字转换成字符串  
  139. var s=t.substring(0,t.lastIndexOf("."));//得到当前的秒  
  140. //alert(s);  
  141. return s;  
  142. }  
  143. function getPosition()//返回当前播放的时间位置  
  144. {  
  145. var mm=document.getElementById("MediaPlayer1");  
  146. //var mmt=;  
  147. //alert(mmt);  
  148. return mm.CurrentPosition;  
  149. }  
  150. function mPlay()//开始播放  
  151. {  
  152. var ms=parseInt(getSeconds());  
  153. if(isNaN(ms))  
  154. show(0);  
  155. else  
  156. show(ms);  
  157. window.setTimeout("mPlay()",100)  
  158. }  
  159. window.setTimeout("mPlay()",100)  
  160. function test()//测试使用，  
  161. {  
  162. alert(lytime[lytime.length-1]);  
  163. }  
  164. </script> 
  165. </head> 
  166. <body onLoad="getReady()"> 
  167. <object id="MediaPlayer1" width="460" height="68" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
  168. codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" 
  169. align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..." 
  170. type="application/x-oleobject"> 
  171. <param name="FileName" value="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3"> 
  172. <param name="ShowControls" value="1"> 
  173. <param name="ShowPositionControls" value="0"> 
  174. <param name="ShowAudioControls" value="1"> 
  175. <param name="ShowTracker" value="1"> 
  176. <param name="ShowDisplay" value="0"> 
  177. <param name="ShowStatusBar" value="1"> 
  178. <param name="AutoSize" value="0"> 
  179. <param name="ShowGotoBar" value="0"> 
  180. <param name="ShowCaptioning" value="0"> 
  181. <param name="AutoStart" value="1"> 
  182. <param name="PlayCount" value="0"> 
  183. <param name="AnimationAtStart" value="0"> 
  184. <param name="TransparentAtStart" value="0"> 
  185. <param name="AllowScan" value="0"> 
  186. <param name="EnableContextMenu" value="1"> 
  187. <param name="ClickToPlay" value="0"> 
  188. <param name="InvokeURLs" value="1"> 
  189. <param name="DefaultFrame" value="datawindow"> 
  190. <embed src="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3" align="baseline" border="0" width="460" height="68" 
  191. type="application/x-mplayer2" 
  192. pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin&" 
  193. name="MediaPlayer" showcontrols="1" showpositioncontrols="0" 
  194. showaudiocontrols="1" showtracker="1" showdisplay="0" 
  195. showstatusbar="1" 
  196. autosize="0" 
  197. showgotobar="0" showcaptioning="0" autostart="1" autorewind="0" 
  198. animationatstart="0" transparentatstart="0" allowscan="1" 
  199. enablecontextmenu="1" clicktoplay="0" invokeurls="1" 
  200. defaultframe="datawindow"> 
  201. </embed> 
  202. </object> 
  203. <div id=lyr class=div>歌词加载中……</div> 
  204. </body> 
  205. </html>   

 

顶一下
(0)
0%
踩一下
(0)
0%
本站声明：本站文章，如无特别说明，均为转载或者节选自其他网站。
如本文内容侵犯了您的合法权益，请与责任编辑联系。谢谢合作！
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
发布者资料
飞雪鸿云 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:1970-01-01 08:01 最后登录:2009-09-06 14:09
热点文章
相关教程

关于我们 | 站点地图 | 广告服务 | 友情链接 | 论坛 |

沪ICP备05017900号

Copyright © 2009-2010 菜鸟阵地