Although its pretty simple to load an audio file into wavesurfer from a web URL, a lot of other applications that work with other resources will have problem loading the audio files through the default method. Instead, the only way to do it is through a Blob that can be loaded through the wavesurfer.loadBlob
method. However, it's usually unclear for a developer to know how to obtain a well formed blob from a local audio file loaded through a HTML5 File Input.
In this article, we will explain you how to load a local audio file from the user's computer into WaveSurfer.js.
With Vanilla JavaScript
In order to provide the user a way to load a local audio file into waveform, you will need to initialize a simple instance of WaveForm and add a fileinput to your document. Attach an event listener that will react when the user loads a file into the input. When this happens, you will simply need to read the file as an array buffer and load it into WaveForm using the loadBlob method:
<!-- 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" />
<script>
// 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>
With jQuery
Alternatively if you are using jQuery, just change the way in which the onclick event listener is attached to the fileinput:
<!-- 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" />
<script>
// Initialize WaveSurfer
var wavesurfer = WaveSurfer.create({
container: '#waveform'
});
// Once the user loads a file in the fileinput, the file should be loaded into waveform
$("#fileinput").on("change", function(){
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);
}
});
</script>
Happy coding !