本文讲解如何在 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" @click="playTurnSfx">
<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>? 关键要点说明：
- ✅ 使用
ref响应式存储lastPlayedSound.value（音频 URL 字符串），而非索引——更直观、不易出错； - ✅
getRandomSoundExcludingLast()在每次点击时动态执行过滤与随机，确保逻辑始终基于最新状态； - ✅ 加入
onloadeddata回调，在音频真正加载成功后才更新lastPlayedSound，避免因加载失败导致状态滞后； - ⚠️ 注意：若音效文件极小或已预加载，
onloadeddata可能立即触发；若需更高可靠性（如网络波动场景），可结合audio.readyState或添加超时兜底； - ? 扩展建议：如需支持「最近 N 个不重复」，可用
ref([])维护一个 FIFO 队列，配合Array.prototype.includes()过滤。
此方案简洁、健壮、符合 Vue 响应式设计原则，完美解决“同音连播不自然”问题，让交互音效更具专业质感。
立即学习“前端免费学习笔记（深入）”；
