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

在前端开发中，经常需要考虑音频的加载和播放。那么如何检查一个 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 即可。

示例代码如下：

const audioElement = document.createElement('audio');
audioElement.src = 'audio.mp3';

audioElement.addEventListener('loadedmetadata', () => {
  if (audioElement.readyState === 4) {
    console.log('音频已加载完成');
  }
});

上述代码中，我们创建了一个新的音频元素，并指定了其 src 属性。接着，我们监听了 loadedmetadata 事件，在事件处理函数中检查了 readyState 的值。如果 readyState 为 4，则说明音频已经加载完成。

检查音频元素的 duration 属性

除了使用 readyState 属性外，我们还可以通过检查 duration 属性来判断一个音频是否已经加载完毕。duration 属性表示音频的长度（以秒为单位），如果音频已经加载完成，那么它的值应该是一个有限的数字；反之，如果音频还在加载中，那么它的值应该是 NaN。

示例代码如下：

const audioElement = document.createElement('audio');
audioElement.src = 'audio.mp3';

audioElement.addEventListener('loadedmetadata', () => {
  if (!isNaN(audioElement.duration)) {
    console.log('音频已加载完成');
  }
});

上述代码中，我们同样创建了一个新的音频元素，并指定了其 src 属性。接着，我们监听了 loadedmetadata 事件，在事件处理函数中检查了 duration 的值。如果 duration 不是 NaN，则说明音频已经加载完成。

总结

本文介绍了两种检查 HTML5 音频元素是否已加载的方法：通过检查 readyState 属性和检查 duration 属性。这些方法都非常简单易用，可以帮助开发者快速判断音频是否已经准备好播放。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30548