JavaScript游戏中点击触发音频无法播放问题求助

核心问题分析 #

你的代码存在两个关键问题：

1. canplaythrough事件绑定时机错误：你在点击苍蝇后才给音频添加加载完成监听，但设置了preload="auto"的音频很可能已经提前加载完毕，此时这个事件不会再触发，导致sound.play()根本没执行。
2. 缺少播放错误捕获：没有处理音频播放可能出现的异常，无法排查潜在的播放失败原因。

修正后的代码方案 #

方案一：提前绑定加载事件（推荐） #

把音频加载监听放在点击事件外部，确保音频加载完成后随时能响应播放请求：

// 提前绑定音频加载完成事件，仅做状态提示
sound.addEventListener("canplaythrough", function() {
  console.log("音频已加载完成");
});

fly.addEventListener("click", function(){
    this.remove()
    points += 10
    document.getElementById('hasPoints').innerHTML = points
    // 直接尝试播放，同时捕获错误
    try {
        sound.currentTime = 0; // 重置播放位置，保证每次点击都从头播放
        sound.play();
    } catch (err) {
        console.error("音频播放失败:", err);
    }
})

方案二：跳过加载监听，直接触发播放 #

如果确认音频源无问题，可直接在点击事件内播放，同时重置播放位置：

fly.addEventListener("click", function(){
    this.remove()
    points += 10
    document.getElementById('hasPoints').innerHTML = points
    try {
        sound.currentTime = 0;
        sound.play().catch(err => {
            console.error("播放出错:", err);
        });
    } catch (err) {
        console.error("播放异常:", err);
    }
})

额外注意事项 #

• 确保sound变量在点击事件作用域内可正常访问，比如是全局变量或通过正确方式获取的音频实例。
• 可在控制台打印sound.readyState查看加载状态：返回4表示音频已完全加载完成。

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