pixxxel Posted November 10, 2015 Share Posted November 10, 2015 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> 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2015 Share Posted November 10, 2015 (edited) 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 November 10, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
pixxxel Posted November 10, 2015 Author Share Posted November 10, 2015 Works perfect! Thank you very much! Link to comment Share on other sites More sharing options...
pixxxel Posted November 12, 2015 Author Share Posted November 12, 2015 Hi, I have an additional question: Is it possible to stop the first player before the second one begins, and reverse? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 12, 2015 Share Posted November 12, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now