by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=568

一、前面的啰嗦

目前，绝大多数的音乐播放器都是flash实现的，例如Google的音乐播放，百度MP3，新浪乐库等。在HTML5未来临的时候，flash技术是最上佳的选择。本文将讲解一些flash音乐播放器相关的内容，不过不是讲怎么开发制作，而是如何在自己的站点上使用国内大型网站的flash音乐播放器，而且本文所涉及的音乐播放器是专指单音乐播放器，顾名思意就是一次只能播放一首歌的播放器，常用在博客日志系统中。本文讲展示三款单音乐播放器，分别来自新浪网，人人网还有开心网。

本文的示例音乐是陈琳的《雨爱》，最近挺热的一首歌曲，歌曲地址是：http://api.ning.com/files/1LRx…p4_/200912202458577.mp3，由于本页面同时又多个播放器，为了防止音乐混绕，所以歌曲默认是不播放的（新浪的播放器无默认播放与否的参数）。

二、新浪博客的音乐播放器

我们先来看看新浪博客的这个音乐播放器，这个播放器可以说是这三个播放器中功能最简单，技术含量最低，ui最差的一个播放器了，虽说新浪博客很牛叉，但是这个音乐播放器我打不及格。其没有循环播放以及自动播放（源代码已经写死了自动播放）的控制，没有直接调节进度的功能，静音的ui没有仔细设计，在切换时可以看到一点点的错位。更加无法容忍的是，就算功能如此简单，还是有bug——静音后，当歌曲第二次播放时又有声音了，静音失效。此播放器在IE下经常无法播放歌曲，至少在我的机子上是这样的。

<< 声音来自这里

代码相关

1、播放器的地址
此播放器地址如下：http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf，不保证以后地址会变换，所以您也可以从我的服务器上下载（右键-另存为）：http://www.zhangxinxu.com/study/flash/sina_music_player.swf。

2、相关的代码

<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="false" scale="showall" src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf" FlashVars="url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3" type="application/x-shockwave-flash"></embed>

注意到代码部分的FlashVars没，这个是用来给flash传参的，一种与flash的交互手段，传递的参数就是要播放的音乐的地址，所以如果您想更换歌曲只要将此mp3歌曲地址换掉就可以了。例如我们想要用此播放器放一首张靓颖的《我相信》，只要将mp3地址替换为http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/ae874d7db9ad496c976252db66902723.mp3就可以了。结果就是：

<embed width="238" height="24" name="FlashVars" wmode="opaque" play="true" loop="false" scale="showall" src="http://simg.sinajs.cn/blog7common/swf/MusicPlayer_nocall.swf" FlashVars="url=http://mp3.m.mop.com/mp3/new_mp3/2009/12/22/ae874d7db9ad496c976252db66902723.mp3" type="application/x-shockwave-flash"></embed>

3、获取代码
您可以直接复制上面的代码，或是通过下面的动态生成。

输入mp3地址：(仅支持MP3格式)

三、人人网日志音乐播放器

人人网的音乐播放器从界面上看就比较专业，质感很细腻，适当的圆角。功能上来讲，也不赖，可以控制是否自动播放，可以直接调播放的进度。没有遇到浏览器不能播放的情况。

代码相关

1、播放器的地址
此播放器在人人网上的地址是：http://s.xnimg.cn//swf/player.swf，您可以下载到本地直接使用。或是使用我服务器上存放的地址：http://www.zhangxinxu.com/study/flash/renren_music_player.swf

2、相关代码
例如本例子完整代码如下：

<embed width="360" height="30" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="sameDomain" bgcolor="#ffffff" scale="noscale" quality="high" menu="false" loop="false" wmode="transparent" src="http://s.xnimg.cn//swf/player.swf?url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&Autoplay=0" />

上面代码部分的MP3地址参数直接写在的播放器地址的后面，您也可以使用FlashVars属性设置，效果一样的。其中的参数有两个一个是MP3地址 – “url=”，另外一个参数是”Autoplay”，用以表示是否自动播放，0表示不自动播放，1表示自动播放。

3、获取代码
如果您想更换MP3地址，复制上面的代码，然后替换URL就可以，或是通过下面的脚本动态生成。

输入mp3地址：(仅支持MP3格式)

自动播放  

四、开心网日志音乐播放器

开心网与人人可以说是竞争对手，因为网站性质，目标群体有很多的一致之处，就连播放器也差不多这种差不多不是在界面上，而是在功能上。例如开心网的这个播放器也是可以控制是否自动播放，可以调节音乐的进度，连参数也差不多一致。您可以点击下面的播放按钮体验一下。

代码相关

1、播放器地址
此播放器地址如下：http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf，您可以下载到本地直接使用。或是使用我服务器上存放的地址：http://www.zhangxinxu.com/study/flash/kaixin_music_player.swf

2、相关代码
例如本例子代码如下：

<embed width="365" height="50" align="middle" flashvars="url=http://api.ning.com/files/1LRxqH0rCPkqtNb398Zzc9TdXGyDRNwAqBrO7e63gp4_/200912202458577.mp3&autoplay=0" src="http://img.kaixin001.com.cn/swf/diary/mp3player-3.swf" wmode="transparent" loop="false" menu="false" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

外部参数有两个，与上面的人人网的一致，一个是MP3地址，另外一个是是否自动播放。前者参数名为url，后面直接跟MP3路径就好，后者参数名为autoplay，后面值为1表示自动播放，0表示不是自动播放。例如：flashvars="url=http://zhangxinxu.com/m...c/爱情.mp3&autoplay=1"就表示自动播放一个名为”爱情”的MP3文件。

3、获取代码
如果您想更换MP3地址，复制上面的代码，然后替换URL就可以，或是通过下面的脚本动态生成。

输入mp3地址：(仅支持MP3格式)

自动播放  

五、最后点内容

我年初也写过一些简单的音乐播放器，但不知扔哪儿了，算了，方正做个这样的播放器不困难。然后，还有一点，文章内容部分有些地方自己没有怎么测试，可能会有错误，如果您发现了相关的问题，欢迎指正，不甚感谢。

六、关于版权

本文介绍的一些音乐播放器都是正规公司独立开发的东西，均含有版权，如果您想使用切勿用于商业用途，务必注明原出处。本文旨在介绍这几个播发器，仅用于学习与交流，一些版权的问题本人概不负责。特此声明。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=568

（本篇完）