Play audio onHover with jQuery

The simplest way to play audio files in your page without the need of flash is the usage of HTML5 tag

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:

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

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

    $('body').append('
');     $('a').hover(function(){         $('#audio').html('');     },     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

About Teryaki