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>

请注意，底部的时间间隔仅用于更新剩余的显示时间。

跟踪HTMLAudio播放的总时间

1 个答案: