学校项目：实现点击自定义按钮跳转页面前播放指定音效

核心思路 #

默认的<a>标签点击会立即跳转页面，打断音频播放。所以需要通过JavaScript阻止默认跳转行为，先触发音频播放，等音频播放完毕后再手动执行页面跳转。

修改后的完整代码 #

<header headerIndex>
  <audio id="selectaudio" preload="auto">
    <source src="./audio/selectsound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <!-- 保留href是为了SEO和无JS场景的兼容，实际跳转由JS控制 -->
  <a href="./pages/welcome.html" class="rpgui-button beginButton" id="playAudio">Lets Begin!</a>
</header>

<script>
// 获取音频和按钮元素
const audio = document.getElementById('selectaudio');
const beginBtn = document.getElementById('playAudio');

// 给按钮绑定点击事件
beginBtn.addEventListener('click', function(e) {
  // 阻止默认的跳转行为
  e.preventDefault();
  
  // 播放音频
  audio.play().then(() => {
    // 监听音频播放结束事件，播放完再跳转
    audio.addEventListener('ended', function goToWelcome() {
      window.location.href = beginBtn.href;
      // 移除事件监听，避免重复绑定
      audio.removeEventListener('ended', goToWelcome);
    });
  }).catch(err => {
    // 处理音频无法播放的异常（比如浏览器自动拦截、文件不存在）
    console.error('音频播放失败:', err);
    // 即使播放失败也跳转，避免用户卡住
    window.location.href = beginBtn.href;
  });
});
</script>

代码逻辑解释 #

• 阻止默认行为：e.preventDefault()让点击按钮时不会立即跳转到href指定的页面，给音频播放留足时间。
• 音频播放与监听：audio.play()返回Promise，成功播放后监听ended事件，音频播放完毕后通过window.location.href手动触发跳转。
• 异常处理：如果音频无法播放（比如浏览器自动播放策略拦截、音频文件路径错误），会直接执行跳转，避免用户无法继续操作。
• 移除事件监听：播放结束后移除ended事件的监听，防止多次点击按钮导致重复绑定事件。

额外注意事项 #

• 浏览器自动播放策略：大部分现代浏览器会拦截无用户交互的音频播放，但这里是用户主动点击按钮触发，符合浏览器的交互要求，不会被拦截。
• 音频路径检查：确保./audio/selectsound.mp3的路径正确，可在浏览器控制台查看是否有404错误。
• 兼容性：如果需要兼容更老的浏览器，可以添加canplaythrough事件监听，确保音频加载完成后再播放，但preload="auto"已经会提前加载音频，一般不需要额外处理。

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