Play/Pause Button HTML5 Audio
23,046
Solution 1
You can put an id to the <i>
tag and assign the fa fa-pause
class when change of state:
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a>
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myTune");
if (myAudio.paused) {
$('#stateicon').removeClass('fa fa-play');
$('#stateicon').addClass('fa fa-pause');
myAudio.play();
} else {
$('#stateicon').removeClass('fa fa-pause');
$('#stateicon').addClass('fa fa-play');
myAudio.pause();
}
}
Hope this helps
Solution 2
Give this a whirl:
function aud_play_pause() {
var myAudio = document.getElementById("myTune");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
<audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>
Solution 3
Here You have version for multiple instances of player
HTML
<a href="javascript:void(0)" onclick="aud_play_pause(this)">
<i class="control icon-play"></i>
<audio class="xnine-player" src="/path/to/file#1.mp3" preload="auto"></audio>
</a>
<a href="javascript:void(0)" onclick="aud_play_pause(this)">
<i class="control icon-play"></i>
<audio class="xnine-player" src="/path/to/file#2.mp3" preload="auto"></audio>
</a>
JAVASCRIPT
<script>
function aud_play_pause(object) {
var myAudio = object.querySelector(".xnine-player");
var myIcon = object.querySelector(".control");
if (myAudio.paused) {
myIcon.className = "control icon-pause";
myAudio.play();
} else {
myIcon.className = "control icon-play";
myAudio.pause();
}
}
</script>
...
Author by
screamingchimps
Updated on August 05, 2022Comments
-
screamingchimps almost 2 years
I'm trying to get HTML5 Audio to play/pause in one button. How would I possibly go around doing this? So the play button switches to the pause icon which is font awesome 'fa fa-pause' The code is here:
<audio id="myTune"> <source src="http://96.47.236.72:8364/;"> </audio> <div class="btn-group btn-group-xs"> <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="document.getElementById('myTune').play()"><i class="fa fa-play"></i></a>
Thank you!
-
X9DESIGN over 7 yearsI made some changes for multiple players at one page. Check answer below.