本文介绍如何利用 hashchange 事件监听 URL 变化，在 Shiny 应用（尤其是使用 shiny.router 时）自动暂停所有正在播放的 <audio> 和 <video> 元素，彻底解决页面切换后媒体持续播放的问题。
本文介绍如何利用 `hashchange` 事件监听 url 变化，在 shiny 应用（尤其是使用 `shiny.router` 时）自动暂停所有正在播放的 `
在基于 shiny.router 构建的多页 Shiny 应用中，页面切换并非传统意义上的“跳转”，而是通过 DOM 元素的显隐控制实现的——即旧页面未被销毁，仅被隐藏；新页面被显示。因此，已加载的 <audio> 或 <video> 元素仍处于运行状态，其 play() 方法不会因页面不可见而自动中断，导致音频/视频在用户离开当前视图后继续播放，甚至出现多个媒体重叠播放的体验问题。
根本原因在于：shiny.router 依赖 URL hash（如 #page1、#page2）驱动路由，但 Shiny 默认不监听 hash 变化事件，也无内置机制清理媒体资源。解决方案是主动监听 window 的 hashchange 事件，并在每次路由变更时遍历并暂停所有媒体元素。
以下为推荐的完整实现方案（兼容 Shiny v1.7+，无需额外 JS 库）：
library(shiny)
library(shiny.router) # 或其他路由方案（如 shinyjs + conditionalPanel）
ui <- fluidPage(
# 注入全局媒体暂停脚本（必须放在 ui 最顶层，确保早于所有 media 元素加载）
tags$script(HTML('
$(function() {
// 监听 URL hash 变更（shiny.router 的核心触发机制）
$(window).on("hashchange", function(e) {
// 暂停所有 <audio> 元素
$("audio").each(function() {
const audio = this; // this 指向原生 HTMLAudioElement
if (!audio.paused && !audio.ended) {
audio.pause();
}
});
// 暂停所有 <video> 元素（同理）
$("video").each(function() {
const video = this;
if (!video.paused && !video.ended) {
video.pause();
}
});
});
});
')),
# 示例：含音频控件的页面（实际应用中可分布于不同路由页）
tags$audio(
src = "https://www.soundjay.com/misc/sounds/bell-05.wav",
controls = TRUE,
id = "demo-audio"
),
# 其他 UI 内容...
actionButton("go_to_page2", "跳转到页面2"),
verbatimTextOutput("current_hash")
)
server <- function(input, output, session) {
# 示例：模拟路由跳转（shiny.router 会自动处理 hash）
observeEvent(input$go_to_page2, {
updateQueryString("#page2", mode = "push")
})
# （可选）实时显示当前 hash，用于调试
output$current_hash <- renderText({
paste("当前 Hash:", Sys.time(), "-", session$clientData$url_hash)
})
}
shinyApp(ui, server)✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- hashchange 是核心：shiny.router 通过修改 location.hash 实现页面切换，该事件天然适配其行为；
- 原生 API 优先：使用 this.pause()（而非 jQuery 的 .pause()）调用原生 HTMLMediaElement 方法，避免兼容性问题；
- 安全暂停判断：添加 !audio.paused && !audio.ended 条件，防止对已暂停或结束的媒体重复调用 pause() 报错；
- 注入时机重要：tags$script() 必须置于 fluidPage() 顶部，确保脚本在所有 <audio>/<video> 标签渲染前执行，从而能正确绑定事件；
- 无需修改原有媒体标签：保持使用标准 <audio controls>，无需自定义按钮或 JS 控制逻辑，零侵入式集成。
⚠️ 注意事项：
- 若使用 shiny.router 的 pushState 模式（非 hash），需改用 popstate 事件替代 hashchange；
- 对于动态生成的媒体元素（如 renderUI 输出），确保其在 hashchange 触发时已被 DOM 加载（通常 $(document).ready() 已覆盖）；
- 如需恢复播放状态（例如返回原页面时），可扩展逻辑：在 hashchange 前缓存当前活跃媒体 ID，再在目标页重新 play() —— 但多数场景下“静音退出”即满足需求。
此方案简洁、可靠、无依赖，完美契合 Shiny 的响应式架构，是解决路由类媒体播放残留问题的标准化实践。
