从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 中有一个原生均衡器节点。根据波形文件的长度，最好不要将其全部加载到内存中，而只是创建一个从中读取的源并将该源连接到均衡器节点。