实现audio标签单音频播放：播放新音频时自动暂停当前音频

你的代码无法播放的核心问题是：当某个音频触发play事件时，你直接遍历所有音频调用pause()，这会把当前正要播放的音频也一并暂停，导致所有音频都无法启动播放。

修正后的代码 #

HTML部分（无需修改）

<div class="podcast-container">
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3"></audio>
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-hazy-after-hours-132.mp3"></audio>
    <audio controls src="https://assets.mixkit.co/music/preview/mixkit-tech-house-vibes-130.mp3"></audio>
</div>

JavaScript部分（关键修正）

const tracks = Array.from(document.querySelectorAll('audio'));
tracks.forEach(function (currentTrack) {
    currentTrack.addEventListener('play', () => {
        // 只暂停当前触发播放事件之外的音频
        tracks.forEach(function (track) {
            if (track !== currentTrack) {
                track.pause();
            }
        });
    });
});

修正说明 #

在内部遍历音频列表时，增加了track !== currentTrack的判断：

• 当点击某一个音频的播放按钮时，先暂停所有非当前点击的音频
• 保留当前触发播放事件的音频继续播放，实现「播放新音频时自动暂停其他音频」的需求

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