WaveSurfer.js在Chrome浏览器中无法正常显示问题求助

问题现象 #

使用wavesurfer.js开发音频波形功能时，相同代码在Firefox中可正常渲染波形、运行功能，在Chrome中波形无法正常展示。
问题复现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" 
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="audio-container" style = "box-shadow: 0 4px 8px -4px rgba(0,0,0,0.3);">
        <div class="track-name" style="position: absolute;color: white;"> Antidote</div>
        <script src="https://unpkg.com/wavesurfer.js"></script>
        <div class="waveform" style="background-color: #222; width: 100%; height: 130px;"></div>
        <div class = "buttons">
            <span class=" play-btn btn">
            <i class="fas fa-play"></i> 
            <i class="fas fa-pause"></i>    
            </span>

        </div>
    </div>
    <script>
        var wavesurfer = WaveSurfer.create({
            container: '.waveform',
            waveColor: '#eee',
            progressColor: 'red',
            barWidth: 2
        });

        wavesurfer.load('https://cdn.shopify.com/s/files/1/0572/6499/6512/files/Rosewood_140_bpm_D_m.wav?v=1651737669');
    </script>
</body>
</html>

无关提示说明 #

控制台输出的source map 404警告不影响功能运行，该提示仅为开发者工具尝试加载调试用源码映射文件失败，和波形渲染异常没有关联。

问题根因 #

相同代码Firefox正常、Chrome异常的核心原因是浏览器安全策略差异，最常见的触发场景是本地测试时直接通过file://协议双击打开HTML文件：

• Chrome对file://协议下的XHR/fetch请求有严格的安全限制，会拦截wavesurfer拉取音频二进制数据的请求，没有音频数据就无法解码绘制波形
• Firefox对file://协议下的资源请求限制更宽松，允许直接加载音频资源，因此表现正常

如果页面已经部署到HTTP服务仍存在该问题，则是跨域请求配置缺失：wavesurfer默认拉取跨域音频时未声明跨域标识，被Chrome的CORS策略拦截，导致无法获取音频数据。

修复方案 #

• 本地测试时不要直接双击打开HTML文件，在代码目录启动本地静态HTTP服务访问：已安装Node.js环境可执行命令npx serve .，已安装Python环境可执行命令python -m http.server，启动后通过http://localhost:对应端口访问页面即可正常加载渲染。
• 线上部署场景下，在wavesurfer初始化配置中增加跨域参数：

var wavesurfer = WaveSurfer.create({
    container: '.waveform',
    waveColor: '#eee',
    progressColor: 'red',
    barWidth: 2,
    xhr: {
        crossOrigin: 'anonymous'
    }
});

• 可额外绑定错误监听事件，方便后续快速定位加载类问题：

wavesurfer.on('error', function(err) {
    console.error('Wavesurfer运行错误:', err)
})

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