音频播放器报错DOMException: The element has no supported sources 求助

针对你遇到的音频播放器加载Blob URL报错的问题，给你几个排查和解决方向：

• 确保请求拿到的是二进制原始数据
  很多HTTP请求库（比如Axios、Fetch）默认会把响应解析为JSON或文本，如果你的接口返回的是音频二进制流，一定要在请求时指定responseType：

  • Axios示例：

    axios.get('/api/song', { responseType: 'arraybuffer' })
      .then(response => {
        const blob = new Blob([response.data], { type: 'audio/mpeg' })
        const url = URL.createObjectURL(blob)
        audio.current.src = url
      })
    

  • Fetch示例：

    fetch('/api/song')
      .then(response => response.arrayBuffer())
      .then(buffer => {
        const blob = new Blob([buffer], { type: 'audio/mpeg' })
        const url = URL.createObjectURL(blob)
        audio.current.src = url
      })
    

  如果没设置responseType，response.data可能是被转码后的字符串，转成Blob后音频数据已经损坏，浏览器自然无法识别。

• 核对MIME类型与实际音频格式一致
  你设置的type: 'audio/mpeg'对应MP3格式，但如果接口返回的是AAC、FLAC等其他格式，MIME类型就不对了。可以通过接口响应头的Content-Type字段确认实际格式，比如AAC对应audio/aac，FLAC对应audio/flac，修正Blob的type参数。

• 直接请求获取Blob对象
  可以跳过手动转Blob的步骤，直接让请求返回Blob类型：

  axios.get('/api/song', { responseType: 'blob' })
    .then(response => {
      const url = URL.createObjectURL(response.data)
      audio.current.src = url
    })
  

  这样能避免手动构造Blob时可能出现的格式错误。

• 检查audio元素的有效性
  确认audio.current确实指向了有效的DOM元素，比如在React中，要确保组件挂载后再设置src，避免ref还没获取到元素就赋值。

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