从 wav 文件中读取样本

Question

我正在尝试在 html5 中制作一个网页，该网页将来自 wav 文件的示例数据存储在一个数组中。有什么方法可以用 javascript 获取样本数据吗？我正在使用 select 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 的知识才能实现这一点，但最终它非常简单。

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

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

从 wav 文件中读取样本

Read samples from wav-file

javascript

arrays

wav