如何使用JavaScript检测是否有音频正在播放？

是可以实现的，下面提供几种实用方案：

1. 原生HTML5 Audio实例跟踪 #

对于原生<audio>标签或new Audio()创建的实例，直接通过paused属性判断状态——audioElement.paused为false时，说明音频正在播放。你可以维护一个全局数组存储所有音频实例，遍历检查即可：

// 全局存储所有音频实例
const audioInstances = [];

// 创建音频时加入数组
const audio1 = new Audio('audio1.mp3');
audioInstances.push(audio1);

const audio2 = new Audio('audio2.mp3');
audioInstances.push(audio2);

// 检测是否有音频在播放的函数
function isAnyAudioPlaying() {
  return audioInstances.some(audio => !audio.paused && !audio.ended);
}

// 使用示例：每2秒检查一次
setInterval(() => {
  console.log(isAnyAudioPlaying() ? '有音频在播放' : '没有音频在播放');
}, 2000);

只要能管控所有创建的音频实例，这种方法就能准确检测状态。

2. 封装HowlerJS实例的状态计数器 #

HowlerJS没有全局检测API，但可以自己封装一层，通过绑定播放/暂停/结束事件维护计数器：

let playingTrackCount = 0;

// 封装创建Howler实例的函数
function createHowlTrack(options) {
  const track = new Howl({
    ...options,
    onplay: () => playingTrackCount++,
    onpause: () => playingTrackCount--,
    onend: () => playingTrackCount--
  });
  return track;
}

// 快速判断是否有音频在播放
function isAnyHowlerPlaying() {
  return playingTrackCount > 0;
}

// 使用示例
const track1 = createHowlTrack({ src: ['track1.mp3'] });
const track2 = createHowlTrack({ src: ['track2.mp3'] });

track1.play();
console.log(isAnyHowlerPlaying()); // 输出true

这种方式无需遍历实例，通过计数器就能快速判断，性能更优，适配HowlerJS场景。

3. 利用Web Audio Context状态（进阶） #

部分浏览器支持AudioContext的state属性，可通过监听状态变化间接判断全局音频活动，但仅适用于基于Web Audio API的音频（HowlerJS底层依赖此API），无法区分多个音频：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

audioContext.addEventListener('statechange', () => {
  if (audioContext.state === 'running') {
    console.log('有音频在播放');
  } else if (audioContext.state === 'suspended') {
    console.log('音频已暂停');
  }
});

该方法适合快速判断全局音频状态，但准确性不如前两种，部分非播放操作也可能触发running状态。

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