思想碎片
Would you like to react to this message? Create an account in a few clicks or log in to continue.

用 同步歌词音画《情为知己痴》代码详解

向下

用 同步歌词音画《情为知己痴》代码详解   Empty 用 同步歌词音画《情为知己痴》代码详解

帖子  Admin 周日 一月 08, 2012 7:20 pm

用 同步歌词音画《情为知己痴》代码详解

2010-10-09 18:01:59| 分类: 博客代码 |字号 订阅
本文引用自平安如意《同步歌词音画《情为知己痴》代码详解》


引用

平安如意 的 同步歌词音画《情为知己痴》代码详解
同步歌词
<CENTER>
<OBJECT height=1 width=0
classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6><PARAM NAME="url"
VALUE="http://www.12tuan.com/img/xxzx/yinyue/wlqy.mp3"><PARAM
NAME="autostart" VALUE="5"><PARAM NAME="volume" VALUE="100"><PARAM NAME="enablecontextmenu"
VALUE="0"><PARAM NAME="enableerrordialogs" VALUE="0"></OBJECT></CENTER><SPAN id=lrcdata><!
[al:]
[offset:500]
[00:00.00]网络情缘
[00:04.52]演唱:侃侃
[00:08.16]歌词制作:平安如意
[00:10.22]网上一个你
[00:13.16]网上一个我
[00:16.11]网上你的温柔我就犯了错
[00:22.01]网上的情缘
[00:24.80]也轻轻的问我
[00:28.25]爱一场梦一场
[00:31.18]谁能躲得过
[00:35.64]*清秋红叶制作*
[00:38.81]网上一个你
[00:41.53]网上一个我
[00:44.47]网上我们没有过一句承诺
[00:50.58]点击你的名字
[00:53.84]发送我的快乐
[00:56.79]接收吧接收吧爱的花朵
[01:05.70]轻轻的告诉你我是真的爱过
[01:11.64]你曾经真真切切闯进我生活
[01:17.63]不见你的时候
[01:20.33]我情绪低落
[01:23.62]只有你能刷新我的寂寞
[01:32.97]轻轻的告诉你我是真的爱过
[01:38.95]你的哭你的笑深深牵动着我
[01:45.10]你总说这真真假假难以捉摸
[01:50.98]我喊着爱人呀
[01:54.34]别想太多
[01:58.73]*清秋红叶制作*
[02:00.52]轻轻的告诉你我是真的爱过
[02:06.21]你的哭你的笑是深深牵动着我
[02:12.35]你总说这真真假假难以捉摸
[02:18.45]我喊着爱人呀
[02:21.48]别想太多
[02:25.57]平安如意欢迎您的光临
--></SPAN>
<TABLE style="Z-INDEX: 250; LEFT: 440px; POSITION: absolute; TOP: 280px"
cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD align=middle><SPAN id=lrcbox
style="COLOR: red; HEIGHT: 30px"></SPAN></TD></TR>
<TR style="Z-INDEX: 6; POSITION: relative; TOP: -30px">
<TD noWrap>
<DIV id=lrcbc
style="OVERFLOW: hidden; WIDTH: 0px; COLOR: #ff00ff; HEIGHT: 40px"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<SCRIPT language=JavaScript>
ffbb=0;
lrcobj=new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr=[];
this.oTime=0;
this.dte=-1;

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;
}
}


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+)\Sad[\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.run=function(tme)
{
{
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.dte=(ii<this.inr.length-1)?this.inr[ii+1].t
[0]:aboutplayer.currentMedia.duration;
this.print(this.retxt(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);
}

this.retxt=function(i)
{
return(i<0 || i>=this.inr.length)?"":this.inr.n;
}

this.print=function(txt)
{
lrcbox.innerText=txt;
lrcbc.innerText=txt;
}
}

function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition+ffbb);
}
setTimeout("lrcrun()",10);
}
lrcrun();
</SCRIPT>

底部状态栏跑马灯文字显示代码

