如何使用原生JavaScript播放HTML页面中所有音频元素

原生JavaScript方案 #

无需逐个通过ID定位音频，直接通过选择器获取所有<audio>元素并遍历播放，新增音频也能自动覆盖：

绑定按钮点击事件的完整代码 #

// 给播放按钮绑定点击事件（假设按钮ID为playAllBtn）
document.getElementById('playAllBtn').addEventListener('click', () => {
  // 获取页面上所有audio元素
  const allAudios = document.querySelectorAll('audio');
  
  // 遍历每个音频并调用播放方法
  allAudios.forEach(audio => {
    // 捕获播放可能出现的错误（如音频未加载完成）
    audio.play().catch(error => {
      console.error(`音频播放失败: ${error.message}`);
    });
  });
});

精准选择音频（可选） #

如果页面中有其他不需要播放的音频，可以通过类名筛选：

// 只选择带有sound-audio类的音频元素
const targetAudios = document.querySelectorAll('.sound-audio');

jQuery方案（可选） #

若使用jQuery，写法更简洁：

$('#playAllBtn').on('click', function() {
  $('audio').each(function() {
    $(this)[0].play().catch(error => {
      console.error(`音频播放失败: ${error.message}`);
    });
  });
});

这种实现方式彻底摆脱了依赖ID的限制，后续新增音频元素无需修改播放逻辑，完全适配你的需求。

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