javascript - 从 wav 文件中读取样本

Question

我正在尝试用 html5 制作一个网页，该网页将来自 wav 文件的示例数据存储在一个数组中。有没有办法用javascript获取样本数据？我正在使用文件输入来选择 wav 文件。

在我已经添加的 javascript 中:

document.getElementById('fileinput').addEventListener('change', readFile, false);

但我不知道在 readFile 中做什么。

编辑:我试图在 ArrayBuffer 中获取文件，将其传递给 decodeAudioData 方法并从中获取 typedArraybuffer。这是我的代码:

var openFile = function(event) {
var input = event.target;
var audioContext = new AudioContext();

var reader = new FileReader();
reader.onload = function(){
var arrayBuffer = reader.result;
  console.log("arrayBuffer:");
  console.log(arrayBuffer);
  audioContext.decodeAudioData(arrayBuffer, decodedDone);

};
reader.readAsArrayBuffer(input.files[0]);
};
function decodedDone(decoded) {
var typedArray = new Uint32Array(decoded, 1, decoded.length);
  console.log("decoded");
  console.log(decoded);
  console.log("typedArray");
  console.log(typedArray);

for (i=0; i<10; i++)
{
    console.log(typedArray[i]);
}

}

typedArray的元素都是0，是我创建typedArray的方式不对还是我做错了什么？

编辑:我终于明白了。这是我的代码:

var openFile = function(event) {
var input = event.target;
var audioContext = new AudioContext();

var reader = new FileReader();
reader.onload = function(){
var arrayBuffer = reader.result;
  console.log("arrayBuffer:");
  console.log(arrayBuffer);
  audioContext.decodeAudioData(arrayBuffer, decodedDone);

};
reader.readAsArrayBuffer(input.files[0]);
};
function decodedDone(decoded) {

 var typedArray = new Float32Array(decoded.length);

typedArray=decoded.getChannelData(0);
console.log("typedArray:");
console.log(typedArray);

}

感谢您的回答!

Answer 1

您需要学习很多关于 Web API 的知识才能实现这一点，但最终它非常简单。

1. 使用 File API 获取 ArrayBuffer 中的文件内容
2. 传递给Web Audio API的 decodeAudioData方法。
3. 获取带有所需原始样本的类型化 ArrayBuffer。

编辑:如果您想实现均衡器，那是在浪费时间，音频 API 中有一个 native 均衡器节点。根据波形文件的长度，最好不要将其全部加载到内存中，而是创建一个从中读取的源并将该源连接到均衡器节点。