wavesurfer.js 不会加载本地文件
[英]wavesurfer.js won't load local file
问题描述
我一直在开发一个允许用户点击并操作 mp3 文件的在线应用程序，我正在尝试将本地文件从我的计算机加载到 wavesurfer object 中，但我在 chrome 中不断收到此错误：
“CORS 政策阻止了从原点‘null’访问位于‘file:///local/file/path/to/audio/files/some.mp3’的 XMLHttpRequest：跨源请求仅支持协议方案：http , 数据, 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，但不会生成任何波形。 非常感谢任何帮助，谢谢！
2 个解决方案
解决方案1
2 2022-04-06 22:46:12
由于您不能从外部源加载资源，出于安全原因，如果您尝试从非 HTTP 源加载，这可能会很烦人。 有时无法放置迷你 HTTP 服务器或修改浏览器标志（不要这样做，这很危险）来解决这个问题。
我最近偶然发现了这个问题，并在博客（作者 Carlos Delgado）上找到了一个很好的解决方案，它使用 HTML 输入元素加载本地资源，并使用 JS blob 文件读取器将这些传递给 wavesurfer 代码。 这是非 jquery 代码，非常适合我：
// JS:Initialize WaveSurfer var wavesurfer = WaveSurfer.create({ container: '#waveform', }); // Once the user loads a file in the fileinput, the file should be loaded into waveform document.getElementById("fileinput").addEventListener('change', function(e){ var file = this.files[0]; if (file) { var reader = new FileReader(); reader.onload = function (evt) { // Create a Blob providing as first argument a typed array with the file buffer var blob = new window.Blob([new Uint8Array(evt.target.result)]); // Load the blob into Wavesurfer wavesurfer.loadBlob(blob); }; reader.onerror = function (evt) { console.error("An error ocurred reading the file: ", evt); }; // Read File as an ArrayBuffer reader.readAsArrayBuffer(file); } }, false); <script src="https://unpkg.com/wavesurfer.js"></script> <:-- HTML: Initialize a div for WaveSurfer --> <div id="waveform"></div> <!-- Add a file input where the user should drag the file to load into WaveForm --> <input type="file" id="fileinput" />
解决方案2
0 2019-09-04 16:21:33
据我了解，这是因为出于安全原因，浏览器限制了从脚本内部发起的跨域HTTP请求。 这意味着使用XMLHttpRequest和Fetch API的Web应用程序只能从加载该应用程序的同一来源请求HTTP资源，除非来自其他来源的响应包括正确的CORS标头。
来源： 跨域资源共享（CORS）
解决此问题的一种方法是将Web应用程序托管在localhost中。 您可以使用它开始。 然后在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>
然后添加一个脚本来处理waveurfer实例。 就我而言，这是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 ie when wavesurfer ready event wavesurfer.on('ready', function() { wavesurfer.play(); });
这样，我就可以轻松地将本地音频文件加载到waveurfer。 希望这可以帮助。
在电子中打开本地文件并在wavesurfer.js中渲染
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.