使用SWFObject2.2.js让网页播放消息提示音（附源码下载）

最近在优化毕业设计时，突然想起当收到聊天信息时，没有通知提醒的声音，所以在网上找了一些相关的播放声音的插件，由于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知识才能明白，不过应该不影响该例子的描述。

最后，只要点击播放按钮，就可以听到消息声音了。

三、总结

虽然没什么技术含量，但是可以锻炼下写文章的技巧。感觉一个简单的小功能让自己说复杂了，还望见谅。

如有错误，欢迎指正，谢谢。

四、相关下载

SwfObjectDemo

swfobject_2_2.zip

来源：https://www.cnblogs.com/sharpCode/archive/2011/12/04/2276012.html

标签