Comment: Play sound based on HTML5 audio elements jQuery plug-in, friends who need it can refer to it.
1. Some naggings aheadWhen I was in my dreamy university, the flash website seemed to be a little popular, and on flash sites with a little content, various sound effects were always indispensable. Some of the sound effects are background music that creates the atmosphere, and the other part is interactive sounds that promote interaction and enhance experience, such as beeping or buzzing when buttons are pressed or passed by. At that time, there were few sound interactions on web pages far away from flash. Even if there were, to achieve compatibility, either with the help of controls or by interacting with flash (for example, the implementation of the explosion sound of bullets hitting the target in a mentally retarded game I wrote before).
Marx tells us that things develop, and girls will one day become young women, and so is technology. For example, Mozilla CEO Gary Kwicks revealed today that Firefox 5 will be officially released on June 22, just 3 months after Firefox 4 was released – click to view. With the advancement and popularity of HTML5, many effects that were previously achieved with flash can now be easily implemented on web pages. For example, the playback of audio files. This article will make some fun, so that the effect of playing sounds when element hover is easily achieved under jQuery, based on HTML5 audio elements. Therefore, as far as this article and this plug-in are concerned, IE6~8 is a life of making soy sauce and holding a group to keep warm.
2. Effects, resources and use
Just like blind dates, it is very important to what the other person looks like, so if you want to have a glimpse of Lushan’s true face, you can click here: Play the sound jQuery plug-in demo
You can see a vertical navigation similar to the following in the demo:
The first wave of navigation when the mouse moves quickly, there will always be only one sound playing, just like the call of the mother in my heart; while the mouse moves quickly, and the navigation below is played with multiple sounds like firecrackers, just like the call of many idols in my heart.
This jQuery plug-in is very simple and very small, about 30 yuan, so why use anti-aircraft guns to fight mosquitoes? So, I won't pack it. If you are interested in scripts, you can right-click - [Target|Link] Save as the following link: jquery-audioPlay.js
use
First, call the jQuery library and this effect script file, as follows:
<script type=text/javascript src=></script> _fcksavedurl=></script> _fcksavedurl=></script> _fcksavedurl=></script>
<script type=text/javascript src=></script>
Then, bind the elements that require the mouse to play the sound. The method name is: audioPlay(), for example, the following is used in the demo page:
$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg"
});
Obviously, it is not possible to play sound without an audio file source, so the audio address is indispensable in the parameters. For specific parameters and related instructions, please refer to the table below:
Default Parameter Definition
nameaudioPlay string, used for grouping. Used when there are multiple groups of play elements on the page at the same time.
urlMp3 string, this parameter must be. Refers to the audio file address in mp3 format.
urlOgg string, this parameter must be. Refers to the audio file address in Ogg format.
clonefalse boolean type. Whether the same group of elements plays the same sound source.
Note: Firefox and Opera browsers support OGG format audio, while webkit core browsers and IE support MP3 format audio.
The sound effects of the two groups of navigation on the demo page apply all the above parameters, which are fully used 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
Now the browsers that support HTML5 audio elements are as follows: Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+. In our magical country, IE6~8 still occupies most of the world. You may think that the things in this article are still of no value at present.
However, in accordance with the principle of gradual enhancement, weighing the utility and resource occupation, it is also not impossible to apply this little thing in this article in actual projects. Moreover, with the significant increase in the installation volume of Windows 7, the IE6 era may have come to an abrupt end inadvertently. By then, it may not be too late for you to make up for it. This feeling comes from my current landlord, who is in his sixties or seventies. Although he basically knows nothing about computers (just look at stocks), his computer is gorgeous and beautiful, and it seems that it is quite interesting to use the Windows 7 system.
Taking advantage of the tide of front-end technology, you need to work hard to practice basic skills. Otherwise, when the tide comes, it will be easily swallowed up by the surging new technologies. Personally, I feel that it is like Japan after the earthquake, and a huge tsunami is about to come...
Test code packaging and download