最近在优化毕业设计时，突然想起当收到聊天信息时，没有通知提醒的声音，所以在网上找了一些相关的播放声音的插件，由于SWFObject相当轻量化（只有10K），而且实现起来还是挺方便的，所以决定使用SWFObject.js 来实现这个小功能。
一、准备工作
1. 下载 swfobject2.2.zip
2. 下载一个能播放mp3格式消息声的swf文件，我们接下来的主要工作是控制这个swf文件来播放消息音乐。
别急，以上两个文件包 在文章结尾附下载 
二、开始
根据官方网站上介绍，使用SWFObject有两种方法可以插入flash文件到网页上。（第一种方法只略作介绍）
第一种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject - step 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.115", "expressInstall.swf"); </script> </head> <body> <div> <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html>
该方法首先要在网页文件中写好object标签及相关参数，然后在页面载入时调用 swfobject.registerObject 注册该对象。虽然这种方法能获得较好的嵌入flash文件的性能，但由于需要事先写好<object>这段代码，对于实现播放消息通知声音这个小功能来说，没有太大的性能需求，这里只略作介绍。
第二种方法：
先放上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SwfObject2.2Demo</title> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = { wmode: "transparent" }; var attributes = {}; swfobject.embedSWF("sound.swf", "sound", "1", "1", "9.0.0", "expressInstall.swf", flashvars, params, attributes); function play(c) { var sound = swfobject.getObjectById("sound"); if (sound) { sound.SetVariable("f", c); sound.GotoFrame(1); } } </script> </head> <body> <div id="sound"> </div> <input type="button" value="播放" onclick="play('msg.mp3')" /> </body> </html>
我们首先需要在网页中写一个有id属性的<div>层，然后在页面载入时调用swfobject.embedSWF方法即可动态产生一个object替换掉div层，从firebug中查看网页源代码
<body> <object width="1" height="1" type="application/x-shockwave-flash" data="sound.swf" id="sound" style="visibility: visible;"> <param name="wmode" value="transparent"> </object> <input type="button" onclick="play('msg.mp3')" value="播放"> </body>
从产生的代码中很容易就可以看出该方法是第一种方法的简化版。下面先来说说swfobject.embedSWF 方法里面的设置参数swfobject.embedSWF方法的语句格式为：
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)
其中前5个参数是必须的，后5个参数是可选的
swfUrl：嵌入的flash的路径，即该例子中sound.swf的路径。
id：是我们在网页中写的那个<div>层的id。
width,height:嵌入的flash的宽、高。
version：这个参数是嵌入的flash发布时的版本。
expressInstallSwfurl：这里填入 expressInstall.swf 文件的路径。当用户的浏览器的flash版本低于versioin的值时，启动该flash来下载最新的flash，而且该flash只在第一次触发时启动。
flashvars：该参数是传入到flash文件里面使用的，在我们这个例子中，就是动态的设置这个参数来传入要播放的mp3文件。
params：有下列这些可选项
- play
- loop
- menu
- quality
- scale
- salign
- wmode
- bgcolor
- base
- swliveconnect
- flashvars
- devicefont
- allowscriptaccess
- seamlesstabbing
- allowfullscreen
- allownetworking
我们这里只用到了wmode，设置该选项为transparent，设为transparent不至于让flash悬浮在页面顶层。
attributes：有下列这些选项
- id
- align
- name
- styleclass
- class
callbackFn：无论是否成功添加<object>到页面中，都会触发该回调函数。
简单的了解swfobject.embedSWF方法后，就可以实现播放消息声音的功能了。
我们可以看到
function play(c) { var sound = swfobject.getObjectById("sound"); if (sound) { sound.SetVariable("f", c); sound.GotoFrame(1); } }
这段函数中，swfobject.getObjectById是取得<object>对象，获得该对象后，我们就可以控制该flash文件了。
这里sound.SetVariable("f", c)是动态地设置传入到flash的参数，而设定 f，是由于该flash设定了传入变量名称 f 为mp3文件的路径。（即变量名称必须为 f，才能有效果）
sound.GotoFrame(1)的意思是转到该flash文件的第一帧，这里可能需要一点flash知识才能明白，不过应该不影响该例子的描述。
最后，只要点击播放按钮，就可以听到消息声音了。
三、总结
虽然没什么技术含量，但是可以锻炼下写文章的技巧。感觉一个简单的小功能让自己说复杂了，还望见谅。
如有错误，欢迎指正，谢谢。
四、相关下载
