js同步歌词

时间:2024-12-23 20:20:32 来源:语文学习网 作者:管理员

按照你的说法,应该要用到Ajax,对网页中播放器插件进行帧听,然后再对歌词部分进行处理,百度的Mp3就是这样做的。下面就简单的说一下吧材料:歌曲、歌曲对应的歌词(可以是XML,当然也可以是歌词专用格式lrc,随便啦,什么文件都可以)、几条简单的JS语句处理: 1、JSP生成网页的时候,将音乐播放器插件的ID命名为WMA,当然,你可以随便命名,只是这里便于说明。 2、读取XML或LRC内容,利用Ajax加载到id为lrc的div中。并将XML或LRC的每行的歌词存到数组testmp3中(此数组当然是二维数组,数据组分别播放时间与歌词内容)好了,到此,准备工作就做好了,下面就是重点---歌词同步。 3、相关语句:一、定义函数getWMAtime二、利用Interval=setInterval("getWMAtime()",900),意思就是每隔900毫秒调用getWMAtime这个函数,并将其放入Interval中。如果要用到“上一曲”“下一曲”,可以将其做为了一个函数,将音乐的地址赋给WMA.URL,用WMA.controls.play();播放,用WMA.controls.stop();停止播放,用WMA.controls.pause();暂停播放。改变了音乐地址后,记得用Ajax载入新的歌词!另: getWMAtime函数的内容为读取当前词曲的播放时间当前的播放时间:WMA.controls.currentPosition;歌曲总时间:WMA.currentMedia.duration;读取当前的时候后,与数组中时间项进行对比,相同(由于其它原因,可能会出现不相同的情况,因此则用“>=”)则用Ajax对id为lrc的div进行更改,具体怎么改那就随便你咯,一般就是改变一下指定行的颜色。如果前当播放时间==歌曲总时间,那么就用clearInterval(Interval),停止Interval继续调用。好了,一个简单的JS的歌词同步播放器就完工啦参考资料:网上查的资料

百度的这个音乐播放器是有代码的,但是这个显示歌词,是直接镶嵌到网页里的.没有单独的代码.它的网页的整个播放器还有歌词的代码是这样的:

</SCRIPT>

<DIV id=Lrc_div>

<DIV id=url_div>歌曲出处:<A id=song_url href="">;

<DIV id=song style="DISPLAY: none">爱情转移</DIV>

<DIV id=singer style="DISPLAY: none">陈奕迅</DIV>

<DIV id=song_div>歌曲试听:<B>爱情转移网搜 MP3 Wang...</B></DIV>

<DIV id=S_div>

<DIV id=player_div>

<OBJECT id=MediaPlayer1 codeBase= type=application/x-oleobject height=68 standby="Loading Microsoft Windows Media Player components..." width=350 align=baseline border=0 classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95>

<embed src="" align="baseline" border="0" width="350" height="68"

type="application/x-mplayer2"

pluginspage=";"

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"

defaultframe="datawindow" invokeurls="0"></embed></OBJECT></DIV>

<DIV id=SongNum_div>

<DIV id=plus_div contentEditable=false onclick="if(!isLoadIf) {window.document.getElementById('plus_a').target='mt';reWin();} else{try_iframe.Controller(event);if(!is_ext_mb) reWin();return false;}"><A id=plus_a contentEditable=false style="CURSOR: hand">放入我的音乐盒</A></DIV>

<DIV id=next_div contentEditable=false style="DISPLAY: none" onclick="try_iframe.Controller(event);return false;"><A id=next_a contentEditable=false style="CURSOR: hand">下一首</A></DIV>

<DIV id=pre_div contentEditable=false style="DISPLAY: none" onclick="try_iframe.Controller(event);return false;"><A id=pre_a contentEditable=false style="CURSOR: hand"?>上一首</A></DIV></DIV></DIV>

<DIV id=Blrc style="CLEAR: both">

<DIV style="BORDER-RIGHT:#b4c2e2 1px solid; BORDER-TOP:#b4c2e2 1px solid; FONT-SIZE: 12px; BORDER-LEFT:#b4c2e2 1px solid; WIDTH: 350px; BORDER-BOTTOM:#b4c2e2 1px solid; TEXT-ALIGN: left">

<TABLE style="BACKGROUND:#eceded" cellSpacing=0 cellPadding=0 width=350>

<TBODY>

<TR>

<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; PADDING-TOP: 5px; TEXT-ALIGN: left"><B>歌词:</B></TD>

<TD style="TEXT-ALIGN: right"></TD></TR></TBODY></TABLE>

<DIV id=LrcShower_div style="OVERFLOW-Y: scroll; BACKGROUND:#fff; OVERFLOW-X: hidden; WIDTH: 350px; LINE-HEIGHT: 20px; HEIGHT: 276px"><BR><BR><BR><BR><BR><BR><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>陈奕迅</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>爱情转移</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>徘徊过多少橱窗住过多少旅馆</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才会觉得分离也并不冤枉</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>感情是用来浏览还是用来珍藏</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>好让日子天天都过得难忘</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>熬过了多久患难湿了多长眼眶</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才能知道伤感是爱的遗产</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>流浪几张双人床换过几次信仰</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才让戒指义无返顾的交换</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>把一个人的温暖转移到另一个的胸膛</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让上次犯的错反省出梦想</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>每个人都是这样享受过提心吊胆</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才拒绝做爱情待罪的羔羊</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>回忆是捉不到的月光握紧就变黑暗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让虚假的背影消失于晴朗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>阳光在身上流转等所有业障被原谅</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>爱情不停站想开往地老天荒需要多勇敢</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>烛光照亮了晚餐照不出个答案</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>恋爱不是温馨的请客吃饭</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>床单上扑满花瓣拥抱让它成长</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>太拥挤就开到了别的土壤</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>感情需要人接班接近换来期望</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>期望带来失望的恶性循环</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>短暂的总是浪漫漫长总会不满</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>烧完美好青春换一个老伴</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>把一个人的温暖转移到另一个的胸膛</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让上次犯的错反省出梦想</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>每个人都是这样享受过提心吊胆</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才拒绝做爱情待罪的羔羊</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>回忆是捉不到的月光握紧就变黑暗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让虚假的背影消失于晴朗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>阳光在身上流转等所有业障被原谅</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>爱情不停站想开往地老天荒需要多勇敢</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>把一个人的温暖转移到另一个的胸膛</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让上次犯的错反省出梦想</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>每个人都是这样享受过提心吊胆</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>才拒绝做爱情待罪的羔羊</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>回忆是捉不到的月光握紧就变黑暗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>让虚假的背影消失于晴朗</FONT></SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>阳光在身上流转等所有业障被原谅</FONT></SPAN><BR><SPAN class=prelrc>爱情不停站想开往地老天荒需要多勇敢</SPAN><BR><SPAN class=nowlrc>你不要失望荡气回肠是为了最美的平凡.......</SPAN><BR><SPAN style="FONT-SIZE: 12px; MARGIN-LEFT: 12px"><FONT color=#000000>Over...</FONT></SPAN><BR><BR><BR><BR><BR><BR><BR><BR></DIV></DIV></DIV>

<DIV id=lrctellall_div style="DISPLAY: none"></DIV>

<DIV id=InP_div><A href="" target=_blank>意见与反馈</A><A style="COLOR:#666666" href="" target=_blank>权利声明</A></DIV><!-- script type="text/javascript" src="js/jslog.js"></script>-->

<SCRIPT>


上一篇:jsp 歌词
下一篇:js实现歌词同步

TAG标签:同步歌词

热门排行: 好一点的原唱歌词