如何检查 HTML5 音频元素是否已加载？

Question

我想知道如何检查 HTML5 音频元素是否已加载。

- Aurange

Answer 1

要想知道音频何时可以开始播放，需要添加监听器以侦听oncanplay或oncanplaythrough事件。若要知道音频是否已全部加载，请侦听onloadeddata事件：

<audio oncanplay="myOnCanPlayFunction()"
       oncanplaythrough="myOnCanPlayThroughFunction()"
       onloadeddata="myOnLoadedData()"
       src="myaudio.ogg"
       controls>
    <a href="myaudio.ogg">Download</a>
</audio>

<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>

- robertc

---

如果可以的话，你能否提供一个例子或者解释一下监听器以及如何实现它们。 - Aurange

@auragar 监听器是标准的DOM/JavaScript功能，只需在Google上搜索“DOM事件监听器”即可。如何实现它们取决于您想让它们做什么。 - robertc

是的，我弄明白了。我之前试图在 JavaScript 中使用它而不是 DOM。不过还是谢谢你。 - Aurange

从w3schools.com： "onloadeddata事件在当前帧的数据加载完成时发生，但不足以播放指定音频/视频的下一帧"。我认为浏览器没有必要完全下载音频或视频，因此没有像img标签那样的onload事件，您可以做的最好的事情是检查浏览器估计的是否有足够的数据开始播放媒体而不中断。 - Hatoru Hansou

我想附上来自 MDN 的媒体事件链接，以便参考所有媒体事件的描述。 - xi.lin

Answer 2

查看robertc的答案以了解如何使用事件监听器。您还可以直接检查音频元素的准备状态：

var myAudio = $('audio')[0];

var readyState = myAudio.readyState;

readyState 将会是一个数字。根据 Mozilla 文档：

• 0 - 没有关于媒体资源的信息可用。
• 1 - 已检索到足够的媒体资源，元数据属性已初始化。此时进行搜索将不再引发异常。
• 2 - 当前播放位置的数据可用，但仅足以播放一个帧的长度。
• 3 - 当前播放位置和至少一小部分未来的数据可用（例如，至少有两个视频帧）。
• 4 - 可用足够的数据并且下载速率足够快，可以无间断地播放媒体直到结束。

- lk135

---

这些数字都不表示数据已经下载完成。如果音频元素由于某种原因未开始播放，那么是否可以使用ended事件来确定下载是否已经完成？ - Andrei Cleland

Answer 3

另一个选项是networkState：

var myAudio = new Audio(url);
var networkState = myAudio.networkState;

networkState是先前提到的readyState的有用伴侣属性，在某些上下文中可能比readyState更实用，例如确定文件是否有可能完全加载。这可以通过在设置的间隔时间内检查它来完成。

- Angilas

Answer 4

只要使用audio.readyState就可以了。

if(audio.readyState === 4) {
  console.log('Audio loaded'); 
} else {
  console.log('Audio NOT loaded');
}

- Elika