Jump to content

buttons for audio, two instances on same page


pixxxel

Recommended Posts

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>

post-191544-0-17401500-1447147678_thumb.jpg

  • Like 1
Link to comment
Share on other sites

You are applying the element with specific id to variable, but then you are not using it! You then change to use dot notation to access the element myAudio.play(); which 'myAudio' is the id followed by media control function.

Function names MUST be unique, you can't use multiple times on the same page.

I suggest you pass the id of the player you intend to target.

<button onclick="play('myAudio')" type="button" class="play"></button>

Then use this to target specific id of element to run media control function

function play(idref) {
var aud = document.getElementById(idref);
   aud.play();
}
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...