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

本文概述

使用Vanilla JavaScript
使用jQuery

【如何使用JavaScript在浏览器中将本地音频文件加载到Wavesurfer.js中】尽管从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 WaveSurfervar wavesurfer = WaveSurfer.create({container: '#waveform'}); // Once the user loads a file in the fileinput, the file should be loaded into waveformdocument.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 buffervar blob = new window.Blob([new Uint8Array(evt.target.result)]); // Load the blob into Wavesurferwavesurfer.loadBlob(blob); }; reader.onerror = function (evt) {console.error("An error ocurred reading the file: ", evt); }; // Read File as an ArrayBufferreader.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 WaveSurfervar 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 buffervar blob = new window.Blob([new Uint8Array(evt.target.result)]); // Load the blob into Wavesurferwavesurfer.loadBlob(blob); }; reader.onerror = function (evt) {console.error("An error ocurred reading the file: ", evt); }; // Read File as an ArrayBufferreader.readAsArrayBuffer(file); }}); < /script>

编码愉快！