本文介绍如何利用 hashchange 事件监听 URL 变化，在 Shiny（尤其是配合 shiny.router 实现单页路由时）自动暂停所有正在播放的 <audio> 和 <video> 元素，彻底解决媒体文件跨页面持续播放的问题。
本文介绍如何利用 `hashchange` 事件监听 url 变化，在 shiny（尤其是配合 shiny.router 实现单页路由时）自动暂停所有正在播放的 `
在基于 shiny.router 构建的 Shiny 单页应用（SPA）中，页面切换并非传统意义上的全量重载，而是通过 DOM 元素的显隐控制实现“伪路由”——即不同页面内容共存于同一 HTML 文档中，仅通过 CSS 或 JS 控制可见性。这种机制虽提升了响应速度，却带来一个常见副作用：已加载但不可见的 <audio> 或 <video> 元素仍保持播放状态，导致音视频重叠、资源占用异常甚至用户体验混乱。
根本原因在于：HTML5 媒体元素的播放状态独立于其 DOM 可见性，display: none 或 visibility: hidden 并不会自动触发 pause()。而 shiny.router 依赖 URL hash（如 #page1、#page2）驱动视图切换，因此监听 hashchange 事件是捕获页面跳转最可靠、侵入性最小的方式。
以下为推荐的解决方案——在 UI 中嵌入一段轻量级 jQuery 脚本，监听页面哈希变化并统一暂停所有媒体：
ui <- fluidPage(
# 其他 UI 组件...
tags$script(HTML('
$(function() {
$(window).on("hashchange", function(e) {
// 暂停所有 <video> 元素
$("video").each(function() {
this.pause();
});
// 暂停所有 <audio> 元素
$("audio").each(function() {
this.pause();
});
});
});
'))
)✅ 关键说明：
立即学习“前端免费学习笔记（深入）”；
- 使用原生 DOM 方法 this.pause()（而非 $(this).pause()）更可靠，避免 jQuery 插件兼容性问题；
- $(function(){...}) 确保脚本在 DOM 加载完成后执行；
- 无需额外引入 jQuery 依赖（Shiny 默认内置）；
- 对 shiny.router 的 hash 导航完全兼容，也适用于手动修改 location.hash 的场景。
⚠️ 注意事项：
- 若应用使用 HTML5 History API（如 pushState）而非 hash 路由，请将 "hashchange" 替换为 "popstate" 事件；
- 如需保留用户离开前最后播放的媒体状态（例如返回时继续播放），可扩展逻辑：在 hashchange 触发前缓存当前活跃媒体 ID，并在新页面加载后恢复；
- 避免在 renderUI() 或 uiOutput() 动态生成媒体元素后重复绑定事件——上述脚本只需全局注册一次，即可覆盖后续动态插入的 <audio>/<video> 标签（得益于事件委托机制）。
该方案简洁、鲁棒且零侵入，无需改造现有音频控件或放弃原生 HTML5 controls，是 Shiny SPA 场景下媒体生命周期管理的最佳实践。
