html+js的lrc歌词同步播放器

<html>
<head>
<title>lrc歌词同步播放器</title>
<style>
body, td { font-family: 宋体; font-size: 9pt; }
#bkk { border: #9999FF 1px dotted; }
#lrcollbox td , #lrcollbox font { font-family: 黑体; font-size: 15pt; }
.kong { filter: Glow(color=#0066FF,strength=4) }
#lrcoll td { color:#66CC99 }
#lrcbox { color:#FFFFFF }
#lrcbc { color:#99CCFF }
#lrcxx { color:#FFFF00 }
#lrcwt1,#lrcwt5 { filter: alpha(opacity=100) }
</style>
<script language="JavaScript">
/*
=====================================================================
程序名称：lrc歌词播放（完美版）
程序件者：海浪
发行网站：http://kongjianzhan.126.com
作者信箱：xuhotao@163.com
制作日期：3005年09月12日
说明：本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件，
现提取出来加以改进。本程序任何人都可以使用，但无论您转载或
对本程序作任何修改、美化、翻译等工作，请您*必须*保留此段版
权宣告的内容。
=====================================================================
*/
// 为了兼容 IE5.0 结果好多正则的语法和处理方式都不能用，所以代码效率不是最高，郁闷。
function lrcClass(tt) //LRC歌词处理类
{
this.gsh="歌手:~1~\n曲名:~2~\n专辑:~3~\n编者:~4~";
this.inr = []; //行
this.oTime = 0; //余补时间
this.hailang;
this.dts = -1; //当前行显示的s
this.dte = -1; //当前行显示的e
this.dlt = -1; //当前行
this.ddh; //当前行数据
this.fjh;
this.haohaiplay;
this.oceanx;
this.cnane;
//以上几个属性是为了判断是否还在上次显示的时间范围，以减少循环次数
if(/\[offset\:(\-?\d+)\]/i.test(tt)) //取offset余补时间
this.oTime = RegExp.$1/1000;
this.gsh = this.gsh.replace("~1~",(/\[ar:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~2~",(/\[ti:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~3~",(/\[al:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~4~",(/\[by:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
lrcxx.innerText = this.gsh;
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; ii<eft.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; ii<this.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,"</font><font>") +" </font>";
var fall = lrcbc.getElementsByTagName("font");
for(var wi=0; wi<fall.length; wi++)
this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
this.inr[ii].n = lrcbc.innerText;
}
this.print("");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcbc.style.width = 0;
}
lrcClass.prototype.run = function()
{
try {
if(this.oceanx==0)
this.runing(this.haohaiplay.controls.currentPosition, this.haohaiplay.currentMedia.duration);
else
this.runing(this.haohaiplay.GetPosition()/1000, this.haohaiplay.GetLength()/1000);
} catch(hh){}
}
lrcClass.prototype.runing = function(tme, plen)
{
if(tme<this.dts || tme>=this.dte)
{
var ii;
for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
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]:plen;
lrcwt1.innerText = this.retxt(ii-3);
lrcwt2.innerText = this.retxt(ii-2);
lrcwt3.innerText = this.retxt(ii-1);
lrcwt4.innerText = this.retxt(ii+1);
lrcwt5.innerText = this.retxt(ii+2);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(this.hailang);
this.golrcoll(0);
}
this.dlt = ii;
}
var bbw = 0;
var ki;
for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)
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);
}
lrcClass.prototype.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr[i].n;
}
lrcClass.prototype.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}
lrcClass.prototype.golrcoll = function(s)
{
lrcoll.style.top = 25-(s++)*5;
lrcwt1.filters.alpha.opacity = 90-s*18;
lrcwt5.filters.alpha.opacity = s*18+10;
if(s<=5)
this.hailang = setTimeout(this.cnane+".golrcoll("+s+")",120);
}

