html5歌词同步代码的简单介绍

本篇文章给大家谈谈html5歌词同步代码，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求一个js歌词同步的代码
• 2、制作网页lrc歌词同步代码
• 3、网页MP3播放器歌词同步代码问题
• 4、html5实现 音乐播放器歌词同步怎么实现的
• 5、html5音乐代码写在哪里？还有，音乐放在哪个文件里面？？
• 6、如何制作html5音频播放器同步歌词

求一个js歌词同步的代码

htmlhead

meta http-equiv=Content-Type content=text/html; charset=utf-8

title林俊杰 - 完美新世界/title

style

!--

.div

{

width:460px;

height:200px;

overflow-y:scroll;

padding-top:80px;

text-align:left;

padding-left:100px;

line-height:25px;

font-size:13px;

padding-bottom:50px;

}

--

/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]完美新世界.[00:10]作曲:林俊杰.[00:14]支持JJ.[00:18]LRC歌词制作:鸿恒之心.[00:44]是你一束光 琥珀色远方.[00:50]回忆被穿肠 伤口被遗忘.[00:56]泪水跟着眼眶 流出一道方向.[01:02]牵引着你我的希望.[01:11][02:52][03:50]手联手 用心连接宇宙.[01:16][02:57]夜光倾透 寒风里微颤抖.[01:22]古老的记忆 不断的寻觅.[01:28][03:09]因为爱要坚持到最后.[01:34][03:15]手联手 抚平心灵伤口.[01:39][03:21][03:55]寒风颤抖 还是要往前走.[01:45][03:26][04:01]当太阳再升起 用爱解冻大地.[01:51][03:32]重建完美新世界 重现你和我.[03:45]Yeah ~ Yeah ~[02:25]什么无偿 说不出模样.[02:31]我是迎着光 逆着风飘荡.[02:37]你说暮色苍茫 空气开始摇晃.[02:44]不用害怕 走吧.[02:46]希望就在不远地方.[03:03]古老的记忆 依然不断的寻觅.[04:07]重现完美新世界.[04:14]只有你和我.[00:06][00:22][01:08][01:33][02:00][02:517][03:14][03:43][03:49][04:19] 歌词很给力噢！.[04:20]music end……."

return ly;

}

function show(t)//显示歌词

{

var div1=document.getElementById("lyr");//取得层

document.getElementById("lyr").innerHTML=" ";//每次调用清空以前的一次

if(tlytime[lytime.length-1])//先舍弃数组的最后一个

{

for(var k=0;klytext.length;k++)

{

if(lytime[k]=ttlytime[k+1])

{

scrollh=k*25;//让当前的滚动条的顶部改变一行的高度

div1.innerHTML+="font color=red style=font-weight:bold"+lytext[k]+"/fontbr";

}

else if(tlytime[lytime.length-1])//数组的最后一个要舍弃

div1.innerHTML+=lytext[k]+"br";

}

}

else//加上数组的最后一个

{

for(var j=0;jlytext.length-1;j++)

div1.innerHTML+=lytext[j]+"br";

div1.innerHTML+="font color=red style=font-weight:bold"+lytext[lytext.length-1]+"/fontbr";

}

}

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;iarrly.length;i++)

sToArray(arrly[i]);

sortAr();

