vue使用audio实现频谱

使用 Vue 实现音频频谱分析

在 Vue 中实现音频频谱分析需要结合 Web Audio API 和 Canvas 技术。以下是一个完整的实现方案：

初始化音频上下文

创建 Vue 组件时初始化 Web Audio API 相关对象：

data() {
  return {
    audioContext: null,
    analyser: null,
    dataArray: null,
    source: null
  }
},
methods: {
  initAudioContext() {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
    this.analyser = this.audioContext.createAnalyser()
    this.analyser.fftSize = 256
    const bufferLength = this.analyser.frequencyBinCount
    this.dataArray = new Uint8Array(bufferLength)
  }
}

处理音频源

设置音频源并连接到分析器：

methods: {
  setupAudioSource(audioElement) {
    this.source = this.audioContext.createMediaElementSource(audioElement)
    this.source.connect(this.analyser)
    this.analyser.connect(this.audioContext.destination)
  }
}

绘制频谱

使用 Canvas 绘制频谱：

methods: {
  drawSpectrum() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const width = canvas.width
    const height = canvas.height

    this.analyser.getByteFrequencyData(this.dataArray)

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

    const barWidth = (width / this.dataArray.length) * 2.5
    let x = 0

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

    requestAnimationFrame(this.drawSpectrum)
  }
}

组件模板

在模板中添加 audio 元素和 canvas：

<template>
  <div>
    <audio ref="audio" src="your-audio-file.mp3" controls @play="startVisualizer"></audio>
    <canvas ref="canvas" width="600" height="300"></canvas>
  </div>
</template>

启动可视化

当音频播放时启动可视化：

methods: {
  startVisualizer() {
    this.initAudioContext()
    this.setupAudioSource(this.$refs.audio)
    this.drawSpectrum()
  }
}

完整组件示例

<template>
  <div>
    <audio ref="audio" src="your-audio-file.mp3" controls @play="startVisualizer"></audio>
    <canvas ref="canvas" width="600" height="300"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audioContext: null,
      analyser: null,
      dataArray: null,
      source: null
    }
  },
  methods: {
    initAudioContext() {
      this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
      this.analyser = this.audioContext.createAnalyser()
      this.analyser.fftSize = 256
      const bufferLength = this.analyser.frequencyBinCount
      this.dataArray = new Uint8Array(bufferLength)
    },
    setupAudioSource(audioElement) {
      this.source = this.audioContext.createMediaElementSource(audioElement)
      this.source.connect(this.analyser)
      this.analyser.connect(this.audioContext.destination)
    },
    drawSpectrum() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const width = canvas.width
      const height = canvas.height

      this.analyser.getByteFrequencyData(this.dataArray)

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

      const barWidth = (width / this.dataArray.length) * 2.5
      let x = 0

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

      requestAnimationFrame(this.drawSpectrum)
    },
    startVisualizer() {
      this.initAudioContext()
      this.setupAudioSource(this.$refs.audio)
      this.drawSpectrum()
    }
  }
}
</script>

注意事项

1. 确保在用户交互后初始化 AudioContext，某些浏览器要求音频上下文必须在用户手势后创建
2. 调整 analyser.fftSize 可以改变频谱的精度，值越大精度越高但性能消耗越大
3. 频谱可视化效果可以通过修改 Canvas 绘制代码来调整，如改变颜色、形状等
4. 在组件销毁时应该关闭音频上下文，避免内存泄漏

这个实现展示了基本的音频频谱可视化，可以根据需要进一步扩展功能，如添加多种可视化效果、控制参数等。