Play sound jQuery plug-in based on HTML5 audio element_html5 tutorial skills

1. Some of the previous chatter
When I was in college, it seemed that flash websites were still a little popular, and on any flash website with some content, miscellaneous sound effects were always indispensable. Part of the sound effects is background music that enhances the atmosphere, and the other part is interactive sounds that promote interaction and enhance the experience, such as button presses or "beep" or "beep" sounds when passing by. At that time, there was little sound interaction on web pages far away from Flash. Even if there was, in order to achieve compatibility, one had to rely on controls or interact with Flash (for example, a mentally retarded game I wrote before Implementation of the explosion sound of a neutron bomb hitting its target).

Marx told us that things develop. Girls will one day become young women, and the same goes for technology. For example, Mozilla CEO Gary Kwicks revealed today that Firefox 5 will be officially released on June 22, just 3 months after the release of Firefox 4 – click to view. With the advancement and popularization of HTML5, many effects that could only be achieved with the help of flash in the past can now be easily achieved on web pages. For example, the playback of audio files. This article is just a little trick to easily achieve the effect of playing sounds when elements hover using jQuery. It is based on the HTML5 audio element. Therefore, as far as this article and this plug-in are concerned, IE6~8 is just a mess.

2. Effects, Resources and Usage
Just like a blind date, what the other person looks like is very important, so if you want to get a glimpse of the true face of Lushan, you can click here: Play the sound jQuery Mini Plug-in demo

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

Move the first wave of navigation quickly with the mouse, and there will always be only one voice playing, just like the mother in the heart The call of the mouse; while the mouse moves quickly, a wave of navigation below, multiple sounds crackle like firecrackers, just like the calls of many idols in the heart.

This jQuery plug-in is very simple and very small. It only costs about 30 yuan. You can’t use anti-aircraft guns to fight mosquitoes, so I won’t pack it. If you are interested in the script, you can "right-click - [Target | Link] Save As" following this link: jquery-audioPlay.js

Use
to first call the jQuery library and this effect script file, as shown in the following code :
_fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl=""http://ajax.googleapis. com/ajax/libs/jquery/1.5.2/jquery.min.js">"

Then, just bind the elements that require the mouse to play sound when it passes by. The method name is: audioPlay(), for example, the following is used in the demo page:

Copy the code

The code is as follows:

$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: " /study/media/beep.ogg"
});

Obviously, to play sound, it is impossible without an audio file source, so the audio address in the parameter is indispensable. The specific parameters See the table below for relevant instructions:

参数	默认	释义
name	“audioPlay”	字符串，用来分组的。用在页面上同时有多组播放元素时。
urlMp3	“”	字符串，此参数必须。指mp3格式的音频文件地址。
urlOgg	“”	字符串，此参数必须。指ogg格式的音频文件地址。
clone	false	布尔型。同一组元素是否播放同一个声源。

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

The sound effects of the upper and lower navigation groups on the demo page apply all the above parameters, and their complete usage is as follows:

Copy code

The code is as follows:

$(function() {
$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg"
});
$("#nav2 li").audioPlay({
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg",
clone: ​​true
});
});

3. Some nagging at the end
The browsers that currently support the HTML5 audio element are as follows: Firefox 3.5, Chrome 3, Opera 10.5, Safari 4, IE 9, and in this magical country of ours On the Internet, IE6~8 still accounts for most of the country. You may feel that the things in this article are still of little value at present.

However, based on the principle of progressive enhancement and weighing the utility and resource usage, it is not a bad idea to apply this little thing in this article in actual projects. Moreover, with the substantial increase in the installed capacity of Windows 7, the era of IE6 may come to an abrupt end inadvertently. By then, it may not be too late for you to make up for it. This emotion comes from my current landlady, who is 60 or 70 years old. Although she basically knows nothing about computers (she only uses it to read stocks), her computer is a gorgeous Windows 7, and it seems that she can use the Windows 7 system quite well. Quite touching.

Before the big wave of front-end technology arrives, you need to work hard to practice basic skills. Otherwise, when the big wave arrives, you will easily be swallowed up by the oncoming new technology. I personally feel that it is like Japan just after the earthquake, a huge tsunami is coming...
Test code package download