pixxxel

Hi, I have an additional question: Is it possible to stop the first player before the second one begins, and reverse?

Works perfect! Thank you very much!

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>