Issues with multiple audio files in HTML onclick
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
function play(){
var audio = document.getElementById("audio");
audio.play();
}
<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>
1 Answer
1
You should sent Id to the javascript function or use different id
first solution :
<h1> Click to Play </h1>
function play(id){
var audio = document.getElementById('audio'+id);
audio.play();
}
<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>
$(document).ready(function(){
$('img').click(function() {
$(this).first('audio').play();
});
});
<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.
minimize extra spaces in code.
– Prateek
Jul 2 at 3:54