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
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;" />
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
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.