『壹』 如何用html+js实现音乐歌词同步播放器
html好像现在还不能实现，js我估计实现的可能也不大。 必须用JS来解决你的问题，网上开源的JS播放器很多，你可以找一个写入你静态页面里面即可。
『贰』 javaScript如何滚动显示歌词呢
第一步：将你所有的歌词放在一个层里面，每句有相等的间隔，但是层的高度设置为你想显示的那么高，溢出设置隐藏，设置为绝对定位
第二步：设置动画：让歌词的层每次间隔一定的时间向上运动setInterval函数，还可以设置透明度渐变
第三步：判断是否到达末尾然后再重头开始实现循环
『叁』 关于播放器中的功能（歌词同步），急求VB.NET代码！！
思路很简单可以定义一个结构LyricStructure Lyric
Dim Time As Single
Dim Content As String
End Structure声明一个列表 Private Lyrics As New List(Of Lyric)然后以文本方式把歌词文件读入一个变量 并对它进行分析 分别把时间和歌词内容存入一个Lyric，并加入Lyrics中。代码如下：（假设歌曲文件的路径为path）Dim LrcPath As String== IO.Path.GetDirectoryName(cPath) & "/" & IO.Path.GetFileNameWithoutExtension(cPath) & ".lrc"If IO.File.Exists(LrcPath= True Then AnalysisLyric() Private Sub AnalysisLyric()
Lyrics.Clear() '先清空列表
Dim tm As Byte
Dim sr As New IO.StreamReader(LrcPath, System.Text.Encoding.Default) '读取歌词文件
Do While sr.EndOfStream = False '判断是否处于文件流末尾
Dim tmpStr As String = sr.ReadLine '读取一行
If tmpStr.Length < 5 Then Continue Do '长度小于5则跳过，进行下一次循环
Select Case Mid(tmpStr, 2, 2) '判断第2-3个字符 因为歌词里的注释都是[ti:***]类似的结构
Case "ti"
lTitle = Mid(tmpStr, 5, tmpStr.Length - 5)
Case "ar"
lArtist = Mid(tmpStr, 5, tmpStr.Length - 5)
Case "al"
lAlbum = Mid(tmpStr, 5, tmpStr.Length - 5)
Case "by"
lAuthor = Mid(tmpStr, 5, tmpStr.Length - 5)
Case Else '如果不为以上的内容 则为歌词正文，进行以下操作
If Not Mid(tmpStr, 1, 6) Like "?##:##" Then Continue Do
Dim time(-1) As String '因为有时歌词是以[00:00.00][00:00.00]**** 这样歌词把多个时间存放在一起的 ，所以定义一个数组来存放歌词
Do '因为不确定时间的个数，所以此处必须循环判断
tm = InStr(tmpStr, "]") '因为歌词时间有时是[00:00.00]形式，有时是[00:00]形式，所以不能单纯的截取第几个字符 ，我是根据查找']'字符来进行判断的
ReDim Preserve time(time.GetUpperBound(0) + 1) 为time数组重新分配大小
time(time.GetUpperBound(0)) = Mid(tmpStr, 1, tm) 'time.GetUpperBound(0)返回数组的第一维的最大下标
tmpStr = IIf(tmpStr.Length = tm, " ", Mid(tmpStr, tm + 1)) '歌词内容
Loop While Mid(tmpStr, 1, 6) Like "?##:##" '如果截取剩下的部分依然匹配的话继续循环
For Each t In time '为每个时间都创建一个Lyric变量
Dim ln As Lyric
ln.Time = SwitchTime(Mid(t, 2, t.Length - 2))
ln.Content = tmpStr
Lyrics.Add(ln)
Next
End Select
Loop
sr.Close() 关闭流
Sort() '把所有Lyric按时间顺序排序
End Sub Private Function SwitchTime(ByVal time As String) As Single ‘这个函数是用来把00:00.00格式的时间转化成以秒数显示的数值
Dim tm As Single
Dim minute As Single = Val(Mid(time, 1, 2))
Dim second As Single = Val(Mid(time, 4, 5))
tm = minute * 60 + second
Return tm
End Function Private Sub Sort()
For i = 0 To Lyrics.Count - 2
For j = i To Lyrics.Count - 1
If Lyrics(i).Time > Lyrics(j).Time Then
Dim tm As Lyric = Lyrics(i)
Lyrics(i) = Lyrics(j)
Lyrics(j) = tm
End If
Next
Next
End Sub 接下来是显示歌词的问题了 ，只要有每句歌词和对应的时间，那么问题就好办了。你可以用Windows Media Player控件返回的时间和每句歌词的时间做比较，来判断应该显示那一句。代码是很久前写的 ，那时没加注释，都是刚刚加上去的哟，你可以根据你的实际情况自己修改，有什么不懂的地方可以继续问我哈~~
『肆』 如何用原生js或者jq或者css3制作会动的歌词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player</title>
<style type="text/css">
#audio-wrapper{
border:1px solid;
text-align:center;
}
.activated{
color:#33b;
font-weight:bold;
background:#ddf;
}
#lrc{
text-align:center;
width:360px;
height:400px;
overflow:hidden;
border:2px solid #ddd;
box-shadow:2px 2px 2px silver;
}
.lyrics-container{
position:relative;
width:99%;
height:80%;
border:1px solid red;
overflow:hidden;
}
.lyrics-container2{
position:absolute;
width:355px;
}
#lrc p{
text-indent:0;
margin:0;
padding:6px;
}
.music-title,.album,.artist{
margin:0;
padding:4px;
text-indent:0;
text-align:left;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimei.mp3" controls></audio></p>
</div>
<div id="lrc"></div>
<script type="text/javascript">
$(document).ready(function(){
var $lrc = $('#lrc');
var html ='';
$('audio').on('play',function(){
var start = new Date();
if($lrc.html() == ''){
$.ajax({
url:'data/aimei.xml',
type:'get',
dataType:'xml',
success:function(data){
html += '<div class="info">';
if($(data).find('TITLE').length > 0){
html += '<p class="music-title">歌曲：' + $(data).find('TITLE').text()+'</p>';
}
if($(data).find('ALBUM').length > 0){
html += '<p class="album">专辑：' + $(data).find('ALBUM').text()+'</p>';
}
if($(data).find('ARTIST').length > 0){
html += '<p class="artist">演唱：' + $(data).find('ARTIST').text()+'</p>';
}
html += '</div>';
html += '<div class="lyrics-container">'
html += '<div class="lyrics-container2">'
$(data).find('LRC').each(function(){
html += '<p class="lyrics" tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>';
});
html += '</div></div>';
$lrc.html(html);
//alert($(data).find('LRC').length);
}
});
}
var timer = setInterval(function(){
var now = new Date();
var elapsed = now - start;
if($lrc.find('.lyrics').length){
$lrc.find('.lyrics').each(function(){
var isOK = elapsed - $(this).attr('tag');
if(isOK < 13 && isOK > 0){
$lrc.find('.lyrics').removeClass('activated');
$(this).addClass('activated');
if($(this).prevAll('.lyrics').length > 3){
$('.lyrics-container2').animate({
'top':'-=30px'
});
//console.log($(this).prevAll('.lyrics').length);
}
}
});
}
},10);
});
});
</script>
</body>
</html>
『伍』 我需要一个js正则来解析歌词文件
var str='[00:00.91]春暖花开[00:01.64]演唱：那英[00:03.01][00:21.23]如果你渴求一滴水\n';
str=str.replace(/\]\[/g,'] [');//"]["没有空格会影响匹配结果
var arr=str.match(/(\[\d{2}:\d{2}\.\d{2}\])(.[^\[\]]*)?/g);
var time=[],txt=[];
for(var i=0;i<arr.length;i++){
/^(\[\d{2}:\d{2}\.\d{2}\])(.[^\[\]]*)?$/.exec(arr[i]);
time.push(RegExp.$1);
txt.push(RegExp.$2);
}
alert(arr);
alert(time);
alert(txt);
『陆』 求一个js歌词同步的代码
按照你的说法，应该要用到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.ration;
读取当前的时候后，与数组中时间项进行对比，相同(由于其它原因，可能会出现不相同的情况，因此则用“>=”)则用Ajax对id为lrc的div进行更改，具体怎么改那就随便你咯，一般就是改变一下指定行的颜色。
如果前当播放时间==歌曲总时间，那么就用clearInterval(Interval)，停止Interval继续调用。
好了，一个简单的JS的歌词同步播放器就完工啦
『柒』 百度的音乐播放时有同步显示歌词，谁知道代码
网络的这个音乐播放器是有代码的,但是这个显示歌词,是直接镶嵌到网页里的.没有单独的代码.它的网页的整个播放器还有歌词的代码是这样的:
</SCRIPT>
<DIV id=Lrc_div>
<DIV id=url_div>歌曲出处：<A id=song_url href="http://play8.tom.com/uploadfile/song/200702/20/1171954091_245437.mp3">http://play8.tom.com/...1171954091_245437.mp3</A></DIV>
<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=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715 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="http://play8.tom.com/uploadfile/song/200702/20/1171954091_245437.mp3" align="baseline" border="0" width="350" 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"
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="http://post..com/f?kw=%B0%D9%B6%C8MP3%CA%D4%CC%FD" target=_blank>意见与反馈</A><A style="COLOR: #666666" href="http://www..com/search/listenright.html" target=_blank>权利声明</A> </DIV><!-- script type="text/javascript" src="js/jslog.js"></script> -->
<SCRIPT>