Отслеживайте общее время воспроизведения HTMLAudio

Question

Как я мог отследить, как долго в общей сложности воспроизводился HTMLAudio?

Я пытался запускать следующую функцию каждый раз, когда звук начинал проигрываться или останавливался:

let totalTimeInSeconds = 0;
let intervalId = null;

const startedToPlay = function() {
    intervalId = setInterval(function() { ++totalTimeInSeconds; }, 1000);
};
const pausedPlaying = function() {
    clearInterval(intervalId);
};

Но я получаю небольшую разницу.Разница составляет + -20 секунд.

Итак, как лучше это сделать?

Чтобы избежать x-y problem: мне нужно, чтобы это вызывало мои собственные события, как толькоаудио воспроизводится в общей сложности более определенного промежутка времени (это означает, что мы можем перематывать звук назад и вперед, но все же нас интересует только общее время прослушивания, а не длина прослушиваемого звука).

Спасибо.

Answer 1

Способ, которым я бы подошел к этому, - просто установить время ожидания, когда они начинают играть, и очистить время ожидания, когда они делают паузу, и обновить общее время, оставшееся только на паузе.

Что-то вроде:

const SECOND = 1000;
let timeLeft = 5 * SECOND;
let startTime = null;
let timeout = null;
let div = document.getElementById('timer')
let toggle = document.getElementById('toggle');
let playing = false;
toggle.addEventListener('click', () => {
    if (playing) {
        pausedPlaying();
    } else {
        startedToPlay();
    }
    playing = !playing;
});

const startedToPlay = function() {
    startTime = (new Date()).getTime();
    timeout = setTimeout(() => alert(), timeLeft);
};

const pausedPlaying = function() {
    clearTimeout(timeout);
    timeLeft -= (new Date()).getTime() - startTime;
    startTime = null;
};

setInterval(() => div.textContent = startTime ? (timeLeft - ((new Date()).getTime() - startTime)) : timeLeft);

<div id="timer">5</div>

<button id="toggle">Start/Stop</button>

Обратите внимание, что интервал внизу предназначен только для обновления отображаемого оставшегося времени.