<SCRIPT language=JavaScript> <!--
ScrollSpeed = 250; // milliseconds between scrolls
ScrollChars = 2; // chars scrolled per time period
function SetupTicker() {
msg = "*^-^* 情为知己痴*^-^* ";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>


*^-^* 情为知己痴*^-^*可以替换成你自己喜欢的文字
禁止复制代码

<script language=JavaScript>
<!--

var message="^_^ 谢谢欣赏 ^_^";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>


^_^ 谢谢欣赏 ^_^
为浏览者想复制此贴单击右键时弹出的文字,请换上你自己喜欢的文字哦~~
此代码在遨游浏览器下不起任何作用,只是在IE浏览器下禁止复制的雕虫小技~~
浏览器显示的标题标志

<title>情为知己痴</title>

它不显示在浏览器窗口中,只显示在浏览器标题栏中。在起始标志(<TITLT>)和结束标志(</TITLE>)间,可以放入简述文档内容的标题。
比如此贴的“情为知己痴”,当然你也可以随便填写自己喜欢的文字,但要注意不要离题千里哦~~
css样式

{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #A1C3DF;
}
.bk {
border: thick dotted #60BEEF;
}
.STYLE1 {
color: #0000FF;
font-size: 16px;
}


其中:{margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;}
设置网页页面上、下、左、右相对位置,此贴设置为0

.bk {
border: thick dotted #60BEEF;
}
设置此贴插入图片边框的样式。


.STYLE1 {
color: #0000FF;
font-size: 16px;
}

设置页面文字样式
插入层代码

#Layer1 {
position:absolute;
width:921px;
height:484px;
z-index:1;
left: 37px;
top: 11px;
}


此贴利用层,叠加了红心升腾的透明flash,上述代码设定了层的相对位置,以及层的尺寸(即透明flash的尺寸)。
插入透明flash代码

<div >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="920" height="483">
<param name="movie" value="hx.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="hx.swf" width="920" height="483" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>

这就是插入红心透明flash的代码,不必解释了吧,一看就懂的。
插入歌曲的代码

<CENTER>
<OBJECT height=1 width=0
classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6><PARAM NAME="url"
VALUE="http://www.12tuan.com/img/xxzx/yinyue/wlqy.mp3"><PARAM
NAME="autostart" VALUE="5"><PARAM NAME="volume" VALUE="100"><PARAM NAME="enablecontextmenu"
VALUE="0"><PARAM NAME="enableerrordialogs" VALUE="0"></OBJECT></CENTER>


音画帖子要有画有音哦,上面的代码就是插入音乐的代码,本帖中插入的歌曲为《网络情缘》
带时间格式的歌词

<SPAN href="http://qqhy.2000y.net/" target=_blank>http://qqhy.2000y.net欢迎您的光临
--></SPAN>

插入了歌曲,如果想偷懒,到网上搜lrc去吧。
同步歌词的显示位置及文字颜色设置

<TABLE style="Z-INDEX: 250; LEFT: 440px; POSITION: absolute; TOP: 280px"
cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD align=middle><SPAN id=lrcbox
style="COLOR: red; HEIGHT: 30px"></SPAN></TD></TR>
<TR style="Z-INDEX: 6; POSITION: relative; TOP: -30px">
<TD noWrap>
<DIV id=lrcbc
style="OVERFLOW: hidden; WIDTH: 0px; COLOR: #ff00ff; HEIGHT:
40px"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


加了同步歌词,总得给歌词留一个显示的地方吧,你可以根据整个画面的整体布局,合理规划歌词的显示位置。同时根据页面文字及背景的颜色,设置一下歌词文字的显示颜色。

显示同步歌词的代码

<SCRIPT language=JavaScript>
ffbb=0;
lrcobj=new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr=[];
this.oTime=0;
this.dte=-1;

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;
}
}


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+)\Sad[\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.run=function(tme)
{
{
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.dte=(ii<this.inr.length-1)?this.inr[ii+1].t
[0]:aboutplayer.currentMedia.duration;
this.print(this.retxt(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);
}

this.retxt=function(i)
{
return(i<0 || i>=this.inr.length)?"":this.inr.n;
}

this.print=function(txt)
{
lrcbox.innerText=txt;
lrcbc.innerText=txt;
}
}

function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition+ffbb);
}
setTimeout("lrcrun()",10);
}
lrcrun();
</SCRIPT>

Admin
Admin

帖子数 : 147
注册日期 : 12-01-05

http://sxsp.999luntan.com

返回页首 向下

返回页首


 
您在这个论坛的权限:
不能在这个论坛回复主题