时间戳

首页 > 解决方案 > 如何解释 Web Audio API getByteFrequencyData 0 值？

d3.js - 如何解释 Web Audio API getByteFrequencyData 0 值？

问题描述

我实际上正在使用 Web Audio API 和 D3 开始一个关于音乐可视化的小项目。我使用的getByteFrequencyData()方法如下（为了清楚起见，已经修改了实现。这只是一个“设置模型”）：

const ctx = new (window.AudioContext || window.webkitAudioContext)()
const analyzer = ctx.createAnalyser()
const src = ctx.createMediaElementSource(audioPlayer)

analyzer.fftSize = 512

src.connect(analyzer)
src.connect(ctx.destination)

//...

const getFrequencyData = () => {
  audioAnimationFrameId.current = requestAnimationFrame(getFrequencyData)
  
  const bufferLength = audioAnalyzer.frequencyBinCount
  const data = new Uint8Array(bufferLength) // 256

  audioAnalyzer.getByteFrequencyData(data)

  return data
}

if (audioAnalyzer && isAudioPlaying) getFrequencyData()

我的问题是，在我的 Uint8Array 上，我得到了很多“0”（主要在数组的末尾），这打破了我的径向图表（因为 D3 比例域取决于数据数组长度）。我知道这些值代表某个频率的分贝，但是最后得到所有这些零是正常的吗？

我猜我可能错过了分析仪上的一些配置，但是经过大量测试后我找不到任何解决方案......我错过了什么，或者这些值是否正确，最后是 D3我应该改变的规模？

这是我的 D3 秤：

const angle = scaleLinear({
  domain: [0, 256], // NB: the array length
  range: [0, Math.PI * 2]
})

const radius = scaleLinear({
  domain: [0, 255], // NB: frequency data goes from 0 to 255
  range: [0, (DIAMETER / 2)]
})

如果有人能帮助我理解这些奇怪的结果，那就太好了！

多谢！

标签： d3.jsdata-visualizationweb-audio-api

解决方案

请参阅getByteFrequencyData的规范。那里的公式解释了为什么值为零。基本上在较高频率下，实际 dB 值低于 dB_min，因此它被钳制为零。如果您不想要这个并且可以使用浮点值，请使用getFloatFrequencyData。

推荐阅读