Как прослушать событие "onLoad" в тегах <audio>?

Question

Я добавил тег <script> и использовал script.onload = callback для запуска обратного вызова, когда элемент полностью рендеризуется в документе.Как я могу сделать то же самое с тегами <audio>?Я уже пробовал загрузить, но это не работает.Я уже пробовал "oncanplay", "oncanplaythrough", "onloadeddata".

Спасибо

Answer 1

Отредактировал ответ.new Audio() в настоящее время работает только в Firefox.

const audio = document.getElementById('myAudio')
audio.onloadeddata = function(data) {
    console.log(data);
};
audio.src = "https://sample-videos.com/audio/mp3/crowd-cheering.mp3"

<audio id="myAudio"></audio>

Answer 2

Добавить canplay медиа-событие слушатель:

mediaFile = new Audio('/path/to/media.mp3')
mediaFile.addEventListener('canplay', function() { console.log('Ready to play') })

Answer 3

Для тегов мультимедиа есть несколько событий, которые можно найти здесь [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events]

Вы можете использовать onloadeddata для запуска чего-либо после завершения загрузки носителя

Вы также можете попробовать oncanplay или oncanplaythrough в зависимости от того, хотите ли вы буферизовать и загрузить небольшую часть или весь носитель должен быть загружен

<audio oncanplaythrough="printAudioReady()" src="..." /> <span id="holder"></span>

в JS

function printAudioReady() {
  document.querySelector('#holder').innerText="Audio loaded";
}