本文介绍如何在用户点击按钮时同步触发音频播放与页面跳转，并确保跳转在音频播放完毕（如4秒）后执行，避免因异步时机不当导致跳转中断音频。
本文介绍如何在用户点击按钮时同步触发音频播放与页面跳转，并确保跳转在音频播放完毕（如4秒）后执行，避免因异步时机不当导致跳转中断音频。
在网页交互中，常需实现“点击按钮 → 播放音效 → 延迟跳转”的连贯体验（例如恐怖主题页的沉浸式引导）。但若直接将 window.location.href 与 audio.play() 分开调用，或错误使用 setTimeout 的全局声明方式，极易导致跳转立即发生、音频被中断，或定时器在页面加载时就提前启动——这正是原始代码的问题根源。
关键在于：跳转逻辑必须作为音频播放后的回调动作，且必须绑定在用户点击事件内，而非在 <script> 标签顶层执行。以下是优化后的完整实现：
<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');
// 尝试播放音频（现代浏览器要求用户手势触发）
audio.play().catch(err => {
console.warn("Audio playback prevented:", err.message);
// 可选：降级处理，如立即跳转或提示用户手动启用声音
window.location.href = 'createChar.html';
return;
});
// 在音频开始播放后，设置 4 秒后跳转
// 注意：此处假设音频时长恰好为 4s；如需精确同步，建议监听 ended 事件
setTimeout(() => {
window.location.href = 'createChar.html';
}, 4000);
}
</script>
</body>✅ 注意事项与最佳实践：
- 用户手势限制：现代浏览器禁止自动播放音频，audio.play() 必须由用户点击等显式交互触发，因此绑定在 onclick 中是正确做法；
- 错误捕获必不可少：audio.play() 返回 Promise，可能因策略限制被拒绝，务必用 .catch() 处理，避免脚本中断；
- 时长匹配建议：若音频实际时长不固定，推荐改用 audio.addEventListener('ended', () => { ... }) 替代固定 setTimeout，实现真正精准同步；
- 资源预加载：添加 preload="auto" 可提升首次点击时的播放响应速度；
- 移除无效属性：autostart="false" 并非标准 HTML 属性，应删除以保证语义正确性。
通过将播放与跳转封装为单一事件处理器，并利用 Promise 链与定时机制协调异步行为，即可稳定实现「声画同步、操作连贯」的用户体验。
