在前端开发中，经常需要考虑音频的加载和播放。那么如何检查一个 HTML5 音频元素是否已加载完毕呢？本文将为您提供详细的解答。
检查音频元素的 readyState 属性
HTML5 中的音频元素拥有 readyState 属性，它表示当前音频的加载状态。具体来说，readyState 属性有以下几种可能的取值：
- 0：HAVE_NOTHING，没有任何数据；
- 1：HAVE_METADATA，仅有元数据；
- 2：HAVE_CURRENT_DATA，当前帧已经可用，但是后面的数据还没有加载；
- 3：HAVE_FUTURE_DATA，当前及至少下一帧已经可用，但是后面的数据还没有加载；
- 4：HAVE_ENOUGH_DATA，可用数据足以进行播放。
因此，如果我们想要检查一个音频元素是否已经加载完毕，只需要检查 readyState 是否为 4 即可。
示例代码如下：
----- ------------ - --------------------------------
---------------- - ------------
----------------------------------------------- -- -- -
-- ------------------------ --- -- -
-----------------------
-
---上述代码中，我们创建了一个新的音频元素，并指定了其 src 属性。接着，我们监听了 loadedmetadata 事件，在事件处理函数中检查了 readyState 的值。如果 readyState 为 4，则说明音频已经加载完成。
检查音频元素的 duration 属性
除了使用 readyState 属性外，我们还可以通过检查 duration 属性来判断一个音频是否已经加载完毕。duration 属性表示音频的长度（以秒为单位），如果音频已经加载完成，那么它的值应该是一个有限的数字；反之，如果音频还在加载中，那么它的值应该是 NaN。
示例代码如下：
----- ------------ - --------------------------------
---------------- - ------------
----------------------------------------------- -- -- -
-- ------------------------------- -
-----------------------
-
---上述代码中，我们同样创建了一个新的音频元素，并指定了其 src 属性。接着，我们监听了 loadedmetadata 事件，在事件处理函数中检查了 duration 的值。如果 duration 不是 NaN，则说明音频已经加载完成。
总结
本文介绍了两种检查 HTML5 音频元素是否已加载的方法：通过检查 readyState 属性和检查 duration 属性。这些方法都非常简单易用，可以帮助开发者快速判断音频是否已经准备好播放。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30548