Запуск звуковой дорожки HTML5 для воспроизведения при загрузке

Question

Я пытаюсь воспроизвести звуковую дорожку HTML5 через несколько секунд после загрузки страницы с помощью функции JavaScript .play ().

Иногда, когда звук загружается медленно, и .play () запускается, когда проигрыватель выглядит следующим образом:

Звук не воспроизводится при буферизации.

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

Какой самый быстрый способ обойти эту проблему? (Используя слушателя? Я держусь за функцию воспроизведения при загрузке).

Answer 1

Это должно работать:

<script language="JavaScript" type="text/javascript">
    var myAudio = document.getElementById('audio1')
    myAudio.oncanplaythrough = function () {this.play();}
</script>

<audio id="audio1" controls preload="auto" />
<audio id="audio2" controls preload="auto" oncanplaythrough="this.play();" />

Answer 2

Если загрузка прошла успешно, используется ли атрибут src или исходные элементы, то при загрузке данных запускаются события хода выполнения. Когда загружено достаточно данных для определения размеров и продолжительности видео, запускается событие загруженных метаданных. Когда для рендеринга кадра было загружено достаточно данных, запускается событие Загруженные данные. Когда загружаются достаточно данных для воспроизведения небольшого количества видео, происходит событие canplay. Когда браузер определяет, что он может воспроизводить все видео без остановки для загрузки дополнительных данных, запускается событие canplaythrough; это также, когда видео начинает воспроизводиться, если оно имеет атрибут автозапуска.

Примечание: Opera 10.50 не пытается определить, когда у нее достаточно данных для воспроизведения, но вместо этого только выстрелы могут воспроизводиться и могут проходить одновременно. Это, вероятно, будет исправлено в следующем выпуске.

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

Примечание: Opera 10.50 еще не приостанавливает загрузку и не запускает остановленное событие.

Если вы хотите, чтобы кнопка воспроизведения была отключена до тех пор, пока видео не сможет воспроизводиться, вы можете включить ее для события canplay:

<input type="button" value="Play" id="playpause" onclick="playOrPause()" disabled>
video.oncanplay = function(e) {
  playpause.disabled = false;
}

Источник .

Answer 3

Вы можете установить:

<script>
var myAudio = document.getElementById('audio1');
myAudio.setAttribute('autoplay', 'autoplay');</script>