Toggle audio play() or pause() with one single button or link
If you have a button, and click on it once, it would like it to play audio. And when audio is playing and click again on same button, want it to pause/stop. Play audio file using play button and stop playing audio with pause button.
- Include the audio file in audio tag.
- Write a JavaScript function for play and pause for audio with change image ON/OFF.
HTML
<audio id="audioFile">
<source src="https://smartlearningtutorials.com/blog/shree-hanuman-chalisa.ogg" type="audio/ogg">
<source src="https://smartlearningtutorials.com/blog/shree-hanuman-chalisa.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio. </p>
<a class='musicOff' href="#!"><img src="stop-audio.png" id="myImg"></a>JavaScript
<script type="text/javascript">
function changeImg() {
var image = document.getElementById('myImg');
if (image.src.match("play-audio.png")) {
image.src = "stop-audio.png";
}
else {
image.src = "play-audio.png";
}
}
$(document).ready(function(){
$(".musicOff").click(function(){
var image = document.getElementById('myImg');
var x = document.getElementById("audioFile");
x.play();
if (image.src.match("stop-audio.png")) {
image.src = "play-audio.png";
}
else {
image.src = "stop-audio.png";
x.pause();
}
});
});
</script>Example
<!DOCTYPE html>
<html>
<body>
<audio id="audioFile">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<a class='musicOff' href="#!"><img src="stop-audio.png" id="myImg"></a>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function changeImg() {
var image = document.getElementById('myImg');
if (image.src.match("play-audio.png")) {
image.src = "stop-audio.png";
}
else {
image.src = "play-audio.png";
}
}
$(document).ready(function(){
$(".musicOff").click(function(){
var image = document.getElementById('myImg');
var x = document.getElementById("audioFile");
x.play();
if (image.src.match("stop-audio.png")) {
image.src = "play-audio.png";
}
else {
image.src = "stop-audio.png";
x.pause();
}
});
});
</script>
</body>
</html>Play and stop playing audio on button click.
<audio id="audioFile">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio. </p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>Click the buttons to play or pause the audio.
You can customize this code further as per your requirement.