[SOLVED] HTML audio element currentTime property too high on mobile and Safari

HTML audio element currentTime property too high on mobile and Safari

I am developing a website with VoIP. I am setting the srcObj property of an audio element with the MediaStream of the user at the other end of the line (using PeerJS). I am also showing the time since the start of the call by displaying the currentTime property of the audio element every second.

This works fine on desktop browsers, but on mobile browsers (specifically Chrome on iOS) and macOS Safari, the currentTime property is way too high. Like it is equal to several hours when the call has just started.

Has anyone also experienced this or knows why this happens?

Example:

https://jsfiddle.net/vladmashk/j3ysLf29/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>

<audio id="audioElement" autoplay></audio>
<div>Time passed: <span id="timePassed"></span></div>

<script type="module">
    const audioElement = document.getElementById("audioElement");
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    audioElement.srcObject = stream;

    setInterval(() => {
        document.getElementById("timePassed").innerText = audioElement.currentTime;
    }, 1000)
</script>
</body>
</html>

Solution