如何在 javascript 中对来自麦克风的音频进行采样，以制作麦克风动画？答案

【问题标题】：How do I sample audio from microphone in javascript, for microphone animation?如何在 javascript 中对来自麦克风的音频进行采样，以制作麦克风动画？
【发布时间】：2022-12-10 02:32:59
【问题描述】：

我正在使用 MediaStream Recording API 在浏览器中从麦克风录制音频。我想为用户提供脉动麦克风图标的视觉反馈。像这样的东西，只与麦克风的实际声音幅度有关。 https://codepen.io/megwayne/pen/bWOYEj我该怎么做？

我正在录制这样的音频：

    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    const audioChunks = [];

    mediaRecorder.addEventListener("dataavailable", event => {
      audioChunks.push(event.data);
    });

【问题讨论】：

您只需将 animation CSS 属性从 pulse 3s 切换为 none，反之亦然。
是的，但我的问题是关于 MediaStream Recording API。
但是，既然你提到了它，也许你可以帮我解决这个问题。我如何修改 CSS 以使这个麦克风缩小大约 5 倍并使其适合工具栏？按下它会打开和关闭录音。

标签： javascript audio html5-audio mediastream

【解决方案1】：

要在 JavaScript 中对来自麦克风的音频进行采样，您可以使用 Web Audio API。此 API 允许您使用 JavaScript 在 Web 浏览器中创建和操作音频。以下是如何使用 Web Audio API 从麦克风采样音频的示例：

// Create a new audio context
const audioContext = new AudioContext();

// Create an audio input
const mic = audioContext.createMediaStreamSource(audioStream);

// Connect the audio input to a filter node
const filter = audioContext.createBiquadFilter();
mic.connect(filter);

// Connect the filter node to the destination (i.e. the speakers)
filter.connect(audioContext.destination);

此代码创建一个新的音频上下文，它是在 Web Audio API 中管理音频的对象。然后它从麦克风创建音频输入并将其连接到过滤器节点。最后，它将过滤器节点连接到目的地，在本例中为扬声器。

要为麦克风设置动画，您可以使用音频输入来创建正在采样的音频的可视化表示。您可以使用来自音频输入的数据来实时更新动画。

要在 JavaScript 中创建采样音频的可视化表示，您可以使用 Web Audio API 来分析音频数据。此 API 提供了许多可用于访问音频数据的方法和属性，包括 AnalyserNode 对象。该对象允许您对音频数据执行频域分析，然后您可以使用它来创建音频的可视化表示。

下面是一个示例，说明如何使用 AnalyserNode 对象在 JavaScript 中创建采样音频的可视化表示：

// Create a new audio context
const audioContext = new AudioContext();

// Create an audio input
const mic = audioContext.createMediaStreamSource(audioStream);

// Create an analyser node
const analyser = audioContext.createAnalyser();

// Connect the audio input to the analyser node
mic.connect(analyser);

// Create a frequency data array
const frequencyData = new Uint8Array(analyser.frequencyBinCount);

// Update the frequency data array with the current audio data
analyser.getByteFrequencyData(frequencyData);

// Use the frequency data to create a visual representation of the audio
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Loop through the frequency data and draw a bar for each value
for (let i = 0; i < frequencyData.length; i++) {
  // Calculate the bar height
  const barHeight = frequencyData[i] / 256 * canvas.height;

  // Draw the bar
  ctx.fillRect(i * 2, canvas.height - barHeight, 2, barHeight);
}

此代码创建一个 AnalyserNode 对象并使用它来分析来自麦克风的音频数据。然后它创建一个频率数据数组，并使用 getByteFrequencyData 方法用当前音频数据更新它。最后，它使用此数据在画布元素上绘制条形图，其中每个条形图的高度对应于该时间点的音频频率。

您可以使用这种方法为采样音频创建各种不同的可视化效果。您还可以通过调用 getByteFrequencyData 方法并循环重绘可视化来实时更新可视化。

【讨论】：