wavesurfer.js 不会加载本地文件答案

【问题标题】：wavesurfer.js won't load local filewavesurfer.js 不会加载本地文件
【发布时间】：2017-07-29 09:25:31
【问题描述】：

我一直在开发一个允许用户单击并操作 mp3 文件的在线应用程序，我正在尝试将本地文件从我的计算机加载到 wavesurfer 对象中，但我在 chrome 中不断收到此错误：

"访问 XMLHttpRequest 在 'file:///local/file/path/to/audio/files/some.mp3' 来自原点'null' 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、 https。”

我尝试将 HTML 和 mp3 文件放在多台计算机上的多个不同文件夹中，但似乎没有任何效果。这是我的代码：

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
    <div id="waveform"></div>

    <script>
        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'darkorange',
            progressColor: 'blue',
            height: 64,
            backend: 'MediaElement'
        });


        //setRequestHeader('Origin', document.domain);
        //wavesurfer.load("http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");
        var song = "clippedJaco.mp3";
        wavesurfer.load(song);
        wavesurfer.on('ready', function () {wavesurfer.play();});
    </script>
</body>

添加“MediaElement”后端时，会加载 mp3，但不会生成波形。非常感谢任何帮助，谢谢！

【问题讨论】：

"Cross origin requests are only supported for HTTP." error when loading a local file的可能重复
重复问题stackoverflow.com/a/21608670/147175 ...只需cd到您的html文件所在的目录并发出python命令... python -m SimpleHTTPServer ....然后在浏览器中查看链接localhost:8000
一旦我意识到直接从文件加载根本不起作用，我最终通过创建一个 blob 文件 url 让它工作。非常感谢您的建议！
另见stackoverflow.com/questions/31310904/…
@MitchellDalzin 你能告诉我你的答案吗

标签： javascript html audio wavesurfer.js

【解决方案1】：

据我了解，这是因为出于安全原因，浏览器会限制从脚本中发起的跨域 HTTP 请求。这意味着使用 XMLHttpRequest 和 Fetch API 的 Web 应用程序只能从加载应用程序的同一源请求 HTTP 资源，除非来自其他源的响应包含正确的 CORS 标头。

来源：Cross-Origin Resource Sharing (CORS)

解决此问题的一种方法是在 localhost 中托管您的 Web 应用程序。您可以使用this 开始。然后在index.html 文件中调用wavesurfer.js 并创建一个容器来显示波形。

index.html

<!doctype html>
<!-- You can use this link as well to call wavesurfer.js. This is what's given on their updated documentation-->
<!-- <script src="https://unpkg.com/wavesurfer.js"></script> -->

<head>
  <title>Test Website</title>
</head>

<body>
  <!-- Adding wavesurfer.js script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
  
  <h1>Wavesurfer Test</h1>
  
  <!-- !-- Create a container where the waveform is to appear-->
  <div id="waveform"></div>
  
  <script src="script/main.js" defer="defer"></script>
  <script src="script/test.js"></script>
</body>

</html>

然后添加一个脚本来处理 wavesurfer 实例。就我而言，它是test.js

test.js

//Creating  a wavesurfer instance, passing the container selector along with some options like progress color and wave color
var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

//Loading the audio file you want to play
wavesurfer.load('audio/LOVE_s.mp3');

// You can also load wav files if you want
//wavesurfer.load('audio/songaudio.wav');

//This is the event you play the wavesurver instance i.e when wavesurfer ready event
wavesurfer.on('ready', function() {
  wavesurfer.play();
});

这样我在将本地音频文件加载到 wavesurfer 时没有任何问题。希望这可以帮助。

【讨论】：