vue 音频可视化

在Vue中实现音频可视化，可以使用canvas来绘制音频信号的图形表示。以下是一个简单的例子：

<template>
  <div>
    <audio ref="audio" src="your-audio-file.mp3" controls></audio>
    <canvas ref="canvas"></canvas>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.setupAudioVisualizer();
  },
  methods: {
    setupAudioVisualizer() {
      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const audioElement = this.$refs.audio;
      const sourceNode = audioCtx.createMediaElementSource(audioElement);
      const analyser = audioCtx.createAnalyser();
 
      sourceNode.connect(analyser);
      analyser.connect(audioCtx.destination);
 
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const dataArray = new Uint8Array(analyser.frequencyBinCount);
      const barWidth = (canvas.width / analyser.frequencyBinCount);
      const barHeight = canvas.height;
 
      canvas.width = 800;
      canvas.height = 200;
 
      function renderFrame() {
        requestAnimationFrame(renderFrame);
        analyser.getByteTimeDomainData(dataArray);
 
        ctx.fillStyle = 'rgb(200, 200, 200)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgb(0, 0, 0)';
 
        ctx.beginPath();
        for (let i = 0; i < analyser.frequencyBinCount; i++) {
          const x = i * barWidth;
          const y = dataArray[i] / 128 * barHeight;
          if (i === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        ctx.lineTo(canvas.width, canvas.height);
        ctx.stroke();
      }
 
      renderFrame();
    }
  }
};
</script>

在这个例子中，我们首先在mounted钩子中设置音频可视化的基础设施。创建一个AudioContext，然后用它来创建一个MediaElementSource来处理音频元素。接着，我们创建一个AnalyserNode来分析音频信号。

然后，我们设置canvas的尺寸并创建一个绘图上下文。接着，我们创建一个Uint8Array来存储频率数据，并计算每个条形的宽度。

在renderFrame函数中，我们在每一帧都请求动画帧，获取时域数据，并使用这些数据在canvas上绘制条形图。这将实时反映音频信号的可视化。