推荐使用 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 只代表“顺利走到了最后一帧”，不代表你预期的业务流程一定完成。

# html  # android  # html5  # 处理器  # 浏览器  # safari  # ios  # 事件捕获  # 为什么  # chrome  # 封装  # Error  # 循环  # function  # 事件  # dom  # promise  # webview  # 绑定  # 回调  # 加载  # 跳转  # 永远不会  # 还没  # 尤其是  # 首次  # 多个  # 不需要 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何配置和使用缓存？（Redis代码示例）  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  使用spring连接及操作mongodb3.0实例  使用Dockerfile构建java web环境  如何在云主机上快速搭建多站点网站？  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  JS碰撞运动实现方法详解  微信小程序 canvas开发实例及注意事项  html5的keygen标签为什么废弃_替代方案说明【解答】  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  JS经典正则表达式笔试题汇总  如何在阿里云香港服务器快速搭建网站？  油猴 教程,油猴搜脚本为什么会网页无法显示？  javascript基于原型链的继承及call和apply函数用法分析  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  微信小程序 wx.uploadFile无法上传解决办法  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  如何在不使用负向后查找的情况下匹配特定条件前的换行符  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  Laravel如何处理和验证JSON类型的数据库字段  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  利用JavaScript实现拖拽改变元素大小  如何在云服务器上快速搭建个人网站？  Python制作简易注册登录系统  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  如何快速生成橙子建站落地页链接？  如何用y主机助手快速搭建网站？  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel安装步骤详细教程_Laravel环境搭建指南  如何正确下载安装西数主机建站助手？  Laravel怎么连接多个数据库_Laravel多数据库连接配置  bootstrap日历插件datetimepicker使用方法  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  微信小程序 input输入框控件详解及实例（多种示例）  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  网站页面设计需要考虑到这些问题  微信小程序 闭包写法详细介绍  黑客如何利用漏洞与弱口令入侵网站服务器？