信息中心
使用SWFObject2.2.js让网页播放消息提示音
作者:西安网站建设  来源:www.xacx.net  发表时间:2013-5-24 18:08:37  点击:5755
    收到聊天信息时,没有通知提醒的声音,所以在网上找了一些相关的播放声音的插件,由于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文件。

本站关键词:西安网站建设| 西安网站制作| 西安网页设计| 西安网站设计| 西安网页制作 | 西安网站推广 | 西安软件开发 | 西安网站优化 | 西安做网站
公司地址:西安市高新区融鑫路3号自力集团六层
邮编:710065 业务咨询:029-89545093 技术支持:13402979816
Copyright ©2006-2012 www.xacx.net All Rights Reserved. 西安驰讯科技有限公司 保留所有权利