Adding sound on clicking a image in HTML 5

Question

I have a image on my html page and i want it to play a sound effect when i click on it. Here's the image code:

<img src="images/button1.png" width="32" height="32" onclick="alert();">

I want to change the alert box into the sound effect that i load in. How do i do it?

Answer 1

Well, it is not so easy, actually it is difficult to be accomplished ONLY with HTML. See here for more details.

You`ll face a various problems like:

• Different browsers have different audio format support.
• If a browser does not support the file format, the audio will not play without a plug-in.
• If the plug-in is not installed on the users' computer, the audio will not play.
• If you convert the file to another formats, it will still not play in all browsers.

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.

The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:

<a href="horse.mp3">Play the sound</a>

The best solution by my opinion is to use a Flash for playing sounds, i.e. make your links as Flash objects/buttons/text and assign sounds to them inside Adobe Flash on hover/click/etc.

Answer 2

Use SoundManager and will free up from a lot of headaches. Even more it will fallback nicely to flash if audio is not supported natively by browser.

However if you don't want to relay on a third party library there is another solution, a little bit daunting and exhausting but functional in every browser supporting the audio tag. The first thing you need to do is to populate the audio tag with the source content. You can do this with the following lines of code:

<audio id = 'audio'>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

  <object class="playerpreview" type="application/x-shockwave-flash" 
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
           height="20" name="movie" align="" 
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio>

Because there is not a common agreement between different browser vendors regarding the supported audio format we need to include each supported ones. If one browser does not support it, then will skip it and fallback to the next one. If none of them is supported then you can use flash as a fallback. Google AJAX Libraries API will facilitate much our work. Below is the full source code:

<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg"  onclick="playSound();">

<div id="fallback"></div>
<audio id = 'audio'>
      <source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
      <source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />

      <object class="playerpreview" type="application/x-shockwave-flash" 
              data="player_mp3_mini.swf" width="200" height="20">
        <param name="movie" value="player_mp3_mini.swf" />
        <param name="bgcolor" value="#085c68" />
        <param name="FlashVars" value="mp3=test.mp3" />
        <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
               height="20" name="movie" align="" 
               type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
        </embed>
      </object>

    </audio>


<script>
    function playSound() {
        if (document.getElementById('audio').canPlayType) {
            if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
                document.getElementById('audio').style.display = 'none';
                swfobject.embedSWF(
                "player_mp3_mini.swf", 
                "fallback", 
                "200", 
                "20", 
                "9.0.0", 
                "", 
                {"mp3":"http://www.hellopixel.net/click.mp3"}, 
                {"bgcolor":"#085c68"});                
            } else {
                document.getElementById('audio').play();
                document.getElementById('fallback').style.display = 'none';
            }
        }

    }
</script>​

Fiddle: http://jsfiddle.net/SMR4V/

Note: I have not created the ogg file, so won't work in firefox, because FF is using ogg files.