中奖弹窗音效需监听中奖状态变化后，在DOM渲染完成时播放预加载音频，避免重复触发与浏览器静音限制，并提供异常降级和用户设置选项。
中奖弹窗弹出后自动触发音效，核心在于“监听中奖状态变化 → 播放音频 → 避免重复/中断冲突”。不是简单调用play()就完事，关键在时机控制和状态协同。
监听中奖结果状态变化
中奖结果通常来自异步接口或 WebSocket 推送，需通过 Vue 的响应式机制监听其变更。推荐使用 watch 监听 Vuex 或 Pinia 中的中奖标识（如 winResult、prizeId、isWinning）：
- 监听值应为“有效中奖数据”，而非布尔开关——避免空值、初始默认值误触发
- 建议加防抖或标记位（如
playedOnce = false），防止多次抽奖返回相同结果时反复播放 - 若使用 Pinia，可配合
store.$subscribe在 store 层统一处理；Vuex 则推荐在组件内 watchmapState或computed衍生状态
音效资源加载与复用控制
每次 new Audio() 创建新实例易导致内存泄漏或播放卡顿，尤其高频中奖场景。应预先加载并复用音频对象：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在组件
data或ref中声明单例 audio 实例：audioRef: new Audio(require('@/assets/sound/win.mp3')) - 设置
audioRef.preload = 'auto'和audioRef.volume = 0.8提升兼容性与体验 - 播放前重置播放位置：
audioRef.currentTime = 0，避免因上次未播完而静音
弹窗与音效的协同逻辑
弹窗显示（v-if/v-show）和音效播放必须解耦但有序：音效应在弹窗 DOM 渲染完成、用户视觉感知到提示的瞬间触发，而非仅依赖 JS 执行顺序：
立即学习“前端免费学习笔记（深入）”；
- 不推荐在
watch回调里直接audio.play()—— 此时弹窗可能尚未挂载或动画未开始，iOS/Safari 等浏览器会因“非用户手势触发”静音 - 正确做法：在弹窗组件的
onMounted（Vue 3）或mounted（Vue 2）钩子中，或使用$nextTick确保 DOM 更新后，再调用播放 - 可封装一个
playWinSound()方法，在弹窗v-model变为 true 后由父组件或弹窗自身触发
异常兜底与用户体验细节
真实环境中需应对自动播放策略限制、静音状态、重复触发等边界情况：
- 捕获
audio.play()的 Promise reject，降级为文字高亮+震动（navigator.vibrate）或图标脉冲动画 - 监听
audio.onended重置状态，便于下次触发；监听audio.onerror记录失败原因 - 提供用户设置项：全局关闭提示音（存入 localStorage），watch 中增加判断
if (settings.soundEnabled)
