当前位置：首页 > JavaScript

js 实现频谱

2026-03-14 10:56:26JavaScript

使用 Web Audio API 实现频谱分析

通过 Web Audio API 可以获取音频信号的频谱数据。以下是一个完整的实现示例：

// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 获取麦克风输入
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    const analyser = audioContext.createAnalyser();

    // 连接节点
    source.connect(analyser);

    // 设置FFT大小（决定频率分量的数量）
    analyser.fftSize = 256;

    // 创建用于存储频率数据的数组
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    // 绘制频谱
    function draw() {
      requestAnimationFrame(draw);

      // 获取频率数据
      analyser.getByteFrequencyData(dataArray);

      // 这里可以添加绘制逻辑
      console.log(dataArray); // 输出频率数据
    }

    draw();
  })
  .catch(err => {
    console.error('获取麦克风失败:', err);
  });

使用 Canvas 可视化频谱

将频谱数据可视化为柱状图：

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

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

  for(let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i] / 2;

    ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

    x += barWidth + 1;
  }
}

分析音频文件频谱

对于预录制的音频文件，可以使用以下方式分析：

const audioElement = document.querySelector('audio');
const track = audioContext.createMediaElementSource(audioElement);
track.connect(analyser);
analyser.connect(audioContext.destination);

audioElement.play();

自定义频谱参数

调整频谱分析的精细度：

js 实现频谱

// 更大的FFT尺寸提供更多频率细节但性能开销更大
analyser.fftSize = 2048; 

// 获取时域数据（波形）
const timeData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(timeData);