如何在点击VOTE按钮时完整播放音效并实现无阻塞页面跳转

嘿，我懂你的烦恼——现在要么音频刚播4秒就被页面跳转打断，要么用sleep把页面卡得死死的，体验都很差。其实咱们可以利用音频的ended事件来实现无阻塞的完整播放+跳转，这是最稳妥的方案，它会等音频彻底播完再触发跳转，完全不会卡住页面。

具体修改步骤： #

1. 调整JavaScript逻辑 #

给音频对象添加一个ended事件监听器，让音频播放完毕后再执行跳转：

<script language="javascript" type="text/javascript">
window.history.forward();
var bleep = new Audio();
bleep.src = "bleep.mp3";
// 提前预加载音频，避免点击时加载延迟
bleep.preload = "auto";

// 监听音频播放结束事件，完成后跳转到目标页面
bleep.addEventListener('ended', function() {
    // 替换成你实际要跳转的页面URL
    window.location.href = "你的目标页面地址";
});
</script>

2. 修改HTML的点击行为 #

原来的<a>标签跳转逻辑要改掉，让按钮点击只触发音频播放，不要直接跳转：

<td align="center" height="50">
    <input type="submit" name="btncandid1" value="VOTE" onclick="bleep.play(); return false;"/>
</td>

这里的return false;是为了阻止submit按钮的默认提交行为（如果是普通按钮可以去掉，但加上能避免意外触发跳转），确保只有音频播放完成后才会执行跳转。

方案优势： #

• 完全不阻塞页面：音频播放是浏览器异步处理的，用户不会看到页面卡顿
• 100%保证音频完整播放：只有当ended事件触发时才会跳转，彻底解决音频被中断的问题

内容的提问来源于stack exchange，提问作者Junaid