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

Question

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

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

或者 Mac OS 录音机

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

obj.analyser.getByteFrequencyData(obj.frequencyArray)

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

这是我的完整代码笔示例： 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() or getFloatTimeDomainData()。

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

Web-Audio Api and Javascript: Get the correct picks from microphone

javascript

audio

mediarecorder

web-audio-api

wavesurfer.js