JQuery small plugin for playing sound Based on HTML5 audio elements

Comments: JQuery small plug-in for playing sound Based on HTML5 audio elements. For more information, see. I. Nagging
When I was a college student, it seems that flash websites are still on fire, and the sound effects of various flash sites are always indispensable. Some sound effects are the background music for rendering the atmosphere, and others are the interactive sound that promotes interaction and enhances the experience, such as the "beep" or "beep" when the button is pressed or when it passes through. At that time, there was little sound interaction on the web pages far away from flash. Even if there were, to achieve compatibility, you would not need to use the control, or through interaction with flash (for example, the explosion of bullets hitting the target in a mentally retarded game I wrote earlier ).

Marx told us that things are developing, and girls will become young women one day, so will technology. For example, Mozilla CEO Gary kewexs revealed today that Firefox 5 will be officially released on July 15, June 22, just three months after Firefox 4 was released-click to view details. With the advancement and popularization of HTML5, many effects that were previously achieved through flash can now be easily implemented on Web pages. For example, playing an audio file. In this article, we will make it easy to implement the sound playing effect when the element hover is implemented in jQuery. It is based on the HTML5 audio element. Therefore, in this article and the plug-in, IE6 ~ 8 is a soy sauce, holding a group to warm up the life.

Ii. effects, resources and usage
Just like a blind date, what the other person looks like is very important, so you can click here to get a glimpse of the true face: Play the sound jQuery plug-in demo

You can see vertical navigation similar to the following in the demo:

The mouse quickly moves the first wave of navigation, and there will always be only one sound playing, just like the call of the mother in the heart; while the mouse quickly moves the following wave of navigation, multiple sound firecrackers like playing, it is like the call of many idols in our hearts.

This jQuery mini-plug-in is very simple and very small. It can be used for 30 years. I will not pack it because it can be used as an anti-spam. If you are interested in the script, right-click the link after-[target | link] Save As: jquery-audioPlay.js

Use
First, call the jQuery Library and the script file. The Code is as follows:
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </script> _ fcksavedurl = "" http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js "> </script>" _ fcksavedurl = "" http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js "> </script>"
<Script type = "text/javascript" src = "http://www.zhangxinxu.com/study/js/jquery-audioPlay.js"> </script>
Then, bind the elements that require the mouse to play the sound. The method name is audioPlay (). For example, you can use the following method on the demo page:

The Code is as follows:
$ ("# Nav li"). audioPlay ({
Name: "playOnce ",
UrlMp3: "/study/media/beepdy ",
UrlOgg: "/study/media/beep.ogg"
});

Obviously, it is impossible to play a sound without an audio file source, so the audio address in the parameters is indispensable. The following table lists the specific parameters and descriptions:

Parameters	Default	Meaning
Name	"AudioPlay"	String used for grouping. It is used when the page has multiple sets of playing elements at the same time.
UrlMp3	""	String. this parameter is required. The address of an audio file in mp3 format.
UrlOgg	""	String. this parameter is required. Audio file address in ogg format.
Clone	False	Boolean. Whether the same group of elements play the same sound source.

Note:Firefox and operabrowsers support audio in OGG format, while webkit core browsers and IE support audio in MP3 format.

The sound effects of the two navigation groups on the demo page apply all the above parameters. The complete usage is as follows:

The Code is as follows:
$ (Function (){
$ ("# Nav li"). audioPlay ({
Name: "playOnce ",
UrlMp3: "/study/media/beepdy ",
UrlOgg: "/study/media/beep.ogg"
});
$ ("# Nav2 li"). audioPlay ({
UrlMp3: "/study/media/beepdy ",
UrlOgg: "/study/media/beep.ogg ",
Clone: true
});
});

3. Nagging at the end
Currently, browsers that support HTML5 audio elements include Firefox 3.5 +, Chrome 3 +, Opera 10.5 +, Safari 4 +, and IE 9 +. In our magical country, IE6 ~ 8. It still occupies more than half of the country, and you may feel that there is no value in this article.

However, in line with the principle of progressive enhancement, weigh the utility and resource occupation, it is not a problem to apply this article in actual projects. Moreover, with the significant increase in the installation volume of Windows 7, the Internet Explorer 6 era may have come to an abrupt end, and it may not be too late for you to make up for it. This feeling comes from my current landlord, aunt, who is 60 or 70 years old. Although she basically knows nothing about the computer (it is used to look at the stock), her computer is Lili drop window7, in addition, it seems that Windows 7 is quite appealing.

The front-end technology tide has not yet arrived, so we need to work hard to cultivate basic skills. Otherwise, the tide will easily be swallowed up by the surging new technologies. I personally feel like Japan just after the earthquake, and the huge tsunami is coming ......
Package and download test code