VUE篇之音频播放可视化

最新推荐文章于 2025-10-25 10:47:43 发布

原创

最新推荐文章于 2025-10-25 10:47:43 发布 · 668 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #音视频 #javascript

<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 = (