当前位置：首页 > JavaScript

js 实现频谱

2026-04-06 04:55:45JavaScript

频谱分析实现方法

使用 Web Audio API

Web Audio API 提供了音频处理能力，可以获取音频信号的频谱数据。需要创建音频上下文、分析器节点和数据处理逻辑。

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

// 创建分析器节点
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048; // 设置FFT大小

// 连接音频源
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
  });

// 获取频谱数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function getSpectrum() {
  analyser.getByteFrequencyData(dataArray);
  return dataArray;
}

使用 Canvas 可视化

获取频谱数据后，可以通过 Canvas 实现可视化效果。需要定时获取数据并绘制到画布上。

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

function drawSpectrum() {
  requestAnimationFrame(drawSpectrum);

  const spectrumData = getSpectrum();
  ctx.clearRect(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 = spectrumData[i] / 2;
    ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }
}

使用第三方库

对于更复杂的频谱效果，可以考虑使用现成的音频可视化库：

js 实现频谱

Wavesurfer.js：提供完整的音频波形和频谱显示功能
P5.js：包含音频分析和可视化工具
Three.js：结合WebGL实现3D频谱效果

// 使用wavesurfer.js示例
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple',
  backend: 'WebAudio',
  plugins: [
    WaveSurfer.spectrogram.create({
      container: '#spectrogram'
    })
  ]
});