单曲播放器使用说明（习之）

芦笛悠扬zm 2019-06-26

展开全文

有同步歌词显示的单曲播放器

使用说明

与以往的mp3播放器不同，这是一款播放“音乐Flash”的单曲播放器，而且能显示歌曲的同步歌词。

所谓“音乐Flash”是习之自定义的一个名称，其实就是以最简单的Flash形式存在的一个歌曲，没有图像或动画。因为老小孩网站不能上传Mp3，但是可以上传Flash，那么这算是一个“曲线上传音乐”的无奈之举。现在介绍的这款单曲播放器就是播放这类“音乐Flash”的播放器，一个播放器只有一个固定的音乐，不能再从外面导入一个新的音乐。

习之在“背景音乐”板块里用的几乎都是这类单曲播放器，而现在这款播放器是为显示歌曲的同步歌词而特意制作的，在“邓丽君精选集”里试用，效果尚佳。

下面是一个实例：

播放器很简单，显示同步歌词的文字窗比较大、长，这样可以显示较大的文字和较长的词句。文字窗内有一条浅浅的竖条，这是“播放指针”，随音乐的播放它会渐渐右移。在播放状态时在其左或右点击，可以改变播放的起始时间。

下面是这款播放器的源代码：

在源代码里有这样一个属性设置：

flashVars = "s=1&r=1&bgN=7&bgC=c0e0ff"

这里 flashVars 是embed元素（标签）的一个属性，在双引号里的值是导入到Flash的变量集。

它的书写格式是：

flashVars = "变量1=值1&变量2=值2&变量3=值3......"

其中“变量n=值n”称为一个“值对”，值对与值对之间用特殊字符“&”连接（也可以说&字符是值对之间的分隔符），从而构成一个完整的字符串片段。

在本例中：

值对1： s=1 自动播放（s=0 手动播放）；

值对2： r=0 单次播放（r=1 循环播放， r >= 2 播放次数）；

值对3： bgN=7 这是播放器预置背景颜色的色号，可以选用1~16；

值对4： bgC=c0e0ff 这是自定义播放器的背景颜色，用16进制颜色码：RRGGBB。

为显示同步歌词，这款播放器的文字窗口特别大，因此播放器的“背景”只有外面小小的一圈。即使小，它也是播放器与博客的背景相接的部分，因此它的颜色关系到播放器放在博客背景上是否融合。为方便网友能简单地制作不同颜色的播放器，特地在flash内预设了16套播放器的颜色，每套有背景色、文字窗底色、文字色、数字色、按钮色等等。1~8是浅色的背景、深色的按钮和文字窗；9~16是深色背景、浅色的按钮和文字窗。这16套颜色在“邓丽君精选集”里，都已经出现过。

由于习之对颜色的搭配没有经验，而且老小孩网的博客有了顶图信纸后，背景颜色各式各样，为了网友的特殊需要，这个播放器的各部分的颜色还可以通过导入变量的方法单独进行设置。

它们是：（取值为16进制颜色码RRGGBB）。

bgC 上面已有介绍

btnC 按钮颜色

wbgC 文字窗口色

topC 同步歌词文字的覆盖色

bmC 同步歌词文字的底色

coreC 按钮内芯的颜色（指播放、暂停标识的颜色），当按钮为浅色时需要设置。

除了上面6个颜色外，背景色bg的透明度也可以设置：

bgA 设置值0~100 bgA=0 全透明；bgA=100 不透明；默认为100。

上面有那么多的变量可以设置，似乎很乱，但是通常情况，只要设置前三个变量：s、r、bgN。在设置好这三个变量后，觉得哪一个部位颜色不理想，就单独对这个部位进行设置，其余就不必设置了。而时间显示的数字颜色、播放指针的颜色不能单独设置，但是在flash内部，不同的背景色号，它们也是不同的，是与窗口背景色相配的。

颜色设置优先级的顺序是：单个颜色设置（如bgC等）、背景号bgN、Flash内部的默认设置。

附录：

下面是源代码的embed标签里通过flashVars进行参数传递的一些学习心得，供参考。

1》要向Flash传递参数，前提是这个Flash是允许接受外来的参数的，这是flash制作者在AS中特意开的口子，大部分Flash是没有的。这里说的“参数”一词，是习之的理解，因为这些参数（如s）,在Flash里被接收，成为主时间轴里的一个变量，因此它们应该称为“变量名”，为容易理解才称它为“参数”。

2》可以有两个方法向Flash传递参数。除了用flashVar属性（如上面的例子）外，还可以通过url导入，即在flash的文件名后面加“？”引导符，再加字符串片段（flashVars等号后面双引号内的内容）。当导入的参数少时尤为方便。如上面例子的源代码，可以改写成：

代码里的红字部分就是导入到flash内的参数。

3》值对之间的分隔符《&》，该字符的英文名ampersand，意思是“and”，因此常常读成and。在源代码里这是个特殊字符，因此正规写法是写它的“字符实体”。

字符《&》在源代码里的“字符实体”是《&》（字符实体是以《&》开头，《;》号结束。）。因此上述例子理应写成：

....../blog_20130426142427459324?s=1&r=0&bgN=7&bgC=c0e0ff"。

实际使用中写《&》和写《&》是等效的，因此我们不必理解得很深，在自己写代码时不妨就按简单的写，即只写一个《&》符。当查看别人的代码时就要能分清楚它们的不同了。

4》因为字符《#》也是特殊字符，通常在Flash的AS里的颜色码是“数字”，前面不能加《#》引导符的，而在html源代码里，十六进制RRGGBB颜色代码是必须加#引导符的。至于导入的颜色码究竟用什么数制，视不同的Flash而定。这个播放器采用十六进制数字RRGGBB，前面什么也不加，包括《#》或《0x》。

5》变量名的大小写不能错。导入的变量名，是Flash的制作者决定的，没有定规，但是对大小写是敏感的。如上面介绍的变量里《r=》不能写成《R=》；《bgC》不能写成《bgc》。百度的播放器，它的自动播放变量名是《autoStart》，中间的S是大写，不能写成《autostart》。

6》空格和代码分行的处理不能随意。几个值对用《&》字符连起来以后成为一个字符串片段，如果变量比较多，那么这个片段会很长。在书写时要注意中间不能任意加空格，书写时代码的分行也不能随意。最好是不加空格（特别注意等号两边），连续的书写不分行，待代码编辑器自动的分行。因为自己将它分行会多出一个“分行符”而出错，而编辑器自动分的行是“假性”分行，中间是没有分行符的。

上述一点学习心得，有不当之处，请朋友们指正。谢谢！