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

;

Answer 1

您在屏幕截圖中看到的實際上是在時域中。

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