如何检查是否加载了HTML5音频元素?

I am wanting to know how to check if a HTML5 audio element is loaded.

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

2 个解决方案

#1

To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onloadeddata event:

要想知道音频什么时候可以开始播放，可以添加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>

#2

Check out robertc's answer for how to use event listeners. You can also directly check an audio element's ready state:

看看robertc如何使用事件监听器的答案。您还可以直接检查音频元素的就绪状态:

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

var readyState = myAudio.readyState;

readyState will be a number. From Mozilla's docs:

readyState将是一个数字。Mozilla的文档:

0 - No information is available about the media resource.
0 -没有关于媒体资源的信息。
1 - Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
1 -已获取足够多的媒体资源，并初始化元数据属性。寻找将不再引发异常。
2 - Data is available for the current playback position, but not enough to actually play more than one frame.
2 -数据可用于当前播放位置，但还不足以实际播放多个帧。
3 - Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
3 -当前播放位置的数据以及至少在未来的一点时间内可用(换句话说，至少有两帧视频)。
4 - Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.
4 -有足够的数据，下载速度也足够高，媒体可以不间断地播放。

#1