How to load a local audio file into Wavesurfer.js in the browser with JavaScript

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 !