Добавить панель буферизации в аудио-плеер

Question

Я работаю с HTML5, делаю аудио плеер.

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

Я попытался использовать несколько свойств, которые я видел в некоторых уроках, но ни одно из них не сработало, и я не могу найти что-либо об этой конкретной теме.

Это аудио плеер, который я пытаюсь отредактировать.

Я хотел бы, чтобы кто-нибудь мог мне помочь, как отредактировать код, чтобы сделать это, или, иначе, рекомендовать учебники, документацию или любую информацию.

Answer 1

Там нет никакой гарантии, что все это будет работать на всех браузерах...

... однако, предположим, для остальной части этого поста, что:

var audio = new Audio();
audio.src = "//example.com/some-really-long-song.mp3";

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

альтернативно "canplaythrough" браузер догадывается, можно ли начать воспроизведение песни прямо сейчас, и она будет работать без остановки (в зависимости от количества данных, оставшихся для загрузки, и скорости загрузки песни в данный момент).

audio.addEventListener("canplay", function () { audio.play(); });

"durationchange" это событие, которое должно срабатывать при изменении продолжительности.
Для типов файлов, у которых нет метаданных или метаданные которых не поддерживаются, полная продолжительность может быть недоступна, так как файл начинает загружаться.
В этих случаях, audio.duration может быть обновлено браузером, загрузившим первый бит мультимедиа, а затем последний, и сделав обоснованное предположение о длине файла, или же продолжительность может быть получена из браузера, который загружает все больше и больше файла, и увеличивая продолжительность, как она идет. Где мы находимся в плане поддержки, я не знаю.

audio.addEventListener("durationchange", function () {
    player.time.duration.update(audio.duration);
});

"progress" это событие, которое генерирует ~250 мс при поступлении данных (при загрузке файла).
progress сообщает вам, что были обновлены данные, доступные для поиска прямо сейчас.

Это делает его хорошим событием для проверки вашего audio.buffered объекты, чтобы обновить "загруженную" часть вашего индикатора выполнения.

audio.addEventListener("progress", function () {
    player.progressBar.update(audio.buffered.start(0), audio.buffered.end(0));
});

Тогда вы можете использовать "timeupdate" иметь дело с воспроизведением.
timeupdate будет обновляться несколько раз в секунду, так как песня играет (как audio.currentTime движется вперед).