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

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

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

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

<html>

<head>

TD { FONT-SIZE: 9ptLINE-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:#0080C0cursor: default}

#lrcbox { color:#00FF00 }

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

#lrcbc { color:#FFFF33 }

</STYLE>

</head>

self.moveTo(0,0)

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

</script>

<span id="lrcdata"><!--

[ti:千言万语]

[ar:邓丽君]

[au:尔英]

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

[by:www.aboutplayer.com]

[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]网上服务由 www.aboutplayer.com 提供

[03:28.97]

--></span>

</object>

</table>

</td></tr>

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

</table>

</td></tr>

</table>

</div>

</center>

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=0ii<eft.lengthii++)

{

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=0ii<this.inr.lengthii++)

{

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,"</font><font>") +"</font>"

var fall = lrcbc.getElementsByTagName("font")

for(var wi=0wi<fall.lengthwi++)

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

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

}

for(var ii=0ii<this.inr.length-1ii++)

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(tme<this.dts || tme>=this.dte)

{

var ii

for(ii=this.inr.length-1ii>=0 &&this.inr[ii].t[0]>tmeii--){}

if(ii<0) return

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

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

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

this.dte = (ii<this.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=0ki<this.ddh.length &&this.ddh[ki]<=tmeki++)

bbw += this.fjh[ki]

var kt = ki-1

var sc = ((ki<this.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(bbw>lrcbox.offsetWidth)

bbw = lrcbox.offsetWidth

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

}

this.retxt = function(i)

{

return (i<0 || i>=this.inr.length)?"":this.inr[i].n

}

this.print = function(txt)

{

lrcbox.innerText = txt

lrcbc.innerText = txt

}

this.print("www.aboutplayer.com")

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>

我前天刚自己编了一个最简化的同步歌词播放代码，比网上公布的都要简洁，与你一起分享下吧。

注：为了有更强的兼容性，我用php把lrc歌词中的换行符全换成了<br>，歌词中不要留又引号，如果你不处理，只要在下面代码中稍微改下拆分规则就行。

<head>

<!--

#LyricShow {

position:absolute

width:100%

height:350

color:#333333

font-size:12px

line-height:25px

text-align:center

overflow-y:auto

word-break: break-all

background-color:#FFFFFF

scrollBar-face-color:#0066CC/* 滑块 */

scrollBar-hightLight-color:#CCCCCC/* 高亮 */

scrollBar-3dLight-color:#CCCCCC/* 3维光线 */

scrollBar-darkshadow-color:#CCCCCC/* 暗影 */

scrollBar-shadow-color:#CCCCCC/* 阴影 */

scrollBar-arrow-color:#FFFFFF/* 箭头 */

scrollBar-track-color:#E4E4E4/* 滑道颜色 */

scrollBar-base-color:#FFFF99/* 主要颜色 */

}

-->

</style>

</head>

function ShowLyric(){//同步歌词播放由代张原创，如要转载，请保留作者版权。dzut@163.com

var LyricShow=document.getElementById("LyricShow")

var player=document.getElementById("player")

var lyric="[00:00.00]lrc歌词<br>[00:03.00]歌词..."

PlayerTime=player.controls.currentPositionString

if(PlayerTime==""){

PlayerTime="00:00"

FormatLyric(lyric,PlayerTime,'2')

}

FormatLyric(lyric,PlayerTime,'0')

setTimeout("ShowLyric()",500)

}

function FormatLyric(lrc,PlayerTime,id){

lrc3=""

lrc1=lrc.split("<br>")

len1=lrc1.length

for(i=0i<len1i++){

lrc2=lrc1[i].split("]")

len2=lrc2.length

if(len2>1){

lrctime=""

for(j=0j<(len2-1)j++){

lrctime=lrctime+lrc2[j]

}

lrcword=lrc2[len2-1]

x1=lrctime.indexOf(PlayerTime)+1

if(x1>0){

lrcword='<font color="#FF0000"><strong>'+lrcword+'</strong></font>'

ScrollLrc(i,len1)

id="1"

}

lrc3=lrc3+lrcword+"<br>"

}

//lrc=lrc3

if(id=="1"||id=="2"){

LyricShow.innerHTML=lrc3

}

//return lrc

}

function ScrollLrc(i,len){

var LyricShow=document.getElementById("LyricShow")

LyricShow.scrollTop=(LyricShow.scrollHeight)*(i/len)-(150)

}

</script>

<tr>

<tr>

<td height="27" background="images/bg_1.gif" class="Black12"><span class="Black12Bold">歌名：</span><a href="<?php echo $url?>" class="Blue12" target="_blank"><?php echo $title2?></a></td>

</tr>

<tr>

<td>

</object>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6156667.html

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

发表评论

评论列表（0条）