Web Audio 的魅力：踏入声波世界的奇幻之旅#

2023-10-31 07:27:05

AudioContext 的艺术

Web Audio API 的 AudioContext 是一个强大的工具，使我们能够在网络浏览器中操作和处理音频数据。它为音频分析、合成和处理提供了丰富的功能。

绘制声波图：从声音到视觉

音波图是将音频数据转换为可视化表示的过程。AudioContext 的 analyser 节点充当音频分析工具，它提供频域数据，显示声音的频率和强度分布。

分析声音

要获取音频数据，我们需要将音频流连接到 analyser 节点。AudioContext 提供了 connect() 方法，使我们能够将音频节点链接在一起。

const analyser = audioContext.createAnalyser();
analyser.connect(audioContext.destination);

设置 FFT 参数

analyser 节点有一个称为 FFTSize 的参数，它确定用于进行快速傅里叶变换 (FFT) 的样本数量。FFT 将时域信号转换为频域表示。

analyser.fftSize = 2048;

获取频域数据

我们可以使用 getByteFrequencyData() 方法从 analyser 节点获取频域数据。它将频率数据存储在一个字节数组中，代表每个频率 bin 的强度。

const frequencyData = new Uint8Array(analyser.frequencyBinCount);

绘制音波图

现在我们有了频域数据，是时候将其可视化为音波图了。我们可以使用 Canvas 绘图 API 或其他可视化库来绘制音波图。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

设置画布

设置画布的大小并清除它。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

绘制音波图

遍历频率数据并绘制每个频率 bin。

for (let i = 0; i < analyser.frequencyBinCount; i++) {
  const x = i * (canvas.width / analyser.frequencyBinCount);
  const y = canvas.height - frequencyData[i];
  ctx.fillStyle = "hsl(" + (i / analyser.frequencyBinCount) * 360 + ", 100%, 50%)";
  ctx.fillRect(x, y, 1, canvas.height);
}