/*for(var j=0;jlytext.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;kstr.length;k++)

{

if(str.charAt(k)=="[")

{

leftAr[left]=k;

left++;

}

}

if(left!=0)

{

for(var i=0;ileftAr.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;klytime.length;k++)

{

for(var j=0;jlytime.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=""

align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..."

type="application/x-oleobject"

param name="FileName" value=""

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="" align="baseline" border="0" width="460" height="68"

type="application/x-mplayer2"

pluginspage=";sbp=mediaplayerar=mediasba=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

div align="center"/div

p align="center" /p

p align="center" /p

/body

/html

制作网页lrc歌词同步代码

用div+css+js实现的，

用后台代码(asp/php)分析出lrc文件播放段与歌词数组，然后分析前台播放对应的时间，相的突显当胆歌词。这是原理，网上很多代码，给出一个

html

head

meta http-equiv=Content-Type content=text/html; charset=gb2312

title网页教学网 -- 千言万语/title

STYLE type=text/css

TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; }

BODY{

FONT-SIZE: 9pt;

LINE-HEIGHT: 17px;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}

#lrcoll td { color:#0080C0; cursor: default; }

#lrcbox { color:#00FF00 }

#lrcfilter { filter: alpha(opacity=0) }

#lrcbc { color:#FFFF33 }

/STYLE

/head

script language="JavaScript"

self.moveTo(0,0);

self.resizeTo(screen.availWidth,screen.availHeight);

/script

base onmouseover="window.status=' flydu.com 别忘了把地址告诉你QQ上的朋友哦！'; return true;"

body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

span id="lrcdata"!--

[ti:千言万语]

[ar:邓丽君]

[au:尔英]

[al:邓丽君 － 宝丽金 88 极品音色系列]

[by:]

[00:02.00]千言万语 － 邓丽君

[00:09.25]电影《彩云飞》插曲

[00:16.50]古月 曲 尔英 词

[00:23.70]

[00:25.20]00:25.70不00:26.00知00:26.35道00:26.80为00:27.30了00:27.90什00:28.60麽00:30.20

[00:31.35]00:31.85忧00:32.20愁00:32.60它00:33.00围00:33.40绕00:34.15着00:34.60我00:36.60

[00:37.60]00:38.10我00:38.45每00:38.85天00:39.25都00:39.60在00:40.45祈00:41.30祷00:43.80

[00:43.90]00:44.20快00:44.60赶00:45.00走00:45.45爱00:45.95的00:46.50寂00:47.75寞00:48.80

[00:48.90]00:49.20那00:49.50天00:49.95起00:51.30 00:51.90你00:52.25对00:52.65我00:53.00说00:54.40

[00:54.90]00:55.40永00:56.05远00:56.80地00:57.50爱00:58.60着00:59.10我01:00.70

[01:00.85]01:01.35千01:02.00言01:03.80和01:04.70万01:05.35语01:06.80

[01:06.90]01:07.25随01:08.05风01:09.25云01:10.65掠01:11.20过01:12.80

[01:14.00]01:14.50不01:14.85知01:15.25道01:15.65为01:16.30了01:16.80什01:17.45麽01:19.25

[01:20.10]01:20.60忧01:21.05愁01:21.40它01:21.90围01:22.35绕01:23.05着01:23.40我01:25.60

[01:26.40]01:26.90我01:27.25每01:27.65天01:28.05都01:28.50在01:29.50祈01:30.15祷01:32.50

[01:32.60]01:33.10快01:33.45赶01:33.85走01:34.25爱01:34.90的01:35.40寂01:36.70寞01:39.30

[01:40.80]

[02:03.45]02:03.95不02:04.25知02:04.70道02:05.10为02:05.75了02:06.30什02:06.95麽02:08.10

[02:09.70]02:10.20忧02:10.55愁02:10.95它02:11.40围02:11.85绕02:12.50着02:12.90我02:15.40

[02:15.90]02:16.40我02:16.85每02:17.15天02:17.50都02:17.90在02:18.90祈02:19.60祷02:22.10

[02:22.20]02:22.50快02:22.90赶02:23.30走02:23.75爱02:24.30的02:24.80寂02:26.10寞02:27.20

[02:27.30]02:27.50那02:27.85天02:28.30起02:29.60 02:30.10你02:30.50对02:30.90我02:31.40说02:32.50

[02:33.15]02:33.65永02:34.25远02:35.05地02:35.75爱02:36.90着02:37.40我02:38.65

[02:39.15]02:39.65千02:40.35言02:42.15和02:43.05万02:43.55语02:45.30

[02:45.40]02:45.70随02:46.40风02:47.50云02:49.10掠02:49.70过02:50.90

[02:52.40]02:52.90不02:53.25知02:53.65道02:54.05为02:54.65了02:55.25什02:55.85麽02:57.55

[02:58.50]02:59.00忧02:59.40愁02:59.90它03:00.35围03:00.75绕03:01.35着03:01.80我03:03.65

[03:04.75]03:05.25我03:05.60每03:06.00天03:06.40都03:06.80在03:07.80祈03:08.50祷03:11.10

[03:11.20]03:11.45快03:12.20赶03:12.60走03:12.90爱03:13.50的03:14.10寂03:15.45寞03:18.45

[03:19.95]

[03:21.25]网上服务由 提供

[03:28.97]

--/span

center

object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"

param name="url" value=";action=url"

param name="volume" value="100"

param name="enablecontextmenu" value="0"

param name="enableerrordialogs" value="0"

/object

div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"

table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" oncontextmenu="return false;"

trtd nowrap height="20" align="center" id="lrcwt1"/td/tr

trtd nowrap height="20" align="center" id="lrcwt2"/td/tr

trtd nowrap height="20" align="center" id="lrcwt3"/td/tr

trtd nowrap height="20" align="center" id="lrcwt4"/td/tr

trtd nowrap height="20" align="center" id="lrcwt5"/td/tr

trtd nowrap height="20" align="center" id="lrcwt6"/td/tr

trtd nowrap height="20" align="center"

table border="0" cellspacing="0" cellpadding="0"

trtd nowrap height="20"span id="lrcwt7" style="height:20"/span/td/tr

tr style="position:relative; top: -20px; z-index:6"td nowrap height="20"div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"/div/td/tr

/table

/td/tr

tr style="position:relative; top: -20px"td nowrap height="20" align="center"

table border="0" cellspacing="0" cellpadding="0"

trtd nowrap height="20"span id="lrcbox" style="height:20"歌词加载中/span/td/tr

tr style="position:relative; top: -20px; z-index:6;"td nowrap height="20"div id="lrcbc" style="overflow:hidden; height:20; width:0;"/div/td/tr

/table

/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt8"/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt9"/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt10"/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt11"/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt12"/td/tr

tr style="position:relative; top: -40px;"td nowrap height="20" align="center" id="lrcwt13"/td/tr

/table

/div

/center

script language="JavaScript"

var lrc0;

var lrc1;

var min;

lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));

function lrcClass(tt)

{

this.inr = [];

this.min = [];

this.oTime = 0;

this.dts = -1;

this.dte = -1;

this.dlt = -1;

this.ddh;

this.fjh;

lrcbc.style.width = 0;

if(/\[offset\:(\-?\d+)\]/i.test(tt))

this.oTime = RegExp.$1/1000;

tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");

tt = tt.replace(/\[[^\[\]\:]*\]/g,"");

tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");

tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");

tt = tt.replace(/[^]*[^\d]+[^]*\:[^]*/g,"");

