分享
 
 
 

网页播放技术的歌词同步

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

WMP 与 Real 既有各自专用的歌词表现形式,又有两者都通用的歌词表现形式。WMP 专用的歌词表现形式是通过 *.SMI 文件实现的,Real 专用的歌词表现形式是通过 *.RT 文件实现的,两者通用的歌词表现形式为 *.LRC 文件。

SMI 歌词文件

请点播放键观看效果(有个缓冲过程,大家要等待片刻)。SMI 文件有专门的制作软件,非常方便,方法后面详谈。可实现歌词的单行、多行及卡拉OK等特殊效果。SMI 歌词实际是利用 WMP 的 Closed Caption 属性实现的。

代码如下:

<OBJECT ID="aboutplayer" CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height=150 width=200><param name="UIMode" value="none"></OBJECT>

<table height=100 width=200 border=3 bordercolor=blue>

<tr align=center>

<td bgcolor=white><font color=olive size=2>SMI 演示</font></td>

</tr>

<tr height=75>

<td bgcolor="green"><div id=CapText></div></td>

</tr>

</table>

<table width=200>

<tr>

<td align=center><INPUT TYPE="BUTTON" VALUE="Play" OnClick="Play()"></td>

<td align=center><INPUT TYPE="BUTTON" VALUE="Stop" OnClick="Stop()"></td>

</tr>

</table>

<SCRIPT>

function Play()

{

aboutplayer.closedCaption.CaptioningID = "CapText";

aboutplayer.closedCaption.SAMIFileName = "http://lrc.aboutplayer.com/goodbye.smi";

aboutplayer.URL = "http://www.shijiren.net/wma/g00146001/g0014600101.wma";

aboutplayer.controls.play();

}

function Stop()

{

aboutplayer.controls.stop();

}

</SCRIPT>

问题的关键就是下面三句:

aboutplayer.closedCaption.CaptioningID = "CapText";

// 网页上显示歌词的位置 ID

aboutplayer.closedCaption.SAMIFileName = http://lrc.aboutplayer.com/goodbye.smi;

// SMI 歌词文件地址

aboutplayer.URL = http://www.shijiren.net/wma/g00146001/g0014600101.wma;

// 媒体文件地址

放在 aboutplayer.controls.play(); 的前面。其中 SMI 文件地址最好用绝对地址(随媒体文件地址是绝对、相对而变化)。若媒体文件与 SMI 文件通名同路径,则 SMI 文件地址可省略不写。

上面只是单曲歌词播放的实例,关于 SMI 歌词连续播放的经典版本请参阅谱乐制作的 BBSVisual For SMI

RT 歌词文件

请点播放键观看效果。RT 歌词文件既可逐行同步,也可逐字同步,下面就是逐字同步的演示。

代码如下:

<window bgcolor="black" duration="225" width="142" height="95">

<center>

<font charset="gb2312" color="red">

<strong>

<b>

<time begin=00:00:00/><font size="2">泪的小雨</font>

<font size="1">

<p>演唱:邓丽君

<p><font color="green">(谱乐视听)</font>

<p><font color="red">倾情制作

<time begin=00:23.15/><clear/>分<time begin=00:23.55/>不<time begin=00:23.90/>出<time begin=00:24.30/>是<time begin=00:24.80/>泪<time begin=00:25.40/>是<time begin=00:26.10/>雨

<time begin=00:28.80/><p>泪<time begin=00:29.15/>和<time begin=00:29.50/>雨<time begin=00:29.90/>忆<time begin=00:30.36/>起<time begin=00:30.95/>了<time begin=00:31.70/>你

<time begin=00:34.55/><p>忆<time begin=00:34.85/>起<time begin=00:35.40/>你<time begin=00:36.10/>雨<time begin=00:36.40/>中<time begin=00:36.90/>分<time begin=00:37.45/>离

