javascript - HTML Audio - Detecting position with jQuery - Stack Overflow

Is there anyway when using the HTML5 Audio tag to have an eventListener or action using DomjQuery to f

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>
Share Improve this question edited May 23, 2017 at 11:49 CommunityBot 11 silver badge asked Apr 30, 2012 at 9:39 AlphaAppAlphaApp 6351 gold badge7 silver badges15 bronze badges 2
  • 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
Add a ment  | 

2 Answers 2

Reset to default 4

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

You can use the ended event:

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745288154a4620690.html

相关推荐

  • javascript - HTML Audio - Detecting position with jQuery - Stack Overflow

    Is there anyway when using the HTML5 Audio tag to have an eventListener or action using DomjQuery to f

    6小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信