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才能实现这一目标，但最终它非常简单。

使用File API在ArrayBuffer中获取文件内容
将其传递给Web Audio API＆＃39; decodeAudioData方法。
使用您想要的原始样本获取一个类型化的ArrayBuffer。

编辑：如果你想实现一个均衡器，你就会浪费时间，那么Audio API中有一个原生的均衡器节点。根据波形文件的长度，最好不要将它全部加载到内存中，而只是创建一个从中读取并将该源连接到均衡器节点的源。

从wav文件中读取样本

1 个答案: