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






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>





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>

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.

WzIJCCMyR8a,yHiZPZQTleLtqEv25h0fd,aq,perXIvWsbJhr mrBLfiLcnG,5xOED8CVL d7ZI,2UoxQohexFEQ0 be 3LLJgp G 0vS0b
-
y07J7n9h ek4jxvB8Rrq3bQ5juS8HxzkkXMpY0HGM

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma...
Read more

Do graphics cards have individual ID by which single devices can be distinguished?

Do graphics cards have individual ID by which single devices can be distinguished? I have several graphics cards of the same manufacturer and same model and I want to distinguish them not only by the pcie socket they reside in but by some individual value I can read from the hardware. Is there such value and if so what would it be called and how could I access it? Right now I'm using modern nvidia cards (10xx series) and nvidia inspector.but I'd prefer if there was any value that was also applicable to amd. I have programming and scripting knowledge. I am running Windows 10 1 Answer 1 This is a powershell example to pull information from video cards. The DeviceID is supposed to be unique but only if the manufacturer supports Windows Display Driver Model (WDDM). (I copied this directly from docs.microsoft.com) $strComputer = "." $colItems = get-wmiobject -class "Win32_VideoC...
Read more

Create weekly swift ios local notifications

Create weekly swift ios local notifications I can create daily notifications but not weekly ones using swift 3 ios 10 User Notifications framework. Daily works fine but when I add in the .weekday parameter it doesn't send me a notification. The code is: for i in 1 ... 7 { let center = UNUserNotificationCenter.current(); let content = UNMutableNotificationContent(); content.title = "Title"; content.body = "content"; content.sound = UNNotificationSound.default(); var dateComponents = DateComponents(); dateComponents.weekday = i; // hours is 00 to 11 in string format if (daynight == "am") { dateComponents.hour = Int(hours); } else { dateComponents.hour = Int(hours)! + 12; } // mins is 00 to 59 in string format dateCom...
Read more