网络音频Api和Javascript：从麦克风中获取正确的选择

Question

我正在做一些实验，并根据麦克风实时接收到的数据进行可视化。

在这种情况下，我想创建一个像这样的可视化文件： https://online-voice-recorder.com/es/

或Mac OS录音机

我在下面有一个完整的Codepen示例，请查看，但我的问题是我正在使用它：

obj.analyser.getByteFrequencyData(obj.frequencyArray)

是否针对这种特殊情况进行校正以获得峰值并生成波形图？例如wavesurfer library，或者也许我需要了解更多有关音频的知识或使用一些数学知识，但我不知道自己会陷入困境。

这是我完整的Codepen示例： https://codepen.io/davidtorroija/pen/bZXeqb

已编辑： 添加更多信息： 根据Brad在我的示例中更改的答案getByteTimeDomainData（）

我研究了getByteTimeDomain的方法，该方法用于创建示波器可视化。在本示例中，我更改为此方法，但它看起来并不像。从字节数组中查看，最小值为100，这在没有声音的情况下很高new Codepen Example here 但是也许是我的实现。 顺便说一下，我正在使用ByteFrequencyArray的最大数量，因为我不知道从那里获得峰值的正确策略是什么，也许还有其他方法可以做到这一点？下面的代码示例：

obj.analyser.getByteTimeDomainData(obj.frequencyArray)


for (var i = 0; i< obj.frequencyArray.length;  i++) {
        if(obj.frequencyArray[i] > max) {
          max = obj.frequencyArray[i];
        } 
      }

var freq = Math.floor(max);

obj.bars.push({
    x: obj.width,
    y: (obj.height / 2) - (freq / 2),
    height: max,
    width: 5
})

;

Answer 1

您在屏幕快照中看到的实际上是在时域中。

为此，您将需要使用getByteTimeDomainData()或getFloatTimeDomainData()。