Play/Pause Button HTML5 Audio
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
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>
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>
...