<time begin=00:38.70/><p>泪<time begin=00:39.70/>珠<time begin=00:40.00/>儿<time begin=00:41.30/>洒<time begin=00:42.05/>满<time begin=00:43.00/>地

<time begin=00:45.25/><clear/>哭<time begin=00:45.70/>泣<time begin=00:46.60/>你<time begin=00:47.15/>哭<time begin=00:47.63/>泣<time begin=00:47.90/>为<time begin=00:48.20/>了<time begin=00:48.50/>分<time begin=00:48.80/>离

<time begin=00:49.55/><p>分<time begin=00:50.00/>离<time begin=00:50.85/>分<time begin=00:51.10/>离<time begin=00:51.32/>后<time begin=00:51.60/>再<time begin=00:51.90/>相<time begin=00:52.40/>见<time begin=00:52.75/>不<time begin=00:53.00/>易

<time begin=00:54.10/><p>我<time begin=00:54.70/>重<time begin=00:54.95/>把<time begin=00:55.25/><p>你<time begin=00:55.70/>的<time begin=00:56.00/>爱<time begin=00:56.35/>情<time begin=00:56.65/>藏<time begin=00:57.10/>在<time begin=00:57.40/>我<time begin=00:57.75/>心<time begin=00:58.05/>底

<time begin=00:58.80/><clear/>啊<time begin=01:01.75>藏<time begin=01:02.05>在<time begin=01:02.40>我<time begin=01:02.70>心<time begin=01:03.30>底

<time begin=01:04.55/><p>就<time begin=01:05.07/>好<time begin=01:05.50/>像<time begin=01:06.35/><time begin=01:06.63/>藏<time begin=01:07.30/>起<time begin=01:08.00/>回<time begin=01:08.77/>忆

<time begin=01:23.00/><p>我<time begin=01:23.45/>喜<time begin=01:23.80/>欢<time begin=01:24.15/>绵<time begin=01:24.65/>绵<time begin=01:25.25/>细<time begin=01:25.87/>雨

<time begin=01:28.80/><p>细<time begin=01:29.20/>雨<time begin=01:29.45/>里<time begin=01:29.80/>忆<time begin=01:30.35/>起<time begin=01:31.00/>了<time begin=01:31.65/>你

<time begin=01:34.50/><clear/>忆<time begin=01:34.80/>起<time begin=01:35.35/>你<time begin=01:36.05/>在<time begin=01:36.35/>我<time begin=01:36.85/>怀<time begin=01:37.40/>里

<time begin=01:38.80/><p>泪<time begin=01:39.75/>珠<time begin=01:40.05/>儿<time begin=01:41.50/>洒<time begin=01:42.10/>满<time begin=01:43.15/>地

<time begin=01:45.25/><p>哭<time begin=01:45.80/>泣<time begin=01:46.70/>你<time begin=01:47.25/>哭<time begin=01:47.69/>泣<time begin=01:48.00/>为<time begin=01:48.25/>了<time begin=01:48.50/>分<time begin=01:48.85/>离

<time begin=01:49.65/><p>分<time begin=01:50.15/>离<time begin=01:51.10/>分<time begin=01:51.35/>离<time begin=01:51.60/>后<time begin=01:51.85/>再<time begin=01:52.10/>相<time begin=01:52.65/>见<time begin=01:52.95/>不<time begin=01:53.25/>易

<time begin=01:54.25/><clear/>我<time begin=01:54.85/>重<time begin=01:55.15/>把

<time begin=01:55.45/><p>你<time begin=01:55.85/>的<time begin=01:56.10/>影<time begin=01:56.52/>子<time begin=01:56.80/>藏<time begin=01:57.30/>在<time begin=01:57.55/>睡<time begin=01:57.85/>梦<time begin=01:58.35/>里

<time begin=01:59.05/><p>啊<time begin=02:01.95/>藏<time begin=02:02.30/>在<time begin=02:02.65/>睡<time begin=02:03.00/>梦<time begin=02:03.50/>里

