Vue.js 中实现音效轮播：避免连续重复播放同一声音-js教程-PHP中文网

Vue.js 中实现音效轮播：避免连续重复播放同一声音

本文讲解如何在 Vue 3（Composition API）中实现按钮点击时随机播放一组音效，同时确保绝不连续两次播放同一音效，通过动态过滤 + 随机索引方案解决原始逻辑中“误用未过滤数组索引”的关键错误。

本文讲解如何在 vue 3（composition api）中实现按钮点击时随机播放一组音效，同时确保**绝不连续两次播放同一音效**，通过动态过滤 + 随机索引方案解决原始逻辑中“误用未过滤数组索引”的关键错误。

在构建翻页音效、交互反馈音或游戏 UI 音效系统时，频繁重复同一音效会显著降低用户体验的真实感与沉浸感。你可能已定义好 5 个页面翻转音效（Sfx1–Sfx5），并希望每次点击按钮都随机选择一个——但必须排除上一次刚播放过的那个。原始代码的问题在于：虽然尝试用 toSpliced() 过滤 lastPlayedIndex，但该操作在组件初始化时执行（此时 lastPlayedIndex.value 为 null），且 playableSounds 被声明为常量而非响应式计算值，导致后续点击始终基于初始（未更新）的过滤结果；更关键的是，它从原始 sounds 数组而非过滤后数组中取值，造成逻辑失效。

✅ 正确做法是：每次触发播放前，实时生成排除上一次音效的新数组，并从中随机选取。以下是优化后的 Vue 3 Composition API 实现：

<template><button class="book__nav-btn">
    <slot></slot></button>
</template><script setup>
import { ref } from 'vue';
import Sfx1 from '@/assets/sounds/page-turn-1.mp3?url';
import Sfx2 from '@/assets/sounds/page-turn-2.mp3?url';
import Sfx3 from '@/assets/sounds/page-turn-3.mp3?url';
import Sfx4 from '@/assets/sounds/page-turn-4.mp3?url';
import Sfx5 from '@/assets/sounds/page-turn-5.mp3?url';

const sounds = [Sfx1, Sfx2, Sfx3, Sfx4, Sfx5];
const lastPlayedSound = ref(null); // 存储上一次实际播放的音频 URL（非索引！）

const getRandomSoundExcludingLast = () => {
  const filtered = sounds.filter(sound => sound !== lastPlayedSound.value);
  // 若所有音效都被排除（极端情况，如仅剩1个音效且被禁用），回退到全集
  const candidates = filtered.length > 0 ? filtered : sounds;
  const randomIndex = Math.floor(Math.random() * candidates.length);
  return candidates[randomIndex];
};

const playTurnSfx = () => {
  const nextSound = getRandomSoundExcludingLast();
  const audio = new Audio(nextSound);
  audio.volume = 0.1;

  // 播放成功后更新 lastPlayedSound；失败时保持原值，避免状态错乱
  audio.onloadeddata = () => {
    lastPlayedSound.value = nextSound;
  };
  audio.onerror = (e) => {
    console.warn('Failed to load or play sound:', nextSound, e);
  };

  audio.play().catch(console.error);
};
</script>

? 关键要点说明：

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

✅ 使用 ref 响应式存储 lastPlayedSound.value（音频 URL 字符串），而非索引——更直观、不易出错；
✅ getRandomSoundExcludingLast() 在每次点击时动态执行过滤与随机，确保逻辑始终基于最新状态；
✅ 加入 onloadeddata 回调，在音频真正加载成功后才更新 lastPlayedSound，避免因加载失败导致状态滞后；
⚠️ 注意：若音效文件极小或已预加载，onloadeddata 可能立即触发；若需更高可靠性（如网络波动场景），可结合 audio.readyState 或添加超时兜底；
? 扩展建议：如需支持「最近 N 个不重复」，可用 ref([]) 维护一个 FIFO 队列，配合 Array.prototype.includes() 过滤。