tt = tt.replace(/[^]*\:[^]*[^\d\.]+[^]*/g,"");

while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))

{

tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");

var zzzt = RegExp.$1;

/^(.+\])([^\]]*)$/.exec(zzzt);

var ltxt = RegExp.$2;

var eft = RegExp.$1.slice(1,-1).split("][");

for(var ii=0; iieft.length; ii++)

{

var sf = eft[ii].split(":");

var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);

var sso = { t:[] , w:[] , n:ltxt }

sso.t[0] = tse-this.oTime;

this.inr[this.inr.length] = sso;

}

}

this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );

for(var ii=0; iithis.inr.length; ii++)

{

while(/[^]+\:[^]+/.test(this.inr[ii].n))

{

this.inr[ii].n = this.inr[ii].n.replace(/(\d+)\:([\d\.]+)/,"%=%");

var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);

this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;

}

lrcbc.innerHTML = "font"+ this.inr[ii].n.replace(//g,"").replace(//g,"").replace(//g,"").replace(/%=%/g,"/fontfont") +"/font";

var fall = lrcbc.getElementsByTagName("font");

for(var wi=0; wifall.length; wi++)

this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;

this.inr[ii].n = lrcbc.innerText;

}

for(var ii=0; iithis.inr.length-1; ii++)

this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);

this.min.sort(function(a,b){return a-b});

min = this.min[0]/2;

this.run = function(tme)

