HTML与JavaScript网页音频播放重叠，如何设置X键停止当前播放音频

你的代码存在两个核心故障点：

• player是checkKeyPressed函数内的局部变量，每次函数触发都会重新初始化，按下X键时如果本次没有触发数字键播放逻辑，player为undefined，暂停操作自然失效
• 每次触发新音频播放时没有停止上一个正在播放的音频，直接就会出现重叠发声的问题

// 全局变量：统一存储当前正在播放的音频对象
let currentPlayer = null;

// 初始欢迎音频逻辑
const welcomeSource = "audio/homepage_benvenuto.mp3";
const welcomeAudio = document.createElement("audio");
welcomeAudio.autoplay = true;
welcomeAudio.src = welcomeSource;
currentPlayer = welcomeAudio;
welcomeAudio.load();
welcomeAudio.addEventListener("canplaythrough", () => {
    welcomeAudio.play();
}, true);

// 通用工具函数：停止当前正在播放的所有音频
function stopCurrentAudio() {
    if (currentPlayer && !currentPlayer.paused) {
        currentPlayer.pause();
        currentPlayer.currentTime = 0;
    }
}

function checkKeyPressed(e) {
    // X键逻辑：直接停止当前音频
    if (e.keyCode === 88) {
        stopCurrentAudio();
        return;
    }

    // 数字键0-9逻辑，简化重复判断
    const keyNum = e.keyCode - 48;
    if (keyNum >= 0 && keyNum <= 9) {
        // 播放前先停止上一个音频，避免重叠
        stopCurrentAudio();
        const targetAudio = document.getElementById(`audio${keyNum}`);
        targetAudio.play();
        // 更新当前播放的音频记录
        currentPlayer = targetAudio;
    }
}

你当前的HTML代码里已经写了一个带autoplay属性的欢迎音频标签，JS里又重新创建了一个欢迎音频元素，会导致欢迎音重复播放，建议删除HTML里多余的欢迎音频标签即可。

内容的提问来源于stack exchange，提问作者Gaia B.