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

Question

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

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

或者 Mac OS 录音机

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

obj.analyser.getByteFrequencyData(obj.frequencyArray)

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

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

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

我查看了 getByteTimeDomain 的方法，并用于创建示波器可视化。我在这个例子中改成了这个方法，它看起来不像。查看字节数组，当这里没有声音新的 Codepen 示例时，最小值为 100， 但可能是我的实现。 顺便说一句，我正在获取 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
})

;

标签： javascriptaudioweb-audio-apimediarecorderwavesurfer.js

Answer 1

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

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