Issues with multiple audio files in HTML onclick

Multi tool use
Multi tool use


Issues with multiple audio files in HTML onclick



I am creating an online instrument that has 10 keys, each with a recorded sound to play on click. At the moment it is only playing the first sound and I can't work out what I need to do in my code to get the other audio files to play. I have looked at multiple links to try and solve this but nothing has worked!


<h1> Click to Play






<script> function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>


<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_5.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%205.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_6.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%206.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_1.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%201.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_2.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/high%202.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_3.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High%203.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_5.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High%205.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_6.jpeg' value="PLAY" onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/high%206.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_1.jpeg' alt=''>



</body>
<html>





minimize extra spaces in code.
– Prateek
Jul 2 at 3:54




1 Answer
1



You should sent Id to the javascript function or use different id



first solution :


<h1> Click to Play </h1>

<script> function play(id){
var audio = document.getElementById('audio'+id);
audio.play();
}
</script> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY" onclick="play('1')"><audio id="audio1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY" onclick="play('2')"><audio id="audio2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>

</body>
<html>



Second Solution:



you can use jquery like this:


<h1> Click to Play </h1>

<script>
$(document).ready(function(){
$('img').click(function() {
$(this).first('audio').play();
});

});

</script>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY" ><audio id="audio1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY" ><audio id="audio2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>

</body>
<html>





That worked! Thanks so much
– Sarah Stopher
Jul 2 at 3:50






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Fcvh0fME0 4lStFSXN4qfYVi SMGYf6zQMg8,T 4g5Xk2jM2yvZAZiM0Sx QomCbounSv,LZ,SA98Qp,1i8S7altO47fKyD0So5
q k4h HZH6RDelG5A,Ss8hhngPCdZY 6 Ee51wzVZgUVGNr4SkTuNxR2teh Vw,RMGNTOqsDE5rXklHK 4OFESaZjd5kJLQ6auP8EVqM fX3

Popular posts from this blog

Boo (programming language)

Rothschild family