使用Wavesurfer.js加载S3音频遇解码及Blob加载问题求助

问题 #

尝试渲染从S3存储桶获取的音频文件波形，使用wavesurfer.load()加载URL时出现错误：

Uncaught (in promise) DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data.

为转换为Wavesurfer.js可解码的格式，尝试将URL音频转为Blob，代码如下：

let url = "my-s3-url";
function loadAudioFromUrl(url) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.arrayBuffer(); // Convert response to ArrayBuffer
        })
        .then(arrayBuffer => {
            // Load audio data into wavesurfer.js from the ArrayBuffer
            let x = new Blob([arrayBuffer]);
            wavesurfer.loadBlob(x);
        })
        .catch(error => {
            console.error('Error fetching or loading audio:', error);
        });
}
loadAudioFromUrl(url)

执行后出现错误：

GET http://127.0.0.1:5500/blob 404 (Not Found)

已确认S3生成的是预签名URL且允许跨域访问，Blob已成功生成，但Wavesurfer.js仍无法渲染，求解决方案。

解决方法 #

• 指定Blob的MIME类型
  创建Blob时必须明确音频的MIME类型，否则Wavesurfer.js无法识别格式。可以直接指定（比如MP3用audio/mpeg），也可以从fetch响应头自动获取：

  fetch(url, { mode: 'cors' })
      .then(response => {
          if (!response.ok) throw new Error('Network response was not ok');
          const contentType = response.headers.get('Content-Type');
          return { buffer: response.arrayBuffer(), type: contentType };
      })
      .then(({ buffer, type }) => {
          const audioBlob = new Blob([buffer], { type });
          wavesurfer.loadBlob(audioBlob);
      })
  

• 直接加载ArrayBuffer
  Wavesurfer.js支持直接加载ArrayBuffer，无需转成Blob，可避免Blob URL解析问题：

  .then(arrayBuffer => {
      wavesurfer.loadArrayBuffer(arrayBuffer);
  })
  

• 验证音频文件完整性
  将S3预签名URL直接粘贴到浏览器地址栏，确认能正常播放，排除文件本身损坏或格式不兼容的问题。

• 确保fetch跨域配置正确
  即使S3允许跨域，fetch请求需显式指定mode: 'cors'，避免浏览器默认的同源策略限制：

  fetch(url, { mode: 'cors' })
  

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