本文介绍如何通过 javascript 实现按钮点击后先播放一段音频（如4秒音效），再自动跳转至目标页面，确保音频完整播放完毕、不被页面卸载中断。
本文介绍如何通过 javascript 实现按钮点击后先播放一段音频（如4秒音效），再自动跳转至目标页面，确保音频完整播放完毕、不被页面卸载中断。
在网页交互中，常需为按钮添加音效增强体验（例如恐怖游戏中的“Create Character”按钮），但若直接跳转页面，音频会立即中断——因为页面卸载（unload）会终止所有正在运行的媒体资源。解决这一问题的核心思路是：触发播放 → 延迟跳转 → 确保延迟逻辑绑定在用户操作之后，而非页面加载时执行。
以下是一个结构清晰、可直接复用的实现方案：
<body>
<h3 class="text">The haunting of</h3>
<h1 class="text">Ypsilon 14</h1>
<div>
<div>
<!-- 移除 autostart="false"（无效属性），改用 preload="auto" 提升加载可靠性 -->
<audio src="audio/mixkit-horror-deep-drum-heartbeat-559.wav" preload="auto"></audio>
<button onclick="playAndRedirect()">Create Character</button>
</div>
</div>
<script>
function playAndRedirect() {
const audio = document.querySelector('audio');
// 尝试播放音频（现代浏览器要求用户手势触发）
const playPromise = audio.play();
// 处理可能的 Promise 拒绝（如静音策略、未交互触发等）
if (playPromise !== undefined) {
playPromise.catch(err => {
console.warn("Audio playback prevented:", err);
// 可选：降级提示或跳过延迟，直接跳转
window.location.href = "createChar.html";
});
}
// 在音频开始播放后，启动 4 秒倒计时跳转
setTimeout(() => {
window.location.href = "createChar.html";
}, 4000);
}
</script>
</body>✅ 关键要点说明：
- onclick 绑定单一函数：避免多个内联调用（如 clickCreCharSound(), clickCreCharTrans()）导致执行顺序不可控；统一入口更易维护。
- setTimeout 必须放在事件处理函数内：原代码中 setTimeout 写在全局脚本中，会在页面加载时立即注册，与用户点击无关，属于典型误用。
- 音频预加载与播放容错：添加 preload="auto" 提高加载成功率；使用 audio.play() 返回的 Promise 捕获拒绝异常（尤其在移动端或静音环境下），防止因播放失败导致跳转被阻塞。
- 时间精度提示：setTimeout 的延迟是最小延迟，实际跳转可能略晚于4秒（取决于主线程空闲程度），但足以覆盖常见音效时长。
⚠️ 注意事项：
- 浏览器策略要求音频必须由用户明确交互（如点击）触发，否则 play() 会抛出错误；切勿在 window.onload 或定时器中自动播放。
- 若音频文件较大或网络较差，建议监听 canplaythrough 事件后再启用按钮，或添加加载状态反馈。
- 如需更高可靠性（如确保跳转前音频已自然结束），可监听 audio.onended 事件替代固定延时，但需注意 onended 在页面卸载前是否总能触发——实践中 setTimeout 更稳定。
通过以上方式，你既能营造沉浸式音效体验，又能保障页面流程的连贯性与健壮性。
