推荐使用 addEventListener 绑定 ended 事件，需在 loadedmetadata 后注册以确保兼容性；onended 属性因只能绑定单个回调且无法控制捕获/冒泡阶段而不推荐。
HTML5 标签播放结束时，直接监听 ended 事件即可触发回调，不需要额外封装或 polyfill —— 原生支持，但容易因加载状态、静音策略或错误中断而失效。
为什么 onended 属性不推荐用
onended 是 DOM 元素的属性式事件处理器（如 audio.onended = function() {...}），它只能绑定一个回调，且无法控制事件捕获/冒泡阶段；现代写法统一用 addEventListener 更可靠。
- 多个监听器会互相覆盖（后赋值的覆盖前一个）
- 无法在回调中使用
removeEventListener精确解绑 - 若音频未成功加载（
networkState === 0）或中途报错（error事件），ended永远不会触发
正确绑定 ended 事件的写法
确保 已加载元数据（loadedmetadata）后再绑定，避免因元素未就绪导致监听失败。
const audio = document.querySelector('audio');
audio.addEventListener('loadedmetadata', () => {
audio.addEventListener('ended', () => {
console.log('播放已自然结束');
// 这里写你的逻辑：跳转下一曲、显示按钮、重置UI等
});
});
- 必须等
loadedmetadata或至少canplay后再监听ended，否则 Safari 和部分 Android WebView 可能漏触发 - 不要在
DOMContentLoaded就绑 —— 此时audio.src可能还没解析完成 - 如果使用动态设置
src（例如audio.src = 'xxx.mp3'），需在赋值后手动调用audio.load()，再监听loadedmetadata
常见失效场景和排查点
ended 不触发，大概率不是监听写错了，而是播放流程被干扰。
-
audio.play()被用户手势拦截（Chrome 66+ 要求首次播放由 click/tap 触发），此时play()返回 Promise 并 reject，后续任何事件都无效 - 音频被静音或音量设为 0，但
ended仍会触发 —— 注意区分“没声音”和“没播放” - 播放中调用了
audio.pause()或audio.currentTime跳转，不会触发ended；只有自然播到末尾才触发 - MP3 文件缺少合法 ID3 或末尾帧损坏，某些浏览器（尤其是 iOS Safari）会提前终止播放，不发
ended - 使用了
loop="true"—— 循环模式下永远不会触发ended
真正麻烦的不是怎么写回调，而是得同时处理 error、abort、stalled 这些可能截断播放的事件；ended 只代表“顺利走到了最后一帧”，不代表你预期的业务流程一定完成。
