Recently, When I Was optimizing my graduation project, I suddenly remembered that when I received a chat message, there was no notification, so I found some plug-ins for playing sound on the Internet, swfobject is lightweight (only 10 K) and easy to implement, so swfobject is used. JS to implement this small function.
I. Preparations
1. Download swfobject2.2.zip
2. Download a SWF file that can play MP3 message sound. Our next major task is to control this SWF file to play the message music.
Don't worry, the above two packages will be downloaded at the end of the article
Ii. Start
According to the official website, swfobject can be used to insert Flash files to webpages in two ways. (The first method is described only)
Method 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This method first writes the object tag and related parameters in the webpage file, and then calls swfobject. registerobject to register the object when loading the page. Although this method can achieve better performance of embedding Flash files, but because you need to write the <Object> code in advance, for the small function of playing Message notification sound, there is not much performance requirement. Here we will just give a brief introduction.
Method 2:
Put the code first
<! 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 ">First, we need to write a <div> layer with the ID attribute in the webpage, and then call swfobject when loading the page. the embedswf method can dynamically generate an object to replace the DIV layer, and view the webpage source code from 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 =" play "> </body>From the generated code, we can easily see that this method is the simplified version of the first method. The following describes how to set the swfobject. embedswf method in the swfobject. embedswf method. The statement format is as follows:
Swfobject. embedswf (swfurl, ID, width, height, version, expressinstallswfurl, flashvars, Params, attributes, callbackfn)
The first five parameters are required, and the last five parameters are optional.
Swfurl: the embedded flash path, that is, the sound.swf path in this example.
ID: The <div> layer ID we wrote on the webpage.
Width and height: the width and height of the embedded flash.
Version: this parameter is the version when the embedded flash is released.
Expressinstallswfurl: Enter the path of the expressinstall.swf file. When the Flash version of your browser is lower than the versioin value, start the flash to download the latest flash, and the flash is only started when it is triggered for the first time.
Flashvars: this parameter is used in the flash file. In this example, we dynamically set this parameter to pass in the MP3 file to be played.
Params: The following options are available:
Here we only use wmode. Set this option to transparent and set it to transparent so that flash will not be suspended on the top of the page.
Attributes: The following options are available:
Callbackfn: This callback function is triggered no matter whether <Object> is successfully added to the page.
After a simple understanding of the swfobject. embedswf method, you can play the message sound function.
We can see that
function play(c) { var sound = swfobject.getObjectById("sound"); if (sound) { sound.SetVariable("f", c); sound.GotoFrame(1); }}
In this function, swfobject. getobjectbyid is used to obtain the <Object> object. After obtaining this object, we can control the flash file.
Sound. setvariable ("F", c) dynamically sets the parameters passed into flash. F is set because the flash sets the input variable name F to the path of the MP3 file. (That is, the variable name must be F to be effective)
Sound. gotoframe (1) means to transfer to the first frame of the flash file. It may take some flash knowledge to understand it, but it should not affect the description of this example.
Finally, you only need to click the play button to hear the message sound.
Iii. Summary
Although I have no technical skills, I can exercise my skills in writing articles. I feel that a simple small function is complicated for myself. Sorry.
If any error occurs, please correct it. Thank you.
4. Related downloads
Swfobjectdemo
Swfobject_2_2.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
