聊代码（第一二四集）同步歌词（一）单曲歌词单行静止不变色（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 改为小写，这样代码才可用。