使用带有实时输入的 getFloatFrequencyData 不获取网络音频中的频率数据

Question

工作示例：https://codepen.io/anon/pen/RGmVgG

我有代码可以获取实时麦克风输入数据并将其输出到系统默认扬声器。我已验证我正在获取数据。

然后我试图获取频率数据，但它 returns 作为 -Infinity 的数组（或在 Firefox 中为 -100）。

为此，我已经阅读了 MDN 文档，似乎一切都准备就绪，但我没有获得频率数据。知道我需要做些什么吗？

html

Audio Data:
<div id="audio-data"></div>

Frequency Data:
<div id="frequency-data"></div>

js

window.addEventListener('load', () => {
  navigator.mediaDevices.getUserMedia({audio: true})
    .then((stream) => {
      const audioDataDisplay = document.querySelector('#audio-data');
      const frequencyDataDisplay = document.querySelector('#frequency-data');
      const context = new AudioContext();
      const source = context.createMediaStreamSource(stream);
      const processor = context.createScriptProcessor(256, 1, 1);

      source.connect(processor);
      processor.connect(context.destination);

      // route default microphone audio to default speaker output for system
      // display live audio buffer data
      processor.onaudioprocess = (data) => {
        const channelCount = data.outputBuffer.numberOfChannels;

        for (let i = 0; i < channelCount; i++) {
          const inputChannelData = data.inputBuffer.getChannelData(i);
          const outputChannelData = data.outputBuffer.getChannelData(i);

          for (let j = 0; j < inputChannelData.length; j++) {
            outputChannelData[j] = inputChannelData[j];
          }

          audioDataDisplay.innerHTML = outputChannelData;
        }
      }

      // analyze the frequency data and display data
      // only shows as an array of -Infinity in Chrome, -100 in Firefox.
      const analyser = context.createAnalyser();
      const dataArray = new Float32Array(analyser.frequencyBinCount);

      setInterval(() => {
        analyser.getFloatFrequencyData(dataArray);
        frequencyDataDisplay.innerHTML = dataArray;
      }, 1000);
  });
});

Answer 1

您永远不会将任何东西连接到您的分析器节点。添加类似

的内容

    source.connect(analyser);

创建分析器后。