I’ve received a huge amount of questions regarding the same subject. How do you play sound using HTML5? Well, it’s pretty easy, but for the moment, many browsers don’t fully support this. In this tutorial, I’ll show you how to play a sound when rolling over an element (hovering). Keep reading! Source included!
Step 1. HTML5 Declaration
Declaring your page as HTML5 is the most important step. If you don’t declare your page as HTML5, then what’s the purpose of trying anything else, so, let’s get on with it!
<!DOCTYPE html>
That was amazingly easy right? The Doctype is the most important declaration you can have in your document. If you want to find out more about doctypes, please refer to my previous post regarding doctypes
After you’ve successfully declared your page as HTML5, the rest of the syntax is easy. Open your head, and let’s load up the 2 scripts we will be using to make this happen!
Step 2. Calling our scripts
In order to achieve this effect we need a piece of code that will start the sound and of course, jQuery. Adding JavaScript code in your head is the most unprofessional thing you can do, so let’s add it to a new custom.js file.
<script src="scripts/jquery-1.5.min.js" type="text/javascript"> </script> <script src="scripts/custom.js" type="text/javascript"></script>
Good. This little piece of code will be put in your head. Just before closing the head. Be aware, when using custom.js you’ll need to load it after you’ve loaded all other dependent scripts. Else, the JavaScript inside custom.js will fail to launch. Don’t forget to download jQuery.
The HTML Markup
Now we need the code that will basically show our image on the DOM and execute it when it is loaded.
<div id="yourDiv"> <audio src="scripts/sounds/iPadUnlock.mp3" preload="auto"></audio> <img src="images/iPad-out.png" alt="iPad"> </div>
This is markup that will eventually be our trigger. This will add the sound to the document and preload it only on need. Basically this audio tag is the only thing this document has different from any other HTML doc. This is HTML5 
The img src will be the image that will trigger the sound. you can use whatever you want instead of the image, a link maybe? And last but not least, time to move on to:
The JavaScript
Inside the custom.js file ( just make a new file with notepad and save it as custom.js in the same location as the jquery file ) it’s time to write a tiny piece of code that will firstly help us get rid of any possible jQuery conflicts.
var $ = jQuery.noConflict();
This should always be your first line of code when working with jQuery and a custom.js file. I’ve had the pleasant surprise when I was learning to code outside of the DOM that without that line, script ordering becomes hell. always use the no.Clonflict();
Moving forward. In our HTML Markup we have already call the MP3 sound, but now let’s create it’s events to start and stop the sound when hovering over the trigger element.
$(document).ready(function(){
$(function(){
var divHover = $('#yourDiv');
var divAudio = divHover.find('audio')[0];
divHover.hover(function(){
divAudio.play();
},
function(){
divAudio.stop();
});
});
});
The first syntax, is the document ready event. When our document is ready loaded and fully deployed the functions bellow will start. The first function calls on the div name, and finds our audio target. In our case the first child. You can use a class for example, and the find audio child to be ordered [1], [2], depending on your needs. In our case, I used a div. Remember to use classes. If you call upon the same ID twice in your document the code will not be valid in W3C and you might have problems with your customers or marketplaces.
The second function takes care of our hover event. Once you hover over the ID defined in the first function, it will play the sound.
And the last function, once the above function is executed, it will stop playing the sound. And that’s it!
Thank you for reading.
Download
Downloaded 100 times
Doesn’t work in Firefox, fyi. Otherwise, awesome.
Yes Andrea! I am aware of that, the sad side is the code is HTML5 compliant but apparently only WebKit browsers fully support it.
Firefox (and Opera, I believe) needs an .ogg file source. Add that in, and the sound triggers perfectly fine. (:
That is correct!
Paul, this is what I like to do with a mouse over hoover action in WordPress.
Wordpress is PHP, how to solve?
You have WP, perhaps you can share your knowledge on how to integrate this in WP ;-p
I can custom code it for you against a small freelance rate. WP is a little more difficult yes, but it should work!