Я создаю аудиоплеер и пытаюсь добавить функциональность, чтобы, когда какой-либо аудиоэлемент (имеется несколько скоординированных дорожек) не загрузил достаточно данных для продолжения воспроизведения, кнопка «Воспроизведение» превращается в кнопку загрузки и другие аудиоэлементы. пауза и т. д. и т. д. Затем, когда звук достаточно загружен для воспроизведения, воспроизведение возобновляется.
Что касается последнего пункта, кажется достаточно ясным, что есть два соответствующих обработчика событий: canplay и canplaythrough, и я четко различаю их.
Однако, что касается первой части, загрузки, я запутался, какое событие мне следует использовать для моей функциональности. Все это кажется уместным:
- 1010 * застопорился *
- 1012 * приостановить *
- ждет
Справка W3Schools предполагает, что waiting - это мое решение. (Даже если ссылка на Mozilla имеет совершенно другое описание). Но если это так, нужно ли мне использовать какие-либо другие, в определенных крайних случаях? Если один из этих других стреляет, то также срабатывает waiting? 1023 *
Тогда есть также playing - я должен использовать это для запуска возобновления звука после загрузки события?
Возможно, кто-то может предоставить код для реализации того, что я хочу?
Редактировать
Вот код, показывающий мои текущие настройки. Как видите, я хеджирую свои ставки на то, какое событие может сработать после завершения буферизации.
// main Player object
function Player() {
this.playing = false;
this.waitForLoad = false;
this.audio = new Audio(filepath);
this.narration.preload = "auto";
this.narration.addEventListener('canplaythrough', () => { this.loaded(); });
this.narration.addEventListener('waiting', () => { this.audioWaiting(); });
this.narration.addEventListener('playing', () => { this.audioUnwaiting(); });
}
Player.prototype =
{
play: function() {
this.playing = true;
this.narration.play();
playButton.addClass('pause');
},
pause: function() {
this.playing = false;
this.narration.pause();
playButton.removeClass('pause');
},
// for onLoaded event
loaded: function() {
playButton.removeClass('loading'); // playButton starts off with class="play loading"
if (this.playing && this.waitForLoad) {
this.audioUnwaiting();
}
},
// if any element that needs to play now hasn't loaded (or onWaiting events)
audioWaiting: function() {
if (!this.waitForLoad) {
this.waitForLoad = true;
this.pause();
playButton.addClass('loading');
}
},
// onPlaying - once an element that needs to play now has loaded
audioUnwaiting: function() {
if (this.waitForLoad) {
this.waitForLoad = false;
playButton.removeClass('loading');
if (this.playing) this.play();
}
},
};