如何在 <audio> 标签中监听 "onLoad" 事件？

Question

我添加了一个 <script> 标签，并在元素在文档中完全呈现时使用 script.onload = callback 到运行回调。我怎样才能用 <audio> 标签做同样的事情？我已经尝试过 onload，但它不起作用。我也已经尝试 "oncanplay"、"oncanplaythrough"、"onloadeddata"。

谢谢

Answer 1

对于媒体标签，可以在此处找到多个事件 [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";
}

Answer 2

编辑了答案。 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 3

添加 canplay media event 侦听器：

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

如何在 <audio> 标签中监听 "onLoad" 事件？

How to listen "onLoad" event in <audio> tags?

javascript

frontend

onload