html5audio标签播放结束怎么触发事件_onended回调方法【教程】

发布时间 - 2025-12-31 00:00:00    点击率:
推荐使用 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

真正麻烦的不是怎么写回调,而是得同时处理 errorabortstalled 这些可能截断播放的事件;ended 只代表“顺利走到了最后一帧”,不代表你预期的业务流程一定完成。


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


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


相关推荐: iOS中将个别页面强制横屏其他页面竖屏  Windows家庭版如何开启组策略(gpedit.msc)?(安装方法)  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm,可以有哪些措施降低舍内氨气水平?  标题:Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  如何快速上传建站程序避免常见错误?  如何用低价快速搭建高质量网站?  如何快速查询网址的建站时间与历史轨迹?  教学论文网站制作软件有哪些,写论文用什么软件 ?  如何在自有机房高效搭建专业网站?  高防服务器租用如何选择配置与防御等级?  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  googleplay官方入口在哪里_Google Play官方商店快速入口指南  Laravel如何实现文件上传和存储?(本地与S3配置)  最好的网站制作公司,网购哪个网站口碑最好,推荐几个?谢谢?  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  海南网站制作公司有哪些,海口网是哪家的?  Laravel如何使用Vite进行前端资源打包?(配置示例)  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做?  高端建站三要素:定制模板、企业官网与响应式设计优化  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Laravel PHP版本要求一览_Laravel各版本环境要求对照  如何在建站宝盒中设置产品搜索功能?  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)  在线制作视频的网站有哪些,电脑如何制作视频短片?  Android自定义控件实现温度旋转按钮效果  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  Laravel如何创建自定义Facades?(详细步骤)  如何在服务器上配置二级域名建站?  Laravel如何自定义分页视图?(Pagination示例)  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱?  Java垃圾回收器的方法和原理总结  大同网页,大同瑞慈医院官网?  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  北京网站制作的公司有哪些,北京白云观官方网站?  如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel storage目录权限问题_Laravel文件写入权限设置  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Laravel中的Facade(门面)到底是什么原理  如何快速查询网站的真实建站时间?  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  如何在沈阳梯子盘古建站优化SEO排名与功能模块?  深入理解Android中的xmlns:tools属性