动态添加audio元素后出现play()被pause()中断的DOMException问题

1. 修复play() Promise的未处理逻辑 #

audio.play()返回一个Promise，之前的代码如果没处理这个Promise的状态，当快速点击播放/暂停（或音频数量增多后并发操作），就会出现"play请求被pause中断"的错误。核心是要等待play操作完成后再处理后续状态，同时捕获异常同步状态：

async function togglePlay(audio) {
  try {
    if (audio.paused) {
      // 如果需要单音频播放，先暂停其他正在播放的音频
      // document.querySelectorAll('audio').forEach(a => a !== audio && a.pause());
      await audio.play();
    } else {
      audio.pause();
    }
  } catch (err) {
    // 针对中断错误同步状态
    if (err.name === 'DOMException' && err.message.includes('interrupted')) {
      audio.paused ? audio.play() : audio.pause();
    }
    console.warn('音频操作异常:', err);
  }
}

2. 统一动态与静态audio的preload配置 #

动态创建的audio元素要和原有元素保持一致的preload属性，避免加载状态不一致导致的冲突：

function createDynamicAudio(signedUrl) {
  const audio = document.createElement('audio');
  audio.src = signedUrl;
  audio.preload = 'auto'; // 和原有自动生成的元素配置对齐
  // 绑定播放按钮事件
  const playBtn = document.createElement('button');
  playBtn.textContent = '播放';
  playBtn.addEventListener('click', () => togglePlay(audio));
  // 追加到容器
  document.getElementById('audio-container').appendChild(audio);
  document.getElementById('audio-container').appendChild(playBtn);
  return audio;
}

3. 全局播放状态管理（可选但推荐） #

当音频数量超过50%后，多音频并发操作更容易触发状态冲突，维护一个全局当前播放实例可以避免这类问题：

let currentPlayingAudio = null;

async function togglePlay(audio) {
  try {
    if (audio.paused) {
      // 暂停当前正在播放的音频
      if (currentPlayingAudio && currentPlayingAudio !== audio) {
        currentPlayingAudio.pause();
        updateBtnState(currentPlayingAudio);
      }
      await audio.play();
      currentPlayingAudio = audio;
    } else {
      audio.pause();
      currentPlayingAudio = null;
    }
    updateBtnState(audio);
  } catch (err) {
    console.warn('音频操作异常:', err);
    // 状态回退
    currentPlayingAudio = audio.paused ? null : audio;
    updateBtnState(audio);
  }
}

// 同步按钮显示状态
function updateBtnState(audio) {
  const btn = audio.nextElementSibling; // 假设按钮紧跟audio元素
  btn.textContent = audio.paused ? '播放' : '暂停';
}

4. 限制未就绪音频的操作 #

动态创建的音频可能未加载完成就被点击，导致play请求失败。可以监听canplay事件，在音频就绪后才启用播放按钮：

function createDynamicAudio(signedUrl) {
  const audio = document.createElement('audio');
  const playBtn = document.createElement('button');
  playBtn.textContent = '加载中...';
  playBtn.disabled = true;

  audio.src = signedUrl;
  audio.preload = 'auto';

  audio.addEventListener('canplay', () => {
    playBtn.textContent = '播放';
    playBtn.disabled = false;
  });

  playBtn.addEventListener('click', () => togglePlay(audio));

  document.getElementById('audio-container').append(audio, playBtn);
  return audio;
}

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