JavaScript如何校验音频文件路径有效性避免播放报错

首先明确：canPlayType接口的作用是检测当前浏览器是否支持指定音频编码/容器格式，无法用于检测目标路径的音频文件是否真实存在。
不存在零开销、100%准确的原生预检测方法，以下是工业界常用的落地方案：

方案1：预请求检测资源可用性 #

在调用play()前先发起轻量请求判断资源是否可访问，优先用HEAD方法，不会下载完整音频，额外开销极低。

async function checkAudioAvailable(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',
      credentials: 'same-origin'
    })
    // 校验响应状态为正常，且返回内容类型为音频
    return response.ok && response.headers.get('Content-Type')?.startsWith('audio/')
  } catch (err) {
    // 资源不存在、跨域限制、网络异常都会判定为不可用
    return false
  }
}

// 调用示例
const audioPath = '/public/recordings/weekday/1.mp3'
checkAudioAvailable(audioPath).then(isValid => {
  if (!isValid) {
    handleResourceError()
    return
  }
  const audio = new Audio(audioPath)
  // 必须捕获play返回的Promise异常，避免控制台抛错
  audio.play().catch(handlePlayError)
})

该方案注意事项：

• 如果音频存储在第三方域名、且对方未配置跨域允许HEAD请求，会出现误判，这类场景不建议用预检测逻辑
• 如果遇到不支持HEAD请求的老旧服务器，可以替换为GET请求，添加请求头Range: bytes=0-0仅拉取文件第一个字节，额外开销同样很小

方案2：优化错误监听兜底逻辑（推荐必做） #

你目前用的error事件监听是标准兜底方案，但通过匹配错误消息字符串的写法兼容性很差——不同浏览器、不同版本的错误提示文本可能不一致，很容易出现判断失效。建议直接通过媒体元素内置的错误码判断错误类型，稳定性更高。
优化后的实现代码：

const audio = new Audio(audioPath)
// 先绑定监听再触发加载，避免漏判早期错误
audio.addEventListener('error', () => {
  const errCode = audio.error?.code
  switch(errCode) {
    case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
      // 覆盖场景：路径无效、资源不存在、音频格式不被支持
      handleResourceInvalid()
      break
    case MediaError.MEDIA_ERR_NETWORK:
      handleNetworkError()
      break
    case MediaError.MEDIA_ERR_DECODE:
      // 覆盖场景：音频文件损坏、解码失败
      handleDecodeError()
      break
    case MediaError.MEDIA_ERR_ABORTED:
      handleAbortError()
      break
    default:
      handleOtherError()
  }
}, false)

// 捕获play()本身的Promise异常，解决你遇到的控制台Uncaught报错
audio.play().catch(err => {
  // 这里可额外处理浏览器自动播放策略限制等调用阶段错误
  handlePlayError(err)
})

补充说明 #

• 预检测逻辑无法完全替代错误兜底：预检测和实际音频加载是两次独立请求，预检测通过后如果出现网络波动、服务临时故障，依然可能加载失败，因此错误监听是必须实现的逻辑，预检测仅能减少无效的播放调用。
• 你遇到的Uncaught (in promise) DOMException: Failed to load because no supported source was found报错，本质是audio.play()返回的Promise被reject时没有写catch捕获导致的，只要给play()调用添加catch即可消除控制台的未捕获错误。

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