Is there anyway when using the HTML5 Audio tag to have an eventListener or action using Dom/jQuery to fire an event during playback or at the end?
This answer links to currentTime but there are no examples, Pseudo code below.
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="file.ogg" type="audio/ogg" />
<source src="file.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("audio").addEventListener("end", function () {
alert("song has ended");
});
$("audio").addEventListener('20.2', function () {
alert("your currently at 20.2 seconds in the track");
});
});
</script>
</body>
</html>
Is there anyway when using the HTML5 Audio tag to have an eventListener or action using Dom/jQuery to fire an event during playback or at the end?
This answer links to currentTime but there are no examples, Pseudo code below.
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="file.ogg" type="audio/ogg" />
<source src="file.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("audio").addEventListener("end", function () {
alert("song has ended");
});
$("audio").addEventListener('20.2', function () {
alert("your currently at 20.2 seconds in the track");
});
});
</script>
</body>
</html>
- 1 I also saw this post, stackoverflow./questions/9830375/… - start HTML5 at a random position, there is some good code you can see across the site (click links on the right below) relating to this post and am sure you can find some good snippets and make a nice working simple script. – TheBlackBenzKid Commented May 1, 2012 at 7:59
- 1 mindovermeta./2010/08/… and this site mindovermeta./demos/html5audio.php?step=2 - also very good examples of what I needed.. please check them out and other links on this page - more than enough information – AlphaApp Commented May 9, 2012 at 15:11
2 Answers
Reset to default 4You can try this:
Get the duration of the audio and make an alert based on the currentTime and display alert wherever you require.
audio.addEventListener("timeupdate", function(){
var duration = document.getElementById('duration');
var s = parseInt(audio.currentTime % 60); var m = parseInt((audio.currentTime / 60) % 60);
duration.innerHTML = m + '.' + s + 'sec';
}, false);
You can use the ended event:
$("audio").on("ended", function() {
// do stuff
});