Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the use of HTML5 audio elements to play sound jQuery widgets. Many people may not know much about it. In order to let everyone know more, Xiaobian summarizes the following contents for everyone. I hope you can gain something according to this article.

1. The previous chatter

When I was in college, it seemed that flash sites were still a little hot, and most flash sites with a little content, miscellaneous sound effects were always indispensable. Part of the sound effects are background music that bakes the atmosphere, and part of them are interactive sounds that promote interaction and enhance the experience, such as button presses or "beeps" or "honks" as they pass by. At the time, there was little audio interaction on web pages away from flash, and if there was, compatibility was achieved either through controls or through interaction with flash (e.g., the sound of a bullet hitting a target in a stupid game I wrote earlier).

Marx tells us that things develop, girls will one day become young women, and so is technology. Mozilla CEO Gary Kwicks revealed today that Firefox 5 will be officially released on June 22, just three months after Firefox 4 was released. With the advance and popularity of HTML5, many effects that previously could only be achieved with flash can now be easily implemented on the web. such as playback of audio files. And this article is a little trick, let jQuery easily achieve the effect of playing sound when the element hover, based on HTML5 audio elements, so, as far as this article and this plug-in are concerned, IE6~8 is a soy sauce, group warming life.

II. Effects, resources and use

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, you can click here: Play sound jQuery widget demo

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

Mouse rapid movement of the first wave of navigation, always only a voice in the play, just like the heart of the mother's call; and the mouse rapid movement of the following wave of navigation, a number of sound firecrackers like crackling play, just like the hearts of many idols call.

This jQuery small plug-in is very simple, very small, 30 to line, fight mosquitoes Yan with anti-aircraft guns, so, I will not pack. If you are interested in scripts, you can "Right click-[Target| Link] Save as "This link follows: jquery-audioPlay.js

use

First call the jQuery library and this effect script file, as follows:

_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, you can bind the elements that need the mouse to play sound. The method name is: audioPlay(), for example, in the demo page:

The code is as follows:

$("#nav li").audioPlay({

name: "playOnce",

urlMp3: "/study/media/beep.mp3",

urlOgg: "/study/media/beep.ogg"

});

Obviously, to play sound, no audio file source is not possible, so the audio address in the parameters is indispensable, see the following table for specific parameters and related instructions:

Parameter default definition name"audioPlay" string, used to group. Used when there are multiple sets of playback elements on the page at the same time. urlMp3"" string, this parameter must be. The address of an mp3 audio file. urlOgg"" string, this parameter must be. The address of an audio file in ogg format. clonef Boolean type. Whether the same group of elements plays the same sound source.

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

All the above parameters are applied to the sound effects of the upper and lower navigation groups on the demo page, and their complete use is as follows:

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

});

});

Third, some nagging at the end

The browsers that now support HTML5 audio elements are as follows: Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+, and in our magical country, IE 6 ~8 still occupies most of the country, you may feel that the things in this article are still of little value.

However, in line with the principle of gradual enhancement, weighing utility and resource consumption, it is not impossible to apply this article to practical projects. Moreover, with the substantial increase in the installed capacity of Window7, it may be inadvertently that the era of IE6 will come to an abrupt end, and then it may not be too late for you to make up for it. This feeling comes from my current landlord aunt, sixty or seventy years old, although basically know nothing about computers (just use it to look at stocks), but its computer is gorgeous drop window7, and it seems that it uses window7 system quite with feeling.

Take advantage of the tide of front-end technology has not yet arrived, you need to calm down and work hard to cultivate basic skills, otherwise, when the tide arrives, it is easy to be swallowed up by the surging new technology. Personally, I feel like Japan just after the earthquake, a huge tsunami is coming…

Test code package download

After reading the above content, do you have a further understanding of the usage of HTML5 audio element to play sound jQuery widget? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.