wavesurfer.js won't load local file
Question
I have been working on an online application that allows the user to click through and manipulate mp3 files, and I'm trying to load local files from my computer into a wavesurfer object, but I keep getting this error in chrome:
"Access to XMLHttpRequest at 'file:///local/file/path/to/audio/files/some.mp3' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
I've tried putting both the HTML and mp3 files in multiple different folders on multiple computers, but nothing seems to be working. Here is my code:
<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>
When adding the "MediaElement" backend, the mp3 loads, but no waveform is generated. Any help is greatly appreciated, thanks!
2 answers
solution1
2 2022-04-06 22:46:12
Since you cannot load resources from external origins, for security reasons, this can be annoying if you are trying to load from a non HTTP source. And sometimes it is not possible to put a mini HTTP server or modify browser flags (don't do this, it's dangerous) to get around this.
I've just stumbled into this issue recently and found a nice solution on a blog (Author Carlos Delgado) which loads the local resources with a HTML input element and uses a JS blob filereader to pass these to the wavesurfer code. Here is the non-jquery code, worked for me perfectly:
// 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" />
solution2
0 2019-09-04 16:21:33
As I understand, this is because for security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. This means that a web application using XMLHttpRequest and the Fetch APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.
Source: Cross-Origin Resource Sharing (CORS)
One way to resolve this issue is to host your web application in the localhost. You can use this to get started. Then inside index.html file call the wavesurfer.js and create a container where the waveform is to appear.
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>
Then add a script to handle wavesurfer instance. In my case it was 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(); });
This way I didn't have any trouble in loading a local audio file to wavesurfer. Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.