I have not seen much documentation on the <audio>
tag in HTML5. I am trying to trigger an event when audio has finished playing.
HTML:
<audio id="audio">
<source src="'.$query['audioPronunciation'].'" type="audio/mp3">
Your browser does not support the audio element.
</audio>
JavaScript / jQuery Play & Pause:
function audio() {
if ($("#audioControl").hasClass("glyphicon-play")) {
$("#audioControl").addClass("glyphicon-pause").removeClass("glyphicon-play");
$("#audio").trigger("play");
} else if ($("#audioControl").hasClass("glyphicon-pause")) {
$("#audioControl").removeClass("glyphicon-pause").addClass("glyphicon-play");
$("#audio").trigger("pause");
}
}
JavaScript / jQuery, 'when ended'
$("#audio").addEventListener('ended', function() {
alert("Audio has finished playing!");
});
The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event.
onchange: It is triggered when an HTML element changes. onclick: It is triggered when an HTML element is clicked. onmouseover: It is triggered when the mouse is moved over a HTML element. onmouseout: It is triggered when the mouse is moved out of a HTML element.
You don't need the event listener, just:
var audio1 = document.getElementById("myAudio1");
audio1.onended = function() {
alert("audio playback has ended");
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With