纯HTML无法实现播放列表折叠展开，因audio/video无状态管理能力，必须用JS控制DOM显隐与CSS过渡，并避免自动播放限制及多实例冲突。

纯 HTML 无法直接控制多媒体播放列表的折叠展开逻辑——audio 和 video 元素本身不提供列表状态管理能力，所有“折叠/展开”行为必须靠 JS 控制 DOM 显隐 + CSS 过渡，且需规避自动播放限制和多实例冲突。

为什么不能用 details/summary 直接套播放器

虽然 details 原生支持折叠，但直接包裹 audio 或 video 会出问题：

• details 展开时，内部 audio 的 controls 可能因父容器重排而错位或失效
• 多个 details 并列时，无法统一控制“只展开当前项”，互斥逻辑仍需 JS 监听 toggle 事件并手动关闭其他
• video 在 details[open] 中首次加载可能触发 NotAllowedError（尤其 Safari），因为展开动作不被视为用户手势

正确结构：单播放器 + 列表项独立折叠

核心是分离“播放控制”和“列表展示”：

• 只保留一个 或 ，所有播放操作都指向它
• 列表项用
  或
• 包裹元数据，每个带 data-src、data-title
• 每项内放一个可折叠区域：

  详细描述

  ，不放播放器
• 折叠/展开仅作用于该描述区域，不影响主播放器

示例关键结构：


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• ▶ 晴天 ⓘ 详情

  周杰伦 2003 年专辑《叶惠美》主打曲...

JS 控制折叠 + 避免常见报错

监听按钮点击，切换 .track-details 的显隐类，并确保动画平滑：

• 不要用 display: none 硬切——改用 max-height + transition，否则 height:auto 无法过渡
• 给 .track-details 设初始 max-height: 0、overflow: hidden，展开时设为足够大的值（如 max-height: 200px）
• 点击播放按钮时，先调 audioEl.load() 再 audioEl.play()；若失败，捕获 NotAllowedError 并提示用户需手动点击一次页面
• 避免在 DOMContentLoaded 里自动调 play()——浏览器会拦截，必须由用户真实点击触发

CSS 动画兼容性要点

折叠动画要兼顾现代与旧版浏览器：

• Chrome/Firefox/Safari 支持 max-height 过渡，但 Safari 对 max-height: 0 → auto 不生效，必须写死展开值（如 max-height: 240px）
• IE11 不支持 max-height 过渡，降级为 opacity + visibility 切换（无高度动画，但功能完整）
• 不要对 audio 或 video 元素本身加 transform 或 scale——可能破坏 controls UI 渲染
• 如果要用箭头旋转指示状态，用 transform: rotate(90deg) 而非 Unicode 替换，避免字体缩放失真

最易被忽略的是：播放列表的“折叠”从来不是折叠播放器，而是折叠元数据区域；真正的播放控制永远应集中到单一实例，否则音频争抢、状态不同步、内存泄漏全都会立刻出现。