如何用jQuery或JavaScript检测HTML5 <audio>元素无法播放的情况

我之前也碰到过类似的情况——浏览器对301重定向的处理比较“沉默”，不会主动抛出error事件，但音频确实加载失败了。结合你的描述（networkState=3、readyState=0），可以通过以下几种方式来捕获这种异常并执行处理逻辑：

方案一：结合事件监听+定时状态检查 #

常规的error事件抓不到301导致的失败，但我们可以通过监听元数据加载事件，再配合定时检查音频状态来兜底：

$('audio').each(function() {
  const audioEl = this;
  
  // 先监听常规错误事件，覆盖其他类型的加载失败
  audioEl.addEventListener('error', handleAudioFail);
  
  // 如果元数据成功加载，说明音频没问题，清除定时检查
  audioEl.addEventListener('loadedmetadata', () => {
    clearTimeout(audioEl.loadCheckTimer);
  });
  
  // 设置3秒后检查状态（时间可以根据你的资源加载速度调整）
  audioEl.loadCheckTimer = setTimeout(() => {
    // 符合你提到的失败状态：无可用资源 + 未准备好
    if (audioEl.networkState === 3 && audioEl.readyState === 0) {
      handleAudioFail.call(audioEl);
    }
  }, 3000);
});

function handleAudioFail() {
  // 这里写你的处理逻辑，比如弹出模态框、显示错误提示
  console.log(`音频加载失败：${this.src}`);
  $(this).addClass('audio-failed').after('<p class="error-tip">抱歉，该音频无法加载</p>');
}

方案二：通过进度事件判断加载停滞 #

如果音频长时间没有加载进度，也能侧面说明加载出现了问题：

$('audio').each(function() {
  const audioEl = this;
  let lastProgress = 0;
  
  // 监听加载进度，记录已加载的位置
  audioEl.addEventListener('progress', () => {
    if (audioEl.buffered.length > 0) {
      const currentLoaded = audioEl.buffered.end(audioEl.buffered.length - 1);
      if (currentLoaded > lastProgress) {
        lastProgress = currentLoaded;
      }
    }
  });
  
  // 4秒后检查如果没有任何进度，且处于无资源状态，判定为失败
  setTimeout(() => {
    if (lastProgress === 0 && audioEl.networkState === 3) {
      handleAudioFail.call(audioEl);
    }
  }, 4000);
});

额外技巧：提前预检资源状态 #

如果你想更主动，可以在加载音频前先发送HEAD请求检查资源状态，提前拦截301这类问题：

$('audio').each(function() {
  const audioEl = this;
  const audioSrc = audioEl.src;
  
  $.ajax({
    url: audioSrc,
    type: 'HEAD',
    success: () => {
      // 资源状态正常，再开始加载
      audioEl.load();
    },
    error: (xhr) => {
      // 捕获301、404等状态码，直接触发错误处理
      if ([301, 302, 404, 500].includes(xhr.status)) {
        handleAudioFail.call(audioEl);
      }
    }
  });
});

注意：这种预检方法需要音频所在服务器配置CORS，允许HEAD请求跨域访问，否则会触发跨域错误。

为什么301不会触发error事件？ #

浏览器会自动处理301/302重定向，但如果重定向后的资源不可访问、或者出现跨域问题，有时候浏览器不会抛出明确的error事件，只会让音频停留在NETWORK_NO_SOURCE（networkState=3）的状态，这时候就需要我们手动检查状态来捕获异常。

内容的提问来源于stack exchange，提问作者Keyslinger