<time begin=02:04.90/><p>就<time begin=02:05.40/>好<time begin=02:05.80/>像<time begin=02:07.10/>藏<time begin=02:07.60/>起<time begin=02:08.30/>回<time begin=02:09.23/>忆

<time begin=02:35.50/><clear/>分<time begin=02:35.85/>不<time begin=02:36.15/>出<time begin=02:36.55/>是<time begin=02:37.10/>泪<time begin=02:37.70/>是<time begin=02:38.45/>雨

<time begin=02:41.30/><p>泪<time begin=02:41.65/>和<time begin=02:41.95/>雨<time begin=02:42.25/>忆<time begin=02:42.85/>起<time begin=02:43.45/>了<time begin=02:44.15/>你

<time begin=02:47.10/><p>忆<time begin=02:47.40/>起<time begin=02:47.95/>你<time begin=02:48.55/>雨<time begin=02:48.85/>中<time begin=02:49.40/>分<time begin=02:50.00/>离

<time begin=02:51.40/><p>泪<time begin=02:52.30/>珠<time begin=02:52.65/>儿<time begin=02:53.90/>洒<time begin=02:54.65/>满<time begin=02:55.57/>地

<time begin=02:57.80/><clear/>哭<time begin=02:58.30/>泣<time begin=02:59.20/>你<time begin=02:59.70/>哭<time begin=03:00.30/>泣<time begin=03:00.60/>为<time begin=03:00.95/>了<time begin=03:01.20/>分<time begin=03:01.50/>离

<time begin=03:02.20/><p>分<time begin=03:02.75/>离<time begin=03:03.55/>分<time begin=03:03.80/>离<time begin=03:04.05/>后<time begin=03:04.30/>再<time begin=03:04.60/>相<time begin=03:05.20/>见<time begin=03:05.50/>不<time begin=03:05.80/>易

<time begin=03:06.85/><p>我<time begin=03:07.40/>重<time begin=03:07.60/>把

<time begin=03:07.90/><p>你<time begin=03:08.40/>的<time begin=03:08.65/>眼<time begin=03:09.05/>泪<time begin=03:09.40/>藏<time begin=03:09.80/>在<time begin=03:10.00/>寂<time begin=03:10.30/>寞<time begin=03:10.75/>里

<time begin=03:11.55/><clear/>啊<time begin=03:14.45/>藏<time begin=03:14.80/>在<time begin=03:15.10/>寂<time begin=03:15.40/>寞<time begin=03:15.90/>里

<time begin=03:17.35/><p>就<time begin=03:17.95/>好<time begin=03:18.30/>像<time begin=03:19.60/>藏<time begin=03:20.10/>起<time begin=03:20.80/>回<time begin=03:21.73/>忆</font>

</font>

</b>

</strong>

</font>

</center>

</window>

这种方式的歌词同步谱乐称之为“精确制导”,即卡拉OK效果,逐字出现的时间与媒体播放精确同步。“网上卡拉OK”为谱乐首先创意,并实现了多种表现形式。

LRC 歌词文件

LRC 歌词中也能实现“精确制导”,具体效果参阅 http://aboutplayer.com/bbsvisual++,可“逐字变色”,感觉非常爽。但这种“精确制导”的歌词文件制作非常费时费力,不便于推广应用。为此,谱乐研究出了一种网页能自动“逐字变色”的播放器 BBSVisual。演示地址:http://qq.aboutplayer.com

LRC 歌词作为一种通用的歌词文件,使用非常广泛,网上很多地方提供下载(谱乐歌词搜索与下载 http://lrc.aboutplayer.com)。下面是歌词文件“潘越云 - 野百合也有春天.lrc”的内容:

[ti:野百合也有春天] // 歌曲名

[ar:潘越云] // 演唱者

[al:唯一] // 专辑名

[la:zh] // 语言类别

[by:谱乐] // 歌词编制人

[offset:500]  

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有