怎么听“的onLoad”事件 标签？

Question

我添加了一个<script>标签和使用script.onload = callback运行回调时，元素文档完全地renderized。我该怎么办与<audio>标签是一回事吗？我已经尝试onload事件，但它不工作。我已经尝试 “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 media event监听器：

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";
}