var lrcobj;
function play()
{
var m = lrcdata.innerHTML.slice(4,-3);
lrcobj = new lrcClass(m);
lrcobj.cnane = "lrcobj";
lrcobj.haohaiplay = mediaPlayerObj;
lrcobj.oceanx = 0;
//0为使用 Media Player 控件，1为使用 Real Player 控件
setInterval("lrcobj.run();",100);
}
</script>
</head>
<body bgcolor="#000000" onLoad="play()">
<script language="javascript" type="text/javascript" src="language.js"></script>
<span id="lrcdata"><!--
[ti:心经梵唱]
[ar:未知歌手]
[al:未知专辑]
[by:极乐净土夫]
[offset:-300]
[00:00.77]般若波罗蜜多心经
[00:07.77]
[00:10.00]梵唱音译
[00:16.00]
[00:19.77]极乐净土夫敬上
[00:24.77]
[00:28.77]http://www.jljtf.cn/
[00:32.77]
[00:39.77]
[00:45.77].... ....
[00:52.90]阿利亚哇罗吉帖梭啦
[00:57.00]菩提萨埵哇甘比然伯拉芝泥
[01:00.50]亚巴拉密打查哩庵查拉玛诺
[01:04.90]唯亚哇罗吉帝斯玛
[01:07.80]般扎斯干达阿萨打斯查
[01:11.80]梭巴哇循泥庵巴夏啼斯玛
[01:15.80]一哈莎哩布特拉鲁伴循泥庵
[01:19.07]循泥亚打一哇鲁伴
[01:22.30]
[01:23.50]鲁巴呐卫打循泥亚打循泥亚打亚哪卫打洒鲁伴
[01:30.77]雅鲁伴洒循泥亚打雅循泥亚打洒鲁伴
[01:36.90]一哇庵一哇唯达哪
[01:40.80]三泥亚三斯咯啦唯泥亚南
[01:44.95]
[01:44.98]一哈沙哩布特拉洒诺哇大诺玛
[01:48.30]循泥亚打喇迦哪
[01:51.10]阿奴巴哪阿泥鲁达
[01:54.90]阿玛啦阿唯玛啦阿奴哪阿巴哩不哪
[02:00.80]
[02:00.90]他斯抹莎哩布特啦循泥亚打亚庵哪鲁伴
[02:05.80]哪唯达，
[02:07.98]哪三泥亚哪三斯咯啦哪唯泥亚南
[02:13.90]
[02:14.00]哪扎素斯罗特啦怒啦哪济哇
[02:17.88]卡呀玛哪洒哪鲁伴萨布达干
[02:21.80]达乐洒斯巴打唯亚大诺玛
[02:25.30]哪扎朔达笃呀瓦哪
[02:29.00]玛诺唯泥亚南达笃
[02:31.60]哪哪唯第亚
[02:33.79]哪哪唯第亚家哟
[02:35.80]呀瓦哪洽啦玛啦南哪洽啦玛啦南家哟
[02:41.60]那嘟卡洒目达亚泥罗达玛嘎
[02:45.90]
[02:45.97]哪泥亚南
[02:47.00]哪怕啦啼
[02:47.99]哪比洒玛亚
[02:49.66]他斯抹哪伯啦啼笃佳菩提萨笃哇南
[02:53.70]伯啦之泥啊巴啦密淡阿斯哩第亚唯哈啦第亚
[02:57.50]积打阿哇啦哪积打阿哇啦哪
[03:01.00]哪期第笃玛哪特啦斯都
[03:03.90]唯吧哩亚洒阿第咯然打
[03:07.39]泥斯打泥哇南
[03:10.10]
[03:10.20]啼哩亚笃哇唯亚哇斯第打
[03:13.00]洒诺哇菩达伯拉芝泥亚吧啦密淡
[03:16.90]斯哩地亚阿奴打啦三雅三菩顶阿比三菩达
[03:24.00]他斯抹泥亚打唯庵伯啦芝泥亚吧啦密打
[03:29.90]玛哈曼特啦
[03:31.00]玛哈唯第亚曼特啦
[03:32.98]阿奴打啦曼特啦
[03:34.99]阿洒玛洒玛啼曼特啦
[03:38:88]洒哇嘟卡伯啦莎玛都萨依庵阿弥啼亚笃哇
[03:46.00]伯啦芝泥亚吧啦密打姆卡曼热啦打第亚他
[03:52.30]嘎帖嘎帖
[03:52.90]吧啦嘎帖
[03:53.70]吧啦三嘎帖
[03:55.30]菩提梭哈
[04:00.00]
[04:01.00]般若波罗蜜多心经
[04:05.00]梵唱版
[04:07.00]本歌词为音译仅供参考
[04:12.20]歌词制作：极乐净土夫
[04:15.98]QQ:9656998
[04:20.00]E-mail:tuantuanyuanyuan@hotmail.com
[04:24.50]愿我们成为朋友，共同进步，精进念佛！
[04:31.00]http://www.jljtf.cn/
[04:39.00]
[04:46.00]阿弥陀佛！
[04:51.00]
[04:52.00]
[04:53.00]The end
[04:56.00]

