First things first, I am really not a fan of this. I don’t want to see a a return to the late 90’s with geocities style websites consisting of midi and wav files. If you have to include sound in your website let’s make sure we have an option to turn sound off yeah?

So anyway this is a really simple way of playing sounds using HTML5 and jQuery.

HTML

<audio id="soundFX">
<source src="/media/sounds/sound1.wav"></source>
Update your browser to enjoy HTML5 audio!
</audio>

jQuery

var soundFx = $( '#soundFx' ); // Get our sound FX.

soundFx[0].play(); // Plays sound.

Now we have access to the sound via jQuery you can do what you want with it. I used it in a news ticker, where every time a news item was added to an array the sound played. But you can bind it to other jQuery events the usual way:

var target = $( 'input' );

target.on( 'change', function(){
soundFx[0].play();
});