Hello, I would like to have two button bars on the same page, each playing a different song. My problem is, that both bars play the song of the second bar. What am I doing wrong?
/********** 1 instance *********/ <button onclick="play()" type="button" class="play"></button> <button onclick="pause()" type="button" class="pause"></button> <button onclick="load()" type="button" class="load"></button><br> <audio id="myAudio" width="200" height="70"> <source src="assets/sing.mp3" type="audio/mp3"> </audio> <script> var aud = document.getElementById("myAudio"); function play() { myAudio.play(); } function pause() { myAudio.pause(); } function load() { myAudio.load(); } </script> /********** 2 instance *********/ <button onclick="play()" type="button" class="play"></button> <button onclick="pause()" type="button" class="pause"></button> <button onclick="load()" type="button" class="load"></button><br> <audio id="myAudio2" width="200" height="70"> <source src="assets/song.mp3" type="audio/mp3"> </audio> <script> var aud = document.getElementById("myAudio2"); function play() { myAudio.play(); } function pause() { myAudio.pause(); } function load() { myAudio.load(); } </script> /********** css *********/ <style type="text/css"> .play { background-image: url("assets/buttonplay60x60.jpg"); width: 60px; height: 60px; } .pause { background-image: url("assets/buttonpause60x60.jpg"); width: 60px; height: 60px; } .load { background-image: url("assets/buttonload60x60.jpg"); width: 60px; height: 60px; } </style>