当前位置：首页 > VUE

vue实现语谱图

2026-02-21 00:28:38VUE

Vue 实现语谱图

音频数据处理

使用 Web Audio API 的 AnalyserNode 获取音频频率数据。通过 getByteFrequencyData 方法将音频数据转换为 Uint8Array 数组，用于后续绘制语谱图。

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

Canvas 绘制

在 Vue 的 mounted 钩子中初始化 Canvas，并通过 requestAnimationFrame 实现动态绘制。每次绘制时，将新的频率数据作为语谱图的一列添加到画布上。

vue实现语谱图

mounted() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  let width = canvas.width;
  let height = canvas.height;

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);

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

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

    for (let i = 0; i < bufferLength; i++) {
      const barHeight = (dataArray[i] / 255) * height;
      ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
      ctx.fillRect(x, height - barHeight, barWidth, barHeight);
      x += barWidth + 1;
    }
  }
  draw();
}

动态更新

通过 Vue 的响应式特性，结合音频播放事件实时更新语谱图。可以使用 watch 监听音频播放状态，触发绘制逻辑。

vue实现语谱图

watch: {
  isPlaying(newVal) {
    if (newVal) {
      this.drawSpectrogram();
    }
  }
}

性能优化

对于长时间运行的语谱图，采用双缓冲技术或减少绘制频率以提高性能。可以通过调整 requestAnimationFrame 的调用间隔或使用 Web Worker 处理音频数据。

let lastTime = 0;
function draw(time) {
  if (time - lastTime > 100) {
    // 绘制逻辑
    lastTime = time;
  }
  requestAnimationFrame(draw);
}

样式定制

通过修改 Canvas 的填充样式和颜色映射，实现不同风格的语谱图效果。可以使用线性渐变或 HSL 颜色模式增强可视化效果。

const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, 'rgba(0, 0, 255, 0.8)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 0.8)');
ctx.fillStyle = gradient;

以上方法结合了 Web Audio API 和 Vue 的响应式特性，实现了动态语谱图的绘制与更新。