直接用<audio>标签插入音频无需JS，但需路径正确、格式支持（推荐.mp3/.ogg），加controls才显示控件；常见错误包括URL缺协议、中文路径未编码、file://被Chrome拒绝；建议用相对路径如“audio/ch1.mp3”，可加preload="metadata"减延迟，自动播放需autoplay+muted；分章节需JS控制互斥播放（暂停其他并重置currentTime）；兼容性方面，IE9+均支持，但iOS Safari禁用自动播放且不触发Promise，fallback应使用多个<source>而非内部文本；学生易忽略MIME类型配置，需确认服务器正确返回audio/mpeg；避免滥用loop。
直接用 <audio> 标签插入单个音频文件
不需要 JS 就能播放，但必须确保路径正确、格式被浏览器支持（推荐 .mp3 或 .ogg）。<audio> 是行内替换元素，加了 controls 属性才显示播放控件。
常见错误：src 路径写成绝对 URL 却漏了协议（如 src="localhost:8080/audio/ch1.mp3" 缺 http://），或用了中文路径/空格未编码；本地双击 HTML 文件时，Chrome 会因安全策略拒绝加载 file:// 下的音频。
- 路径建议用相对路径，比如音频放在同级
audio/文件夹：<audio controls src="audio/ch1.mp3"></audio> - 加
preload="metadata"可减少首播延迟（只预加载时长、封面等，不下载全部） - 如果想默认静音播放，加
muted；自动播放需同时加autoplay和muted（现代浏览器强制要求）
分章节配音：用多个 <audio> + 触发逻辑控制
每个章节对应一个独立 <audio> 标签，靠 ID 区分，再用 JS 控制播放/暂停/切换。不能只靠 CSS 显示隐藏——<audio> 元素即使 display: none，仍可能在后台缓冲或触发 canplay 事件。
关键点在于「互斥播放」：点第二章时，第一章必须 pause() 并重置 currentTime = 0，否则切回去会从中间开始播。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<audio>加唯一 ID，例如：<audio id="audio-ch1" src="audio/ch1.mp3"></audio> - 章节按钮绑定
onclick，调用统一函数：playChapter('ch1') - 函数内部先遍历所有
audio元素，执行pause()和currentTime = 0，再对目标 ID 调用play()
<audio> 的兼容性与 fallback 处理
IE9+、Edge、Chrome、Firefox、Safari 都支持 <audio>，但老版本 Safari 对 .mp3 支持不稳定，iOS Safari 默认禁用自动播放且不触发 play() 的 Promise resolve，导致 JS 控制失败。
真正有效的 fallback 不是塞文字提示，而是提供备用格式：
- 在
<audio>内嵌多个<source>，浏览器按顺序选第一个能解码的：<source src="audio/ch1.mp3" type="audio/mpeg"><source src="audio/ch1.ogg" type="audio/ogg"> - 不要依赖
<audio>内部的文本内容做降级提示——部分屏幕阅读器会读，但视觉用户看不到；真要提示，用相邻<p class="audio-unavailable"> - 移动端务必测试真机，模拟器常掩盖
autoplay限制问题
学生作业中容易被忽略的细节
很多学生作品把音频文件直接扔进项目根目录，却没检查服务器 MIME 类型是否正确。VS Code Live Server 默认配对正确，但用 Python http.server 或双击打开时，.mp3 可能被识别为 text/plain，导致加载失败且无报错提示。
- 确认音频文件实际可访问：在浏览器地址栏直接输入
http://127.0.0.1:5500/audio/ch1.mp3，能下载或播放才算通 - 避免在
<audio>上滥用loop——章节配音通常只需播一次，循环反而干扰叙事节奏 - 如果用 WebStorm，右键音频文件 → “Copy Path” 选 “Relative path for HTML”，能自动补对斜杠方向，比手敲可靠
