HTML5 Audio: Setting currentTime and then playing on iPhone spontaneously rewinds 50-100 milliseconds

Question

I'm attempting to play audio from a specific location inside a file while also receiving updates on the playback using the onTimeUpdate event. I examine the currentTime property within the onTimeUpdate handler so that I can provide visual feedback on where we are in the file.

My problem is that when I set currentTime to a known value and then call play(), the first time I get the currentTime property in my onTimeUpdate handler, it will be as I set it. But the next time onTimeUpdate is called, it's actually a smaller value than I originally started playing from, sometimes more than 100 ms smaller!

For example:

player.currentTime = 2.0;
player.play();

Then, outputting player.currentTime from within my onTimeUpdate handler:

2
1.95 // WTF??
2.24
2.56
...

The problem is that this causes my UI widgets that indicate the current location in the track to jump around. I have a clunky workaround that I am implementing, but I'd like to know if there is any known way to stop this from happening, or if I'm just not doing something right.

To my knowledge, it only happens on iPhone. I'm testing with an iPhone 6 and iOS 10.1.1.

Here's a demonstration if you'd like to see this for yourself.

http://codepen.io/brianrak/pen/7db413c4431827fe3318e99ae497cf2a?editors=1010

Thanks in advance!

Answer 1

var second = ("0" + parseInt(player.currentTime % 60)).slice(-2);
var minutes = ("0" + parseInt((player.currentTime / 60) % 60)).slice(-2);