CODEWITHSUNDEEP
javascriptjqueryhtmldomaudio
AlphaApp
AlphaApp

Reputation: 635

HTML Audio - Detecting position with jQuery

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>

Upvotes: 2

Views: 2604

Answers (2)

coder
coder

Reputation: 13250

You 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);

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use the ended event:

$("audio").on("ended", function() { 
     // do stuff
});

Upvotes: 4

Related Questions