0

I'm a complete newbie in the area of html/js. I need to create a very basic interface with 17 pictures. Each one, when clicked plays given sound.

After days of tinkering and looking for the right approach, I managed to create something that works and looks good, but with one small problem.

When one audio sample is triggered, clicking another picture should stop and reset the previous one. I found a lot of examples on this site, but my understanding of js syntax is so little I can't implement it properly.

I'd appreciate your help.

Here's what i have:

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#track1').click(function() {
        $('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>');
    });
});
</script>
<img name="track1" src="content/img/01.jpg" width="180" height="180"   border="0" id="track1" alt="" />
<div id="1">&nbsp;</div>

I'd really appreciate your help.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Adam Bagnowski
  • 1
  • Take a look at this [answer](http://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked). If your audio files are small, this may do the trick. There is a play and a stop option here too. – Loaf Jan 09 '17 at 22:44

2 Answers2

0

I cleaned up a bit from the post that I linked you. Give this a try to see if it allows you to play and stop the audio.

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'content/mp3/01.mp3');
 
    $('#track1').click(function() {
        audioElement.pause();
        audioElement.currentTime = 0;
        audioElement.play();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="track1" src="content/img/01.jpg" width="180" height="180"   border="0" id="track1" alt="" />
<div id="1">&nbsp;</div>
Loaf
  • 3,011
  • 2
  • 15
  • 25
  • Thanks Loaf. Unfortunately this works only for single file. Meaning, that I can't play more than one instance of the same file (which is also what I want to achieve) and, when clicked starts the file from the beginning. – Adam Bagnowski Jan 09 '17 at 23:10
0

Maybe, to be more clear I post more of the code. The whole site consist of exactly the same "modules" multiplied 17 times. It looks as follows:

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track4').click(function(){
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true"     hidden="true"></embed>');
});
});
</script>
<img name="track4" src="content/img/04.jpg" width="180" height="180"  border="0" id="track4" alt="" />
<div id="4">&nbsp;</div>   

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track3').click(function(){
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true"  hidden="true"></embed>');
});
});
</script>
<img name="track3" src="content/img/03.jpg" width="180" height="180"    border="0" id="track3" alt="" />
<div id="3">&nbsp;</div>
Adam Bagnowski
  • 1