HTML插入音频播放结束后怎么跳转？事件监听配置法-html教程-PHP中文网

必须在 loadedmetadata 事件后监听 ended，否则 Safari 和部分 Android WebView 不触发；常见失效原因包括监听过早、pause/跳转中断、loop 开启、MP3 帧损坏、静音策略拒绝 play()；正确流程：preload 设置、loadedmetadata 后绑定 ended、动态 src 需手动 load()；play() 必须用户手势触发并处理 Promise 拒绝；SPA 跳转前需 pause() + currentTime = 0 清理。

html插入音频播放结束后怎么跳转？事件监听配置法

必须监听 ended 事件，且监听动作必须在音频元数据加载完成（loadedmetadata）之后执行，否则 Safari 和部分 Android WebView 中大概率不触发。

为什么 `ended` 事件经常不触发

不是代码写错了，而是时机不对。常见失效原因包括：

ended 监听绑得太早——比如在 DOMContentLoaded 时就加，此时 audio.src 可能还没解析，duration 是 NaN，浏览器直接跳过事件注册
音频被 pause() 或 currentTime 跳转中断过，ended 只在自然播到末尾时才触发
用了 loop="true"，循环模式下永远不会走到“结束”
MP3 文件末尾帧损坏或 ID3 不规范，iOS Safari 会提前终止播放，不发 ended
play() 被静音策略拒绝（控制台报 NotAllowedError），整个播放流程没启动，后续事件全失效

正确监听 `ended` 的三步顺序

必须按这个链条走，缺一不可：

确保标签有 preload="auto" 或至少 preload="metadata"，加快元数据加载
监听 loadedmetadata 事件，在回调里再绑定 ended —— 这是 Safari 兼容性的硬性要求
如果音频是动态设置 src（比如 audio.src = 'sound.mp3'），赋值后必须手动调用 audio.load()，否则 loadedmetadata 不会触发

示例：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

const audio = document.querySelector('audio');
audio.preload = 'auto';
audio.addEventListener('loadedmetadata', () => {
  audio.addEventListener('ended', () => {
    console.log('音效播完了');
    window.location.href = '/success';
  });
});
// 若 src 是后来设的：
// audio.src = 'click.mp3';
// audio.load(); // 必须加这一行

跳转前要检查 `play()` 是否真成功了

ended 不触发，很多时候是因为 play() 根本没跑起来。现代浏览器（Chrome、Safari、Edge）强制要求首次播放必须由用户手势同步触发，不能延迟、不能包装在 Promise.then 里。所以：

把 audio.play() 放在按钮点击事件最开头，别加 setTimeout 或 await delay()
一定要处理 play() 返回的 Promise：audio.play().catch(e => console.warn('播放被拒:', e))
如果 catch 到了错误，说明用户还没和页面交互过，此时即使绑了 ended 也没意义——因为根本没播
不要复用同一个 Audio 实例跨多个按钮做不同音效；每个音效单独预建实例，避免 Safari 因资源未缓存而静音拦截

SPA 场景下跳转不卸载页面，音频不会自动停

用 history.pushState、Vue Router 或 React Router 时，页面没刷新，audio 实例还活着，ended 即使触发了，跳转逻辑也可能被路由守卫拦截或执行错上下文。这时候得主动清理：

在路由切换前（如 Vue 的 beforeEach、React 的 useEffect 清理函数）调用 audio.pause() 和 audio.currentTime = 0
不要用 audio.remove() 或 delete，没效果；pause() + currentTime = 0 就够了
如果音效是瞬时反馈型（比如按钮音），播完就不管；如果是背景循环音，跳转前必须 pause()，否则会跨页继续响