Question

我正在使用audio = new Audio()在我的网页上加载MP3。但是我想知道，设置audio.currentTime时，音频可以跳到文件中的任意位置-接近结尾或任何地方-都不会延迟播放。即我想知道MP3何时完整下载。

我可以为此使用音频对象/元素，还是必须将AudioContext用作shown here？

Answer 1

每个AudioElement都将其缓冲数据公开为TimeRanges对象。 TimeRanges是一个对象，它告诉您已经缓冲了多少个连续的部分，也就是范围。它还具有一些吸气剂，可在几秒钟内返回每个范围的开始和结束。

如果您的AudioElement命名为audio，则以下代码段将记录给定时间点的缓冲时间范围。

const numberOfRanges = audio.buffered.length;

for (let i = 0; i < numberOfRanges; i += 1) {
    console.log(
        audio.buffered.start(i),
        audio.buffered.end(i)
    );
}

如果要检测缓冲所有数据的时间点，可以使用与此类似的检查：

const isBufferedCompletely = (audio.buffered.length === 1
        && audio.buffered.start(0) === 0
        && audio.buffered.end(0) === audio.duration);

我使用以下注释中引用的Gist构造了一个示例。以下代码段将定期检查文件是否已被缓冲。在这种情况下，它将在控制台中记录一条消息。我在OS X的Chrome（v74）和Firefox（v66）上进行了测试。请注意，该文件不能同时播放，因为脚本将设置音频元素的currentTime。

const audio = new Audio('http://www.obamadownloads.com/mp3s/charleston-eulogy-speech.mp3');

audio.preload = 'auto';

function detectBuffered(duration) {
    // Stick with the duration once it is known because it might get updated
    // when reaching the end of the file.
    if (duration === undefined && !isNaN(audio.duration)) {
        duration = audio.duration;
    }

    const isBufferedCompletely = (audio.buffered.length === 1
        && audio.buffered.start(0) === 0
        && audio.buffered.end(0) === duration);

    if (isBufferedCompletely) {
        const seconds = Math.round(duration);

        console.log('The complete file is buffered.');
        console.log(`It is about ${ seconds } seconds long.`);
    } else {
        // Move the playhead of the audio element to get the browser to load
        // the complete file.
        if (audio.buffered.length > 0) {
            audio.currentTime = Math.max(0, audio.buffered.end(0) - 1);
        }

        setTimeout(detectBuffered, 100, duration);
    }
}

detectBuffered();

知道何时可以跳到音频文件中的任何点而无需缓冲/延迟播放

1 个答案: