Web-Audio Api和Javascript：从麦克风中获取正确的选择

Question

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

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

或者可能是Mac OS录音机

我有一个完整的codepen示例请查看，但我的问题是我正在使用这个：

obj.analyser.getByteFrequencyData(obj.frequencyArray)

对于这种特殊情况，获取峰值并生成波形图是否正确？像wavesurfer library或者我可能需要更多地了解音频或使用一些数学，我不知道我被卡住了。

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

编辑：添加更多信息：基于布拉德在我的示例中更改的答案getByteTimeDomainData（）

我查看了getByteTimeDomain的方法，并用于创建示波器可视化。我在这个例子中更改为此方法，它看起来不像。查看字节数组，当没有声音时，minimun为100，但是可能是我的实现。 new Codepen Example here顺便说一下，我正在采用ByteFrequencyArray的最大数量，因为我不知道从那里获取峰值的正确策略是什么，也许有其他方法可以做到这一点？代码示例如下：

;

Answer 1

您在屏幕截图中看到的内容实际上是在时域中。

为此，你会想要使用

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
})

或getByteTimeDomainData()。