{

if(tmethis.dts || tme=this.dte)

{

var ii;

for(ii=this.inr.length-1; ii=0 this.inr[ii].t[0]tme; ii--){}

if(ii0) return;

this.ddh = this.inr[ii].t;

this.fjh = this.inr[ii].w;

this.dts = this.inr[ii].t[0];

this.dte = (iithis.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;

lrcwt1.innerText = this.retxt(ii-7);

lrcwt2.innerText = this.retxt(ii-6);

lrcwt3.innerText = this.retxt(ii-5);

lrcwt4.innerText = this.retxt(ii-4);

lrcwt5.innerText = this.retxt(ii-3);

lrcwt6.innerText = this.retxt(ii-2);

lrcwt7.innerText = this.retxt(ii-1);

lrcfilter.innerText = this.retxt(ii-1);

lrcwt8.innerText = this.retxt(ii+1);

lrcwt9.innerText = this.retxt(ii+2);

lrcwt10.innerText = this.retxt(ii+3);

lrcwt11.innerText = this.retxt(ii+4);

lrcwt12.innerText = this.retxt(ii+5);

lrcwt13.innerText = this.retxt(ii+6);

this.print(this.retxt(ii));

if(this.dlt==ii-1)

{

clearTimeout(lrc0);

if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;

golrcoll(0);

clearTimeout(lrc1);

lrcfilter.filters.alpha.opacity = 100;

golrcolor(0);

}

else if(parseInt(lrcoll.style.top)!=-20)

{

clearTimeout(lrc0);

lrcoll.style.top = -20;

clearTimeout(lrc1);

lrcfilter.filters.alpha.opacity = 0;

}

this.dlt = ii;

}

var bbw = 0;

var ki;

for(ki=0; kithis.ddh.length this.ddh[ki]=tme; ki++)

bbw += this.fjh[ki];

var kt = ki-1;

var sc = ((kithis.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];

var tc = tme - this.ddh[kt];

bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];

if(bbwlrcbox.offsetWidth)

bbw = lrcbox.offsetWidth;

lrcbc.style.width = Math.round(bbw);

}

this.retxt = function(i)

{

return (i0 || i=this.inr.length)?"":this.inr[i].n;

}

this.print = function(txt)

{

lrcbox.innerText = txt;

lrcbc.innerText = txt;

}

this.print("");

lrcwt1.innerText = "";

lrcwt2.innerText = "";

lrcwt3.innerText = "";

lrcwt4.innerText = "";

lrcwt5.innerText = "";

lrcwt6.innerText = "";

lrcwt7.innerText = "";

lrcfilter.innerText = "";

lrcwt8.innerText = "";

lrcwt9.innerText = "";

lrcwt10.innerText = "";

lrcwt11.innerText = "";

lrcwt12.innerText = "";

lrcwt13.innerText = "";

}

function lrcrun()

{

with(aboutplayer)

{

lrcobj.run(controls.currentPosition);

}

if(arguments.length==0) setTimeout("lrcrun()",10);

}

function golrcoll(s)

{

lrcoll.style.top = -(s++)*2;

if(s=9)

lrc0 = setTimeout("golrcoll("+s+")",min*10);

}

function golrcolor(t)

{

lrcfilter.filters.alpha.opacity = 110-(t++)*10;

if(t=10)

lrc1 = setTimeout("golrcolor("+t+")",min*10);

}

window.onerror = function()

{return true;}

lrcrun();

/script

/body

/html

网页MP3播放器歌词同步代码问题

好样的，我以前也在网上搜了不少这个问题，但总难找到一个比较好的答案。我还是在一个网站上发现一个还算比较好的代码。当然这是指静态网页中实现这种功能。歌词你要手动输入网页中。说起来有些麻烦，代码也不少。但JAVASCRIPT代码只要单独放，以后的网页可以引用。这样代码也不算多。很简单。

你可以去那个网站看一下。这个音乐网站不是每一首歌都是歌词同步，有的是静态歌词。这儿我给你选一个歌词同步的歌曲《星星知我心》的播放页面。

你可以看其代码，还是比较简单的。这是静态的。如果你还是有些不明白，你可以补充说明一下。

html5实现 音乐播放器歌词同步怎么实现的

可以去H5edu看看，其HTML5培训课程融合了HTML5开发基础课程、CSS3基础课程和移动前端交互JavaScript+JQuery+Ajex等课程,从入门到精通,让开发者全面学习HTML5

html5音乐代码写在哪里？还有，音乐放在哪个文件里面？？

提供一个最简单的HTML5音乐播放器代码。

!doctype html

html

head

meta charset="utf-8"

titleHtml5 音乐播放/title

/head

body

center

audio autoplay="autoplay" controls="controls" src="" /

你的浏览器不支持audio标签。

/audio

/center

/body

/html

【注意】

音乐的位置，可以放在服务器上，或者虚拟主机上。比如上面例子中的  就是指xxx域名根目录下的mp3文件。

如果上传了MP3，还没能正常播放，有可能需要给服务器增加MP3的MIME类型。正常情况下，服务器或者空间都是配置好的。

纯手打，望采纳。

如何制作html5音频播放器同步歌词

html5 audio 和 vedio 播放器歌词插件， 直接解析歌词源文件，

只需导入js文件 ， 加入几句 js 代码即可， 默认至此歌词拖拽 ，

默认提供两个解析器， 俩个时间匹配函数。

关于html5歌词同步代码和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。