Safari audio current time inaccuracy for SO

by jaakkokarhu

HTML

<audio id='audio' preload='auto'><source src="https://bit.ly/2VKqc3Z" type="audio/mp3"></audio>
<div id='lengthDisp'>
Wait until you see the numbers, otherwise the audio is not loaded!
</div>
Jump to: <input type="range" min="0" max="100" value="8" id="jumpTo">
<span id='jumpToDisp'></span>
<br />
Jump delay: <input type="range" min="0" max="3000" value="100" id="jumpDelay">
<span id='jumpDelayDisp'></span>
<br />
Jump buffer: <input type="range" min="-20" max="0" value="-8" id="jumpBuffer">
<span id='jumpBufferDisp'></span>
<br />
<div id='startedAtDisp'></div>
<div id='currentTimeDisp'></div>
<button id='play'>play</button>
<button id='stop'>stop</button>
<button id='jump'>Direct jump</button>
<button id='jump2'>Delayed jump</button>

JavaScript

var audio = document.getElementById('audio');
var play = document.getElementById('play');
var stop = document.getElementById('stop');
var jump = document.getElementById('jump');
var jump2 = document.getElementById('jump2');
var jumpTo = document.getElementById('jumpTo');
var jumpDelay = document.getElementById('jumpDelay');
var jumpBuffer = document.getElementById('jumpBuffer');
var jumpToDisp = document.getElementById('jumpToDisp');
var jumpDelayDisp = document.getElementById('jumpDelayDisp');
var startedAtDisp = document.getElementById('startedAtDisp');
var currentTimeDisp = document.getElementById('currentTimeDisp');
var lengthDisp = document.getElementById('lengthDisp');

var jumpToVal = jumpTo.value;
var jumpDelayVal = jumpDelay.value;
var jumpBufferVal = jumpBuffer.value;

audio.load();

jumpToDisp.innerHTML = jumpToVal;
jumpDelayDisp.innerHTML = jumpDelayVal;
jumpBufferDisp.innerHTML = jumpBufferVal;
lengthDisp.innerHTML = 'Audio length: ' + audio.duration; 

jumpTo.addEventListener('input', function(e) {
	jumpToVal = e.target.value;
	jumpToDisp.innerHTML = jumpToVal;
})

jumpDelay.addEventListener('input', function(e) {
	jumpDelayVal = e.target.value;
	jumpDelayDisp.innerHTML = jumpDelayVal;
})

jumpBuffer.addEventListener('input', function(e) {
	jumpBufferVal = e.target.value;
	jumpBufferDisp.innerHTML = jumpBufferVal;
})

play.addEventListener('click', function () {
	audio.play();
});

stop.addEventListener('click', function () {
	audio.pause();
});

jump.addEventListener('click', function () {
	audio.currentTime = jumpToVal;
  startedAtDisp.innerHTML = audio.currentTime;
});

jump2.addEventListener('click', function () {
	audio.currentTime = Number.parseInt(jumpToVal) + Number.parseInt(jumpBufferVal);
  audio.volume = 0;
  setTimeout(function () {
  	audio.volume = 1;
		audio.currentTime = jumpToVal;
    startedAtDisp.innerHTML = audio.currentTime;
  }, jumpDelayVal)
});

setInterval(function() {
  lengthDisp.innerHTML = 'Audio length: ' +...