聊代码(第一二四集)同步歌词(一)单曲歌词单行静止不变色(A)
朋友们都喜欢同步歌词,同步歌词不仅让人听到歌声,还能清楚地看到唱的是什么内容。并且,同步歌词还会给画面添加动感,确实好。但如果同步歌词老是以一种面貌出现,千篇一律,也会形同嚼蜡,让人兴味索然。从本集开始,我们就讨论一下同步歌词字幕的几种类型。从颜色上说,有变颜色的和不变颜色的;从移动与否来说,有移动的和不移动的;移动又分为上下纵向移动和左右横向移动;从文字显现方式来说,有拉幕式逐字显现的和全句文字同时显现的,以及变化透明度逐渐显现的;从字幕文字排列来说,有横式排列和竖式排列;从字幕行数来说,有单行,双行和多行;从同步内容来说,除了同步歌词之外,还有伴随同步图片以及附有文字说明的;从控件情况来说,有带控件的和不带控件的;从操作上来说,有无须任何设置自动播放的,也有默认手动播放的。把css样式应用于同步歌词,同步歌词就成了文字动画,这就大大丰富了同步歌词的动态款式。不过,我要强调的是,动作不宜过快过杂,狂舞炫目的文字并不是我们喜欢的效果。至于画面,如果引入css样式,就更是千变万化了,但画面的设计不是我们现在讨论的内容,我们只聊同步歌词字幕。
本集就展示同步歌词的第一种类型:静止歌词,不变色。这是最简单的单行同步歌词,之所以说它“最简单”,是从它的结构与包含的内容说的,从代码中,朋友们会清楚地看到,应该有而且必须有的都有,可以有也可以没有的都没有,这难道不是最简单的吗?网址是 http://dashan.link/zj/dqyhgc.swf 。详情在下面的代码解析中细谈。
同步歌词代码:
<div style="MARGIN-TOP:-720px; MARGIN-LEFT:-150px"> <embed flashvars="mp3=http://other.web.rs01.sycdn.kuwo.cn/resource/n2/83/
30/ 4235534519.mp3&Amp;mp3n=《大海》&Amp;lrc=
[00:00.80]《大海》
[00:08.00]作词 : 陈大力
[00:15.00]作曲 : 陈大力/陈秀男
[00:23.00]演唱 : 王二妮/斯琴格日乐
[00:47.22]从那遥远海边
[00:49.33]渐渐消失的你
[00:51.85]本来模糊的脸
[00:54.35]竟然渐渐清晰
[00:56.88]想要说些什么
[00:59.03]又不知从何说起
[01:01.85]只有把它放在心底
[01:06.85][02:34.64]茫然走在海边
[01:09.03][02:36.87]看那潮来潮去
[01:11.99][02:39.99]徒劳无功想把
[01:14.03][02:41.08]每朵浪花记清
[01:16.99][02:44.31]想要说声爱你
[01:19.26][02:46.76]却被吹散在风里
[01:21.82][02:49.22]猛然回头 你在那里
[01:26.92][01:46.94][02:54.44][03:14.48][03:39.48][03:59.99]如果大海能够
[01:29.03][02:56.08][03:41.76]唤回曾经的爱
[01:31.99][02:59.99][03:44.99]就让我用一生等待
[01:36.81][03:04.21][03:49.39]如果深情往事
[01:39.25][03:06.73][03:51.07]你已不再留恋
[01:41.83][03:09.28][03:54.33]就让它随风飘远
[01:49.31][03:16.76][04:01.84]带走我的哀愁
[01:51.08][03:19.31][04:04.32]就像带走每条河流
[01:56.72][03:24.31][04:09.28]所有受过的伤
[01:59.25][03:26.73][04:11.74]所有流过的泪
[02:01.78][03:29.23][04:14.29]我的爱
[02:06.00][03:33.23][04:18.44]请全部带走
[04:24.00]谢谢欣赏
&Amp;gcys=ff0000&Amp;gcxt=1&Amp;gecix=-150&Amp;geciy=360" height="730" quality="high" src=" http://dashan.link/zj/dqyhgc.swf" type="application/x-shockwave-flash" width="600" wmode="transparent"></embed></div>
代码解析:
虽然,定位标签<div style="MARGIN-TOP:-720px; MARGIN-LEFT:-150px">不属于同步歌词代码,但只要是用到同步歌词,就少不了它,它是给字幕定位的。
只有在<embed与</embed>之间的代码才称得上是同步歌词代码。其中的内容统统包含在 flashvars=(参数)中。为方便学习掌握起见,我们把这些参数分作四个部分,并用不同颜色将其区别。
第一部分,包括:mp3=歌曲地址;mp3b=备份歌曲地址(可以没有);mp3n=歌曲名称。
第二部分,包括:lrc=[ti:歌曲名称][ar:歌手名称][al:专辑名称] [by:词曲作者](这四个标识标签内容不在页面显示,亦可不设);主要包括的是时间轴,例如:[01:41.83],其含义是(分数:秒数.毫秒数),在时间轴后面是歌词(还可以添加同步显现的图片地址)。歌曲里重复出现的句子,可以把不同的时间轴放在一起。例如:[01:29.03][02:56.08][03:41.76]唤回曾经的爱
第三部分,包括:歌词文字的各种属性和文字的横向定位 gecix=-150 纵向定位 geciy=660 以及字幕宽高范围等。在本同步歌词中,如果不设置文字属性,就会取默认值:字体(宋体)、字色(白色)、字号(16)。为了说清问题,我还是设置了一个文字倾斜属性 gcxt=1 和一个文字颜色属性gcys=ff0000,所以文字是倾斜的,是红色的。
第四部分:决定歌词字幕样式取决于第四部分,缩小点范围说,取决于网址 src=" http://dashan.link/zj/dqyhgc.swf ,使用不同的网址,就会有不同样式的歌词字幕,相应的一些属性设置也会不同,我会把各网址陆续介绍给朋友们。
最后,我要提醒朋友们,如果你复制我上面的代码(而不是源码),一定要进行两个地方的修改:一、把尖角符号改为英文尖角引号。二。把参数相隔代码 Amp; 中的大写 A 改为小写,这样代码才可用。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。