如何监听“onLoad”事件<audio>标签？

Question

I've added a <script> tag and used script.onload = callback to run a callback when the element is completly renderized in document. How can i do the same thing with <audio> tags? I already try onload, but it don't works. I already try "oncanplay", "oncanplaythrough", "onloadeddata" too.

Thanks

Answer 1

For media tags there are several events as can be found here [ https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events ]

You could use onloadeddata to run something after the media has completed loading

you could also try oncanplay or oncanplaythrough depending on whether you want a small part to buffer and load or the entire media to be loaded

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

in JS

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

Answer 2

Edited the answer. new Audio() works only in Firefox currently.

 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 3

Add a canplay media event listener:

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