如何用HTML5/JavaScript实现单次仅播放一个音频样本？

这个问题很常见，我来给你两种实用的解决思路，都是平时处理这类音频交互需求常用的方法，核心逻辑都是播放新音频前先终止所有正在播放的音频：

方法1：复用单个Audio实例（推荐） #

这种方式只维护一个全局的Audio对象，每次切换音频时更新它的源并重置状态，既节省浏览器资源又逻辑清晰：

HTML结构 #

先给按钮用data-*属性存储对应音频的路径，方便JS快速获取：

<button class="audio-btn" data-audio="/samples/audio1.mp3">音频1</button>
<button class="audio-btn" data-audio="/samples/audio2.mp3">音频2</button>
<button class="audio-btn" data-audio="/samples/audio3.mp3">音频3</button>

JavaScript实现 #

// 全局维护一个唯一的Audio实例
let activeAudio = new Audio();

// 给所有音频按钮绑定点击事件
document.querySelectorAll('.audio-btn').forEach(button => {
  button.addEventListener('click', async () => {
    const targetSrc = button.dataset.audio;
    
    // 如果点击的是当前正在播放的音频，切换暂停并重置进度
    if (activeAudio.src.includes(targetSrc) && !activeAudio.paused) {
      activeAudio.pause();
      activeAudio.currentTime = 0;
      return;
    }
    
    // 停止当前播放的音频并重置到开头
    activeAudio.pause();
    activeAudio.currentTime = 0;
    
    // 设置新的音频源并尝试播放
    activeAudio.src = targetSrc;
    try {
      await activeAudio.play();
    } catch (error) {
      console.error('音频播放失败:', error);
    }
  });
});

方法2：跟踪所有播放的Audio实例 #

如果你的场景需要同时创建多个Audio实例（比如有特殊业务需求），可以维护一个数组来跟踪所有活跃的音频实例，点击时遍历停止：

JavaScript实现 #

// 存储所有正在播放的音频实例
let playingAudios = [];

document.querySelectorAll('.audio-btn').forEach(button => {
  button.addEventListener('click', async () => {
    const targetSrc = button.dataset.audio;
    
    // 遍历停止所有正在播放的音频
    playingAudios.forEach(audio => {
      audio.pause();
      audio.currentTime = 0;
    });
    // 清空数组（若需要复用实例可保留，按需调整）
    playingAudios = [];
    
    // 创建新的音频实例并加入跟踪数组
    const newAudio = new Audio(targetSrc);
    playingAudios.push(newAudio);
    
    try {
      await newAudio.play();
    } catch (error) {
      console.error('音频播放失败:', error);
      // 播放失败时从跟踪数组移除该实例
      playingAudios = playingAudios.filter(a => a !== newAudio);
    }
  });
});

关键注意点 #

• 浏览器自动播放限制：现代浏览器要求音频播放必须由用户交互触发（比如点击事件），所以我们在按钮点击回调里调用play()是安全的，不会被浏览器拦截。
• 错误处理：一定要加try/catch捕获播放失败的情况（比如音频文件不存在、网络错误等）。
• 重置进度：停止音频时记得设置currentTime = 0，否则下次播放会从上次暂停的位置开始。

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