VUE篇之音频播放可视化

<template>
  <div class="audio">
    <canvas ref="canvasRef"></canvas>
    <audio ref="aduioRef" controls @play="playAudio">
      <source src="../assets/home.mp3" type="audio/mp3" />
      <source src="../assets/home.mp3" type="audio/ogg" />
      <p>你的浏览器不支持该音频</p>
    </audio>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue';
const canvasRef: Ref<HTMLCanvasElement> = ref(document.getElementsByTagName('canvas')[0]);
const aduioRef = ref<HTMLAudioElement | null>(null);
const ctx = ref<any>(null);
const audioContext = ref<any>(null);
const source = ref<any>(null);
const analyser = ref<any>(null);
const dataArray = ref<Uint8Array>(new Uint8Array());

onMounted(() => {
  ctx.value = canvasRef.value && canvasRef.value.getContext('2d');
  initCanvas();
});

// 初始化canvas
const initCanvas = () => {
  canvasRef.value.width = 600;
  canvasRef.value.height = 400;
}
const playAudio = () => {
  // 音频源->音频节点->分析节点(输出到canvas里面)->输出节点（播放）
  audioContext.value = new AudioContext();
  source.value = audioContext.value.createMediaElementSource(aduioRef.value);
  analyser.value = new AnalyserNode(audioContext.value);
  source.value.connect(analyser.value);
  analyser.value.connect(audioContext.value.destination);
  analyser.value.fftSize = 512;
  const bufferLength = analyser.value.fftSize;
  dataArray.value = new Uint8Array(bufferLength / 2);



  draw();
}

const draw = () => {
  requestAnimationFrame(draw);
  ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
  analyser.value.getByteFrequencyData(dataArray.value);
  const len=dataArray.value.length/3;
  const barW = canvasRef.value.width / len;
  for (var i = 0; i < len; i++) {
    const x = i * barW;
    const barH = dataArray.value[i] / 255 * canvasRef.value.height;
    const y = canvasRef.value.height - barH;
    ctx.value.fillStyle = 'rgb(200, 200, 200)';
    ctx.value.fillRect(x, y, barW-2, barH);
  }

}
</script>

<style scoped>
.audio {
  height: 100%;
  width: 100%;
}

canvas {
  border: 1px solid black;
}
</style>