How to add audio to a HTML image?

Question

I'm still new to all this, but I'm trying to add audio mp3 sound to an HTML image, which is played when clicked on. How can I do this right?

I've already tries a few things, like the '' tag, or installing java-based stuff, like soundmanager2, however none of them seems to work. The problem is, that I don't know how to use them properly.

I'm using dreamweaver CS6, in which there should be an option "behaviour"--> play sound, but it's not there, so I'm lost with all this.

Answer 1

You can achieve that using Audio and Video DOM methods play() and pause() onclick of image working Demo

<audio id="audio_play">
    <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
    <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg" />
</audio>

<img src="http://bit.ly/1kX7D49" onClick="document.getElementById('audio_play').play(); return false;" />

<img src="http://bit.ly/1mq0tIt" onClick="document.getElementById('audio_play').pause(); return false;" />

Answer 2

You can use HTML5 Audio Tag:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

More Information: http://www.w3schools.com/html/html5_audio.asp

Answer 3

You won't need any player because html5 is able to play sound files. Check out this: http://www.w3schools.com/html/html5_audio.asp

You can use jQuery to load the sound file.

$('#my_image').click(function(){
   //some code to load the audio file here
})

Maybe you'll need some further code or css to hide controls and stop audio from playing etc.