我一直致力于一个允许用户点击并操作mp3文件的在线应用程序,我正在尝试将本地文件从我的计算机加载到waveurfer对象中,但我一直在chrome中出现此错误:< / p>
“XMLHttpRequest无法加载file:/// C:/fileTests/clippedJaco.mp3。只有协议方案支持交叉源请求:http,数据,chrome,chrome扩展,https,chrome-extension-resource。”< / p>
我已经尝试将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会加载,但不会生成波形。非常感谢任何帮助,谢谢!
答案 0 :(得分:1)
据我了解,这是因为出于安全原因,浏览器限制了从脚本内部发起的跨域HTTP请求。这意味着使用XMLHttpRequest和Fetch API的Web应用程序只能从加载该应用程序的同一来源请求HTTP资源,除非来自其他来源的响应包括正确的CORS标头。
来源:Cross-Origin Resource Sharing (CORS)
解决此问题的一种方法是将Web应用程序托管在localhost中。您可以使用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>
然后添加一个脚本来处理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 i.e when wavesurfer ready event
wavesurfer.on('ready', function() {
wavesurfer.play();
});
这样,在将本地音频文件加载到waveurfer时,我没有任何麻烦。 希望这可以帮助。