点击按钮播放音频并延迟页面跳转功能失效问题求助

你的代码存在语法和逻辑问题，导致两个功能无法同时生效，以下是修正方案：

问题分析 #

1. 语法错误：setTimeout的箭头函数内错误嵌套了函数声明clickCreCharTrans() {...}，属于无效JavaScript语法，导致跳转函数未被正确定义。
2. 逻辑错误：按钮点击时同时调用两个函数，但clickCreCharTrans()实际不存在；就算函数有效，直接执行跳转也会立刻终止页面，中断音频播放。

修正方案 #

方案一：固定时长延迟跳转 #

在按钮点击时先播放音频，再通过定时器延迟执行跳转，同时修正语法问题：

<body>
    <h3 class="text">The haunting of</h3>
    <h1 class="text">Ypsilon 14</h1>
    <div>
      <div>
        <audio
          src="audio/mixkit-horror-deep-drum-heartbeat-559.wav"
          id="clickSound"
        ></audio>
        <button onclick="handleButtonClick()">
          Create Character
        </button>
      </div>
    </div>
    <script>
      function handleButtonClick() {
        // 播放音频
        const sound = document.getElementById("clickSound");
        sound.play();
        
        // 延迟4秒执行页面跳转
        setTimeout(() => {
          window.location.href = "createChar.html";
        }, 4000);
      }
    </script>
</body>

方案二：监听音频播放结束事件（更可靠） #

比起固定时长，监听音频的ended事件能确保音频完全播放完毕后再跳转，避免因音频加载延迟或时长偏差导致的问题：

<body>
    <h3 class="text">The haunting of</h3>
    <h1 class="text">Ypsilon 14</h1>
    <div>
      <div>
        <audio
          src="audio/mixkit-horror-deep-drum-heartbeat-559.wav"
          id="clickSound"
        ></audio>
        <button onclick="handleButtonClick()">
          Create Character
        </button>
      </div>
    </div>
    <script>
      function handleButtonClick() {
        const sound = document.getElementById("clickSound");
        
        // 播放音频
        sound.play();
        
        // 监听音频播放结束，完成后跳转
        sound.addEventListener('ended', () => {
          window.location.href = "createChar.html";
        }, { once: true }); // 仅监听一次，避免重复绑定
      }
    </script>
</body>

额外说明 #

• 移除了无效的autostart="false"属性，HTML5音频元素默认不会自动播放，无需额外设置。
• 给音频元素添加id，相比querySelector定位更精准高效。
• 使用{ once: true }确保事件监听器仅触发一次，防止多次点击按钮导致重复跳转逻辑。

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