--></span>
<center>
<table>
<tr>
<td width="400" height="300">
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mediaPlayerObj"
width="400" height="300">
<param name="url" value="佛教音乐-梵语心经---般若波罗密(超好听）.mp3">
<param name="rate" value="1">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="playCount" value="1">
<param name="autoStart" value="-1">
<param name="volume" value="100">
<param name="currentMarker" value="0">
<param name="invokeURLs" value="-1">
<param name="stretchToFit" value="-1">
<param name="windowlessVideo" value="0">
<param name="enabled" value="-1">
<param name="enableContextMenu" value="0">
<param name="fullScreen" value="0">
<param name="enableErrorDialogs" value="0">
</object>

</td>
<td width="180" height="300" id="lrcxx"></td>
</tr>
</table>
<div id="bkk" style="width:700;">
<div id="lrcollbox" style="overflow:hidden; height:210; width:100%;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: 30px;">
<tr><td nowrap height="30" align="center" id="lrcwt1"></td></tr>
<tr><td nowrap height="30" align="center" id="lrcwt2"></td></tr>
<tr><td nowrap height="30" align="center" id="lrcwt3"></td></tr>
<tr><td nowrap height="30" align="center" class="kong"><table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="30"><span id="lrcbox" style="width:0;"></span></td></tr>
<tr style="position:relative; top: -30px; z-index:6;"><td nowrap height="30"><span id="lrcbc" style="overflow:hidden; width:0;"></span></td>
</tr>
</table></td></tr>
<tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt4"></td></tr>
<tr style="position:relative; top: -30px;"><td nowrap height="30" align="center" id="lrcwt5"></td></tr>
</table>
</div>
</div>
</center>
</body>
</html>

html+js的lrc歌词同步播放器相关推荐

html js音乐歌词滚动,如何用html+js实现音乐歌词同步播放器
html> 随便听听 var playlist=[]; var bglist=[ "http://img04.taobaocdn.com/imgextra/i4/1655943686/ ...
HTML5实践之歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
php 歌词同步,HTML5实践之歌词同步播放器的示例代码分享
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
《新lrc播放器2》-iPhone上可以显示lrc歌词的播放器可以在播放mp3文件时显示lrc文件中的歌词的播放器
https://apps.apple.com/cn/app/%E6%96%B0lrc%E6%92%AD%E6%94%BE%E5%99%A82/id1535214306 以前,在iPhone上播放lrc ...
android 本地lrc 歌词同步,android 音乐播放器-------歌词同步 lrc
lrc格式 : [al:这首歌所在的唱片集 ] [ar:歌词作者 ] [by:本LRC文件的创建者 ] [offset:+/- 以毫秒为单位整体时间戳调整,+增加,-减小 ] [re:创建此LRC文件 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
js实现音频歌词同步
前言之前通过js实现音频.视频播放,此文是实现音频与歌词同步播放的实现,主要是用于学习实现思想,本文需要想要了解的知识点如下: 如何实现音频与歌词同步? 如何改变浏览器默认的滚动条样式? 实现此文 ...
mysql ubb html_UBB中轻松实现歌词同步播放_html
Windows Media Player 格式: 1.[wmp=http://homepage.yesky.com/a.wmv]歌词内容[/wmp] 2.[wmp=http://homepage.ye ...

html+js的lrc歌词同步播放器

html+js的lrc歌词同步播放器相关推荐

最新文章

热门文章