Question 420667 in Html Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    All this indicates is that the source MediaStream has timestamps and they have been running for awhile. This could be the time since the device booted, or the time since the audio device was connected.

    You should not expect a MediaStream timestamp to be equal to zero when its started, because it could be pulling from an underlying source that’s been already initialized for other purposes.

    You can simply record the currentTime value when you start your call, and subtract it from currentTime when the time is updated.

    Login or Signup to reply.
  2. 0

    I tried this on two different iPads:

    • iPad #1:
      • Initial value: 556822
      • iPadOS Version: 17.7.2
      • Model Name: iPad (6th generation)
      • Model Number: MRJP2LL/A
    • iPad #2:
      • Initial value: 193619
      • iPadOS Version: 18.1.1
      • Model Name: iPad Pro 11-inch (M4)
      • Model Number: MVV83LL/A

    I noticed that the values are way off like you said, but they are way off by the same amount starting from the same point in time from the same device. For instance, opening the web page 60 seconds later on iPad #1 would leave us with 556882, and opening the web page 60 seconds later on iPad #2 would leave us with 193679.

    Interestingly as @Brad suggested, the value did seem to reset after a hard reset of the iPad, starting at around 100 (it took a while for me to open the web page again), so it looks like this is the time since the device has done a full reboot.

    This is a simple workaround that works for both situations.

    <!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 });
    let track = stream.getAudioTracks()[0];
    audioElement.srcObject = stream;
    let offsetTime = 0;

    setTimeout(() => {
        offsetTime = audioElement.currentTime;
    }, 1)

    setInterval(() => {
        document.getElementById("timePassed").innerText = (audioElement.currentTime - offsetTime);
    }, 1000)
</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search