Jump to content
pixxxel

buttons for audio, two instances on same page

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

If only 2 players use if condition to identify player id, then stop the other, if more, loop through all audio tags stopping each one then start the selected afterwards.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...