Vue 3 音频可视化工具异常：音频无法播放、画布无更新且控制台无报错

看起来你遇到了几个典型的 Web Audio + Vue 3/Pinia 组合的问题，控制台没报错确实很头疼，我来帮你一步步排查解决：

一、音频无法播放的核心问题 #

1. 轨道切换逻辑的状态冲突 #

你的nextTrack()和prevTrack()里，先调用了setCurrentTrack(id)，再调用togglePlay(id)，但setCurrentTrack里会把目标轨道的isPlaying取反（track.isPlaying = !track.isPlaying），这就导致togglePlay执行时，轨道的播放状态被切换了两次，最终回到初始状态，音频自然不会播放！

修复方案：修改setCurrentTrack，只负责切换当前轨道，不修改播放状态：

const setCurrentTrack = (id) => {
  // 先暂停所有正在播放的轨道
  tracks.value.forEach(t => {
    if (t.isPlaying) {
      t.audio.pause();
      t.isPlaying = false;
    }
  });
  // 切换到目标轨道
  currentTrack.value = tracks.value.find(track => track.id === id);
};

这样nextTrack/prevTrack调用setCurrentTrack后，再调用togglePlay就只会触发一次播放逻辑了。

2. 未捕获play()的Promise错误 #

浏览器的audio.play()返回一个Promise，如果播放被拒绝（比如音频未加载完成、权限问题），不会在控制台直接报错，除非你手动捕获。

修复方案：在togglePlay里添加错误捕获，同时确保音频加载完成：

const togglePlay = async (id) => {
  const track = tracks.value.find(t => t.id === id);
  if (!track) return;

  if (track.isPlaying) {
    track.audio.pause();
    track.isPlaying = false;
  } else {
    // 等待音频加载就绪
    if (track.audio.readyState < 3) { // HAVE_FUTURE_DATA
      await track.audio.load();
    }
    try {
      // 播放音频
      await track.audio.play();
      track.isPlaying = true;
      currentTrack.value = track;
      // 暂停其他轨道
      tracks.value.forEach(t => {
        if (t.id !== id && t.isPlaying) {
          t.audio.pause();
          t.isPlaying = false;
        }
      });
    } catch (err) {
      console.error('音频播放失败:', err);
      track.isPlaying = false;
    }
  }
};

二、进度条不更新的问题 #

你没有监听音频的timeupdate和loadedmetadata事件，导致currentTime和duration字段一直是初始值0，进度条自然不会动！

修复方案：在加载轨道时，给音频对象添加事件监听：
在setTracks函数的track对象创建后，添加以下代码：

// 监听音频元数据加载完成，获取总时长
track.audio.addEventListener('loadedmetadata', () => {
  const total = track.audio.duration;
  const minutes = Math.floor(total / 60);
  const seconds = Math.floor(total % 60);
  track.duration = { total, minutes, seconds };
});

// 监听播放进度更新，实时同步currentTime
track.audio.addEventListener('timeupdate', () => {
  const total = track.audio.currentTime;
  const minutes = Math.floor(total / 60);
  const seconds = Math.floor(total % 60);
  track.currentTime = { total, minutes, seconds };
});

// 监听音频播放结束，自动切下一曲
track.audio.addEventListener('ended', () => {
  nextTrack();
});

另外，如果你发现修改track的属性后响应式有延迟，建议把track定义为reactive对象（因为普通对象嵌套属性的响应式在ref数组里可能有兼容问题）：

const track = reactive({
  id: tracks.value.length,
  name: path.split('/').pop(),
  src: fileModule.default,
  audio: audio,
  isPlaying: false,
  volume: 1.0,
  currentTime: { total: 0, minutes: 0, seconds: 0 },
  duration: { total: 0, minutes: 0, seconds: 0 },
});

三、可视化画布空白的问题 #

1. AudioContext的浏览器限制 #

浏览器的AudioContext默认会被暂停，必须通过用户交互（比如点击播放按钮）才能恢复，而且必须正确关联到音频源。

2. 可视化组件的初始化逻辑问题 #

你的Visualizer组件需要在音频播放时，动态创建AnalyserNode并关联到当前轨道的音频对象，同时确保动画循环正常运行。

参考修复后的Visualizer组件代码：

<template>
  <canvas ref="canvas" class="visualizer-canvas"></canvas>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { useStore } from 'pinia';

const store = useStore();
const canvas = ref(null);
let audioContext = null;
let analyser = null;
let source = null;
let animationId = null;

// 初始化可视化
const initVisualizer = (audio) => {
  // 清理旧资源
  if (animationId) cancelAnimationFrame(animationId);
  if (source) source.disconnect();

  // 创建/恢复AudioContext
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }
  if (audioContext.state === 'suspended') {
    audioContext.resume();
  }

  // 创建分析器节点
  analyser = audioContext.createAnalyser();
  analyser.fftSize = 256;
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  // 关联音频源
  source = audioContext.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(audioContext.destination);

  // 绘制可视化图形
  const draw = () => {
    animationId = requestAnimationFrame(draw);
    const ctx = canvas.value?.getContext('2d');
    if (!ctx) return;

    // 清空画布
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
    // 获取频率数据
    analyser.getByteFrequencyData(dataArray);

    // 绘制柱状频谱
    const barWidth = (canvas.value.width / bufferLength) * 2.5;
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
      const barHeight = (dataArray[i] / 255) * canvas.value.height;
      ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
      ctx.fillRect(x, canvas.value.height - barHeight, barWidth, barHeight);
      x += barWidth + 1;
    }
  };
  draw();
};

// 监听当前轨道和播放状态变化
watch(
  [() => store.currentTrack, () => store.currentTrack?.isPlaying],
  ([newTrack, isPlaying]) => {
    if (newTrack && isPlaying) {
      initVisualizer(newTrack.audio);
    } else {
      if (animationId) cancelAnimationFrame(animationId);
    }
  },
  { immediate: true }
);

// 设置画布尺寸
onMounted(() => {
  if (!canvas.value) return;
  canvas.value.width = canvas.value.offsetWidth;
  canvas.value.height = 120; // 固定高度，避免缩放问题
  // 监听窗口 resize 调整画布宽度
  window.addEventListener('resize', () => {
    if (canvas.value) canvas.value.width = canvas.value.offsetWidth;
  });
});

// 组件卸载时清理资源
onUnmounted(() => {
  if (animationId) cancelAnimationFrame(animationId);
  if (source) source.disconnect();
  if (audioContext) audioContext.close();
});
</script>

<style scoped>
.visualizer-canvas {
  width: 100%;
  height: 120px;
  background-color: #1a1a1a;
}
</style>

最后几个注意事项 #

1. 确保所有音频操作都在用户交互（点击播放按钮）后触发，避免浏览器的自动播放政策限制。
2. 检查你的Pinia store中，tracks数组里的对象是否是响应式的，建议用reactive定义每个track，而不是普通对象。
3. 可以在浏览器的DevTools的Media标签页，查看音频对象的实际播放状态，排查是否真的在播放。

内容来源于stack exchange