Do function after a property value changes?

Question

I have an HTML5 audio tag and I want to do a function everytime the "currentTime" property of the audio changes.

I can get the currentTime with

$('#myAudio').prop('currentTime');

but I don't know how to handle this kind of event. I tried many plugins to observe this change but I can't make it work. Please, help.

Guess you need setInterval function to check every seconds for changes, and doing something on change — Norlihazmey Ghazali, Sep 09 '15 at 03:49
I'd already thought about that, but I need to execute the function just when the change occurs, and not to wait 1 second so the thing updates — Pablo Leban Ruiz, Sep 09 '15 at 03:52
Refer this. http://stackoverflow.com/questions/4993097/html5-display-audio-currenttime This may help you. — John R, Sep 09 '15 at 03:54

Josh Beam · Accepted Answer · 2015-09-09T04:00:49.543

2

Maybe the native timeupdate event is what you're looking for (see the docs on MDN):

document.addEventListener('timeupdate', function(e) {
  var audioElement = e.target;

  // do something
});

According to the docs:

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

Edit

As pointed out in the comments, attaching the event to the document will listen to all timeupdate events originating from all audio elements on the page. However, this is out of scope of the question, so the business logic inside of the event handler is left up to its specific implementation.

One benefit of attaching to the document is that you automatically support dynamically generated audio elements without having to re-attach stale event listeners. However, it can open up a can of worms when checking which target (supplied by e.target) fired the event, and what you want to do or not do with that element.

edited Sep 09 '15 at 04:00

answered Sep 09 '15 at 03:47

Josh Beam

19,292
3
45
68

Wow no, I didn't upvoted that, why do you attach it to the document? Attach it to the audioElement directly ! or at least change `var audioElement = e.target;` to `if(audioElement === e.target){` – Kaiido Sep 09 '15 at 03:52
@Kaiido, it could go either way. The event is going to bubble up regardless, unless you stop the propagation manually. You can attach it to the element itself, or the document. The benefit of attaching the document is you get support (for free) for dynamically populating audio elements into the DOM without having to re-attach any stale event handlers. – Josh Beam Sep 09 '15 at 03:54
Yes but your handler will fire to any MediaElement's timeupdate event. Certainly not what you want. – Kaiido Sep 09 '15 at 03:56
@Kaiido, it may or may not be what one would want. The answer is generic and just provides a template for using the event. The controlling business logic inside the event handler is left up to the OP to implement. Also, `e.target` will refer to the element from which the event originates. Calling it `audioElement` is simply a wrapper, but not necessary. – Josh Beam Sep 09 '15 at 03:57
No I mean, I know how events work, but for a generic answer, I think it's better to attach it to the wanted element instead of the document. Of course, you can attach every bubbling events to the document, but if you want to watch one particular element, it is a better idea to only attach it to this element. – Kaiido Sep 09 '15 at 04:01
1

YES! IT WORKS!! document.getElementById("myAudio").ontimeupdate = function() {myFunction()}; THAT DID THE TRICK!! THANKS! – Pablo Leban Ruiz Sep 09 '15 at 04:01
@PabloLebanRuiz, haha you sound excited! Glad it works. – Josh Beam Sep 09 '15 at 04:02
@JoshBeam how I can't be? I was looking for this the last 3 hours – Pablo Leban Ruiz Sep 09 '15 at 04:05

Do function after a property value changes?

1 Answers1

Edit