function togglePlay() {
var myAudio = document.getElementById("myAudio");
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myAudio1" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<input type="button" value="sound" onclick="togglePlay()" />
<audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<input type="button" value="sound" onclick="togglePlay()" />'
I want to use this tooglePlay() function for different ID's, so that I can pause and play the independently for each song. How can I pass the different audio id's to same function?
You can make the function accept the id as a parameter:
function togglePlay(id) {
var myAudio = document.getElementById(id);
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
Then, in your HTML, pass the id of the corresponding audio tag when calling togglePlay:
<audio id="myAudio1" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<input type="button" value="sound" onclick="togglePlay('myAudio1')" />
<audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<input type="button" value="sound" onclick="togglePlay('myAudio')" />'