wavesurfer加载网络资源波形不出现

Question

用wavesurfer绘制波形图加载网络资源波形不出现，加载本地相对路径的就一切正常
打印错误出现 Error: HTTP error status: 0

刚开始声音都播放不了,加入了backend:'MediaElement'这个配置声音可以正常出现，波形还是加载不了
\#\#\# 相关代码
this.bottomWavesurfer=WaveSurfer.create({

                    barWidth:3,
                    container:'#audioPlay',
                    waveColor: "#464C55",
                    progressColor: "#FFA600",
                    cursorColor: "#fff",
                    backend:'MediaElement',
                    height: 40,
                    xhr:{
                        mode:"no-cors"
                    }
                });
                this.bottomWavesurfer.load(this.playData.master);
                // this.bottomWavesurfer.load("./static/obj_wo3DlMOGwrbDjj7DisKw_4442982362_0e99_5b56_f906_136dfc1bcf0f129963c8df412f561626.mp3")
                // this.bottomWavesurfer.load('http://replacebeat.com/static/aaa.mp3')
                var that=this;
                this.bottomWavesurfer.on('ready',()=>{
                    console.log('加载完成');
                    that.isplay=true;
                    that.bottomWavesurfer.play();
                })
                this.bottomWavesurfer.on('error',err=>{
                    console.warn(err);
                })
                
                this.bottomWavesurfer.on('finish',()=>{
                    that.isplay=false;
                })

该怎么解决

Answer 1

个人理解：其实根本原因还是音频链接跨域请求的影响，拿不到音频数据，就无法解析波形

 xhr:{
      mode:"no-cors"
     }

这东西虽然表面上在F12下看不到报跨域请求的错（在该模式下允许浏览器发送本次跨域请求），但是不能访问响应返回的内容。所以还是叫后端允许cors吧或者vue配代理