使用SWFObject2.2.js让网页播放消息提示音_西安政府网站制作,企业网站建设制作,公司网页设计制作,西安学校网站制作-西安驰讯科技

信息中心

使用SWFObject2.2.js让网页播放消息提示音

作者：西安网站建设来源：www.xacx.net 发表时间：2013-5-24 18:08:37 点击：5288

收到聊天信息时，没有通知提醒的声音，所以在网上找了一些相关的播放声音的插件，由于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文件。

上条新闻：CSS背景图片平铺技巧

下条新闻：网页滚动置顶代码