Cómo cargar un archivo de audio local en Wavesurfer.js en el navegador con JavaScript

Aunque es bastante sencillo cargar un archivo de audio en Wavesurfer desde una URL web, muchas otras aplicaciones que funcionan con otros recursos tendrán problemas para cargar los archivos de audio a través del método predeterminado. En cambio, la única forma de hacerlo es a través de un Blob que se puede cargar a través del wavesurfer.loadBlobmétodo. Sin embargo, generalmente no está claro para un desarrollador saber cómo obtener un blob bien formado a partir de un archivo de audio local cargado a través de una entrada de archivo HTML5.

En este artículo, le explicaremos cómo cargar un archivo de audio local desde la computadora del usuario en WaveSurfer.js.

Con JavaScript plano

Para proporcionar al usuario una forma de cargar un archivo de audio local en forma de onda, deberá inicializar una instancia simple de WaveForm y agregar una entrada de archivo a su documento. Adjunte un detector de eventos que reaccionará cuando el usuario cargue un archivo en la entrada. Cuando esto suceda, simplemente necesitará leer el archivo como un búfer de matriz y cargarlo en WaveForm usando el método loadBlob :

<!-- Inicializar un div para WaveSurfer -->
<div id="waveform"></div>

<!-- Agregue una entrada de archivo donde el usuario debe arrastrar el archivo para cargarlo en WaveForm -->
<input type="file" id="fileinput" />

<script>
    // Inicializar WaveSurfer
    var wavesurfer = WaveSurfer.create({
        container: '#waveform'
    });

    // Una vez que el usuario carga un archivo en la entrada del archivo, el archivo debe cargarse en forma de onda
    document.getElementById("fileinput").addEventListener('change', function(e){
        var file = this.files[0];

        if (file) {
            var reader = new FileReader();
            
            reader.onload = function (evt) {
                // Cree un Blob proporcionando como primer argumento una matriz escrita con el búfer de archivo
                var blob = new window.Blob([new Uint8Array(evt.target.result)]);

                // Carga el blob en Wavesurfer
                wavesurfer.loadBlob(blob);
            };

            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file: ", evt);
            };

            // Leer archivo como ArrayBuffer
            reader.readAsArrayBuffer(file);
        }
    }, false);
</script>

Con jQuery

Alternativamente, si está utilizando jQuery, simplemente cambie la forma en que el detector de eventos onclick se adjunta al fileinput:

<!-- Inicializar un div para WaveSurfer -->
<div id="waveform"></div>

<!-- Agregue una entrada de archivo donde el usuario debe arrastrar el archivo para cargarlo en WaveForm -->
<input type="file" id="fileinput" />

<script>
    // Inicializar WaveSurfer
    var wavesurfer = WaveSurfer.create({
        container: '#waveform'
    });

    // Una vez que el usuario carga un archivo en la entrada del archivo, el archivo debe cargarse en forma de onda
    $("#fileinput").on("change", function(){
        var file = this.files[0];

        if (file) {
            var reader = new FileReader();
            
            reader.onload = function (evt) {
                // Cree un Blob proporcionando como primer argumento una matriz escrita con el búfer de archivo
                var blob = new window.Blob([new Uint8Array(evt.target.result)]);

                // Carga el blob en Wavesurfer
                wavesurfer.loadBlob(blob);
            };

            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file: ", evt);
            };

            // Leer archivo como ArrayBuffer
            reader.readAsArrayBuffer(file);
        }
    });
</script>

Que te diviertas ❤️!