Play audio onHover with jQuery

04.Oct.2012  |  Posted by admin  |  Filed under JQuery Plugins

The simplest way to play audio files in your page without the need of flash is the usage of HTML5 tag <audio> as follow:

<audio autoplay="autoplay" controls="controls" loop="loop" preload="preload">
        <source src="beep.ogg" type="audio/ogg">
        <source src="beep.mp3" type="audio/mpeg">Your Browser doesn't support audio
</audio>

For our example we only need the attributes "autoplay" and the two tags "source" to define the url of the audio files. Just like this:

<audio autoplay="autoplay">
        <source src="beep.ogg" type="audio/ogg">
        <source src="beep.mp3" type="audio/mpeg">
</audio>

Now we let jQuery take over by embedding the html code for all <a> tags whenever onMouseOver is done:

$(document).ready(function(){
    
    var audioFileName = "beep";
    
    var mp3File = audioFileName + ".mp3";
    var oggFile = audioFileName + ".ogg";

    $('body').append('<div id="audio" style="position:absolute; top:-200px;"></div>');
    $('a').hover(function(){
        $('#audio').html('<audio autoplay="autoplay">'+
        '<source src="' + oggFile + '" type="audio/ogg">'+
        '<source src="' + mp3File + '" type="audio/mpeg"></audio>');
    },
    function(){ });
});

Thats it!

DEMO: Check the upper menu of this page to hear how it works

Useful Links:

Convert mp3 to ogg online

Free Mp3 sound effects

HTML5 audio tag generator

Related PostsjQuery audio mp3 ogg hover onhover css3 html5 onmouseover

0 Comments

Write a Comment

Archive

About

We are a team, that resides in Germany (please, do forgive our bad English) and we have developed an international based and uncomplicated software for users, who do not know (or do not like to know) much about all this programs like HTML, PHP, SqLite, JS, Browser differences etc.. Users who like  to ....Read More
Havalite CMS in english language Havalite CMS in deutscher Sprache هافالايت العربية لنشر المقالات