本文详解如何在状态切换时可靠停止音频播放，重点解决因定时器变量作用域不当导致的音频无法终止问题，并提供可复用的状态驱动音频控制模式。
本文详解如何在状态切换时可靠停止音频播放，重点解决因定时器变量作用域不当导致的音频无法终止问题，并提供可复用的状态驱动音频控制模式。
在基于状态反馈的前端应用（如姿势矫正系统）中，常需通过音频提示用户当前状态（如 DANGER 播放警报音、SUCCESS 立即静音）。然而，许多开发者会遇到“音频持续播放，pause() 无效”的问题——根本原因往往不是音频 API 使用错误，而是定时器引用丢失：setInterval 返回的 audioInterval 被声明在函数局部作用域内，每次调用 xState 时都会重新初始化为 null，导致前一次启动的定时器失去引用，无法被 clearInterval() 清理。
✅ 正确做法：将定时器引用提升至闭包或模块级作用域
不应在每次 xState 执行时都声明 let audioInterval = null，而应将其持久化存储。推荐两种生产级方案：
方案一：使用 Map 管理多状态独立音频定时器（推荐）
// 全局或组件级作用域（如 React 的 useRef / useState 或模块顶层）
const audioIntervals = new Map(); // key: state name (e.g., 'Head'), value: interval ID
const xState = ({
name,
value,
threshold,
timer,
currentState,
currentStateTimeStamp,
cbCurrentStateTimeStamp,
cbChange,
toastMsgSuccess,
toastMsgDanger,
}) => {
let status = statesName.SUCCESS;
if (value <= threshold) {
timer.reset();
status = statesName.SUCCESS;
} else if (value > threshold) {
timer.start({ precision: 'secondTenths' });
const seconds = timer.getTotalTimeValues().seconds;
status = seconds > appContext.timer_timeUntilBadPosture
? statesName.DANGER
: statesName.WARNING;
}
// 统一音频控制函数（无状态副作用）
const playAudioForState = (state) => {
const audioMap = {
Head: dangerAudioHead,
Body: dangerAudioBody,
Distance: dangerAudioDistance,
Height: dangerAudioHeight,
};
const audio = audioMap[state];
if (audio) {
audio.currentTime = 0;
audio.play().catch(e => console.warn("Audio play failed:", e));
}
};
const stopAudioForState = (state) => {
const audioMap = {
Head: dangerAudioHead,
Body: dangerAudioBody,
Distance: dangerAudioDistance,
Height: dangerAudioHeight,
};
const audio = audioMap[state];
if (audio) {
audio.pause();
audio.currentTime = 0;
}
};
if (currentState !== status) {
cbCurrentStateTimeStamp(nextObj.createdAt);
// ✅ SUCCESS：清除对应状态的定时器并停止音频
if (status === statesName.SUCCESS) {
const existingInterval = audioIntervals.get(name);
if (existingInterval) {
clearInterval(existingInterval);
audioIntervals.delete(name);
}
stopAudioForState(name);
showToast(toastMsgSuccess, Intent.SUCCESS);
}
// ✅ DANGER：仅当无活跃定时器时启动（防重复）
else if (status === statesName.DANGER) {
if (!audioIntervals.has(name)) {
playAudioForState(name); // 立即播放一次
const id = setInterval(() => playAudioForState(name), 3000);
audioIntervals.set(name, id);
}
showToast(toastMsgDanger, Intent.DANGER);
}
// ✅ WARNING：暂停音频，清除定时器（不自动恢复）
else if (status === statesName.WARNING) {
const existingInterval = audioIntervals.get(name);
if (existingInterval) {
clearInterval(existingInterval);
audioIntervals.delete(name);
}
stopAudioForState(name);
}
cbChange(status);
}
};方案二：使用 useRef（React 函数组件）
const audioIntervalsRef = useRef(new Map());
// 在 xState 内部使用：
const existingInterval = audioIntervalsRef.current.get(name);
if (existingInterval) {
clearInterval(existingInterval);
audioIntervalsRef.current.delete(name);
}⚠️ 关键注意事项
- .play() 可能被浏览器阻止：必须由用户手势（如点击）触发首次播放，后续调用才可自动播放。建议在初始化时预加载音频（audio.load()）并捕获首次播放 Promise。
- currentTime = 0 必须在 pause() 后设置：否则部分浏览器可能忽略重置。
- 避免重复 play() 报错：使用 .catch() 处理拒绝的 Promise，防止中断逻辑。
- 内存泄漏防护：组件卸载或状态监控停止时，务必遍历 audioIntervals 并 clearInterval 所有残留定时器。
✅ 总结
音频无法停止的本质是定时器引用生命周期管理失当。将 audioInterval 从函数局部变量升级为跨调用持久化的引用（Map、ref 或 class field），配合清晰的启停逻辑和错误处理，即可实现精准、鲁棒的状态驱动音频反馈。此模式同样适用于语音提示、节拍器、实时告警等场景。
