Play sound file when image is clicked

Question

I am not a native HTML programmer, so please don't jump all over me about this simple question.

I have an image that, I am displaying using the following code:

 <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

I want a sound file to be played when that image is clicked. I can make the image a button, but that is messing up the layout of the page for some reason.

I am okay with using any player, but the only thing is that I do not want to display an intrusive player. I just want the user to press the image and hear the music. If he presses another image, the current music needs to stop playing, and a different sound must be played.

Please help! Thanks!

Answer 1

First you have to use jQuery. You may create some <div> in your page having some id, for example;

<div id="wrap">&nbsp;</div>.

Then, in your JavaScript, when you want to play the file, just add

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

the whole code looks something like;

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
   $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap">&nbsp;</div>

Hope this helps.