wavesurfer.js不会加载本地文件
我一直在开发一个在线应用程序，该应用程序允许用户单击并操作mp3文件，我正在尝试将本地文件从我的计算机加载到have对象中，但我一直在使用chrome：
CORS策略阻止了从'file:///local/file/path/to/audio/files/some.mp3‘的XMLHttpRequest访问'null’：只有协议方案: http、数据、铬、铬扩展、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
Stack Overflow用户
发布于 2019-09-04 16:21:33
据我所知，这是因为出于安全原因，浏览器限制从脚本内部启动的跨源HTTP请求。这意味着使用XMLHttpRequest和Fetch API的web应用程序只能从加载应用程序的同一来源请求HTTP资源，除非来自其他来源的响应包含正确的CORS头。
来源：跨源资源共享
解决此问题的一种方法是在本地主机中承载web应用程序。您可以使用这开始工作。然后在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();
});
这样，我在将本地音频文件加载到have时没有任何问题。希望这能有所帮助。
Stack Overflow用户
发布于 2022-04-06 22:46:12
由于出于安全原因，您无法从外部源加载资源，因此，如果您试图从非HTTP源加载资源，这可能会很烦人。有时，不可能设置一个小型HTTP服务器或修改浏览器标志(不要这样做，这是危险的)来绕过这个问题。
我最近无意中发现了这个问题，并在一个博客(作者Carlos )上找到了一个很好的解决方案，它用HTML输入元素加载本地资源，并使用JS blob filereader将这些内容传递给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" />
https://stackoverflow.com/questions/42677632
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号