JavaScript：自动播放音频的onended函数无法正常工作

嘿，我完全懂你这种在Chrome里遇到audio事件不触发的抓狂感——明明在其他浏览器好好的，偏偏Chrome搞特殊！针对你这个audio.onended不触发的问题，我给你几个经过验证的解决方案，你可以挨个试试：

Chrome对跨域资源的处理比Safari/Firefox更严格，如果你的鸟类音频API没有正确配置CORS响应头，可能会导致音频加载异常，间接让onended事件失效。你可以改用fetch先获取音频Blob，再创建Audio对象，同时监听加载错误来排查问题：

async function loadAndPlayBirdAudio() {
  try {
    const response = await fetch('你的鸟类音频API地址', {
      mode: 'cors', // 确保跨域请求符合规则
      credentials: 'omit' // 根据你的API认证需求调整
    });
    if (!response.ok) throw new Error('音频资源加载失败');
    const blob = await response.blob();
    const audioUrl = URL.createObjectURL(blob);
    
    const audio = new Audio(audioUrl);
    audio.onended = () => {
      console.log('当前音频播放结束，加载下一首');
      URL.revokeObjectURL(audioUrl); // 及时释放Blob资源，避免内存泄漏
      loadAndPlayBirdAudio();
    };
    // 新增错误监听，快速定位加载/播放问题
    audio.onerror = (e) => {
      console.error('音频播放出错:', e);
      // 出错后可以添加重试逻辑或者提示用户
    };
    await audio.play(); // 确保播放动作在合法上下文内触发
  } catch (err) {
    console.error('加载音频失败:', err);
  }
}

有时候Chrome会因为音频解码异常、资源截断等边缘情况不触发onended，这时候可以通过监听timeupdate事件，判断当前播放时间是否接近音频总时长，以此模拟播放结束的逻辑：

function playBirdAudio() {
  const audio = new Audio('你的音频地址');
  let hasTriggeredEnd = false; // 防止重复触发结束逻辑

  audio.addEventListener('timeupdate', () => {
    // 预留0.1秒的误差，避免时长计算精度问题导致判断失误
    if (!hasTriggeredEnd && audio.duration && audio.currentTime >= audio.duration - 0.1) {
      hasTriggeredEnd = true;
      console.log('播放结束，加载下一首');
      audio.removeEventListener('timeupdate', arguments.callee); // 移除监听，避免内存泄漏
      playBirdAudio();
    }
  });

  audio.onerror = (e) => {
    console.error('音频播放出错:', e);
    playBirdAudio(); // 出错后重试加载
  };

  audio.play().catch(err => console.error('播放被浏览器阻止:', err));
}

有时候直接赋值audio.onended可能会被其他代码意外覆盖，改用addEventListener绑定事件更可靠；同时每次播放结束后，确保销毁旧的Audio对象，避免内存泄漏或事件绑定异常：

function playNextAudio() {
  // 每次播放都创建全新的Audio实例，避免旧实例的状态干扰
  const audio = new Audio();
  audio.src = '你的音频API地址';

  // 使用命名函数绑定结束事件，方便后续移除
  const handlePlayEnd = () => {
    audio.removeEventListener('ended', handlePlayEnd); // 移除事件监听
    audio.remove(); // 如果音频被插入到DOM中，记得移除
    playNextAudio();
  };

  audio.addEventListener('ended', handlePlayEnd);
  audio.addEventListener('error', (e) => {
    console.error('音频加载/播放出错:', e);
    audio.removeEventListener('ended', handlePlayEnd);
    playNextAudio();
  });

  audio.play().catch(err => {
    console.error('播放失败:', err);
    // 如果是自动播放被阻止，可以提示用户点击页面触发
  });
}

Chrome要求音频播放必须在用户交互上下文内触发（比如点击、触摸事件），如果你的音频是页面加载后自动播放的，很大概率会被Chrome阻止，导致播放从未开始，自然onended不会触发。确保播放逻辑绑定在用户交互事件上：

// 示例：绑定到页面的播放按钮点击事件
document.getElementById('start-play-btn').addEventListener('click', () => {
  playNextAudio(); // 调用你的播放函数
});

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