如何使用JavaScript在浏览器中将本地音频文件加载到Wavesurfer.js中

本文概述

• 使用Vanilla JavaScript
• 使用jQuery

尽管从Web URL将音频文件加载到waveurfer非常简单, 但许多其他与其他资源一起使用的应用程序在通过默认方法加载音频文件时会遇到问题。相反, 唯一的方法是通过可以通过waveurfer.loadBlob方法加载的Blob。但是, 开发人员通常不清楚如何从通过HTML5文件输入加载的本地音频文件中获取格式正确的Blob。

在本文中, 我们将向你说明如何将用户计算机中的本地音频文件加载到WaveSurfer.js中。

使用Vanilla JavaScript

为了向用户提供一种将本地音频文件加载到波形中的方法, 你将需要初始化WaveForm的简单实例并将文件输入添加到文档中。附加一个事件侦听器, 该侦听器将在用户将文件加载到输入中时作出反应。发生这种情况时, 你只需要读取文件作为数组缓冲区, 然后使用loadBlob方法将其加载到WaveForm中：

<!-- 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>

使用jQuery

另外, 如果你使用的是jQuery, 只需更改onclick事件侦听器附加到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>

编码愉快！