使用标签插入有声读物需添加controls属性显示控件，推荐preload="metadata"节省流量，提供.mp3和.ogg多格式备选；ios须由用户手势触发播放；多音频需js实现互斥播放；封面、标题等状态联动依赖timeupdate等事件监听。
怎么用 <audio></audio> 标签插入有声读物音频
直接用 <audio></audio> 标签就能嵌入，不需要额外库或插件。关键不是“能不能放”，而是“放得稳、听得清、用得顺”。<audio></audio> 默认不自动播放，也不显示控件，得手动加属性。
常见错误是只写 <audio src="story.mp3"></audio>，结果页面上啥也看不到——因为没加 controls 属性，浏览器默认隐藏播放器。
- 必须加上
controls才能显示播放/暂停、进度条、音量等基础控件 - 建议加上
preload="metadata"：只预加载时长、封面（如有）、格式信息，不提前下载整段音频，节省用户流量 - 如果音频较长（比如一集 30 分钟），避免用
preload="auto"，尤其在移动端容易触发 Safari 的自动静音策略 - 提供
<source></source>多格式备选更稳妥，例如同时提供.mp3和.ogg，应对老版 Firefox 或特殊环境
<audio controls preload="metadata"><source src="chapter1.mp3" type="audio/mpeg"><source src="chapter1.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
为什么 iOS / Safari 上点不了播放按钮
iOS 系统强制要求所有音频播放必须由用户手势（如 click、touchend）触发，不能靠 autoplay 或 JS 定时调用 play()。这是硬性限制，绕不过。
有声读物页面常犯的错：在页面加载完就立刻 audio.play()，结果报错 NotAllowedError: The request is not allowed by the user agent。
- 确保播放操作绑定在明确的用户交互上，比如“播放”按钮的
onclick里调用play() - 不要依赖
autoplay属性，iOS 下它基本无效；即使加了muted也没用——音频不是视频，muted对<audio></audio>无意义 - 如果想实现“点击标题即播放”，就把
play()写进标题的onclick，而不是等 DOM 加载完自动播
怎么让同一页面多个音频互斥播放（播新的就停旧的）
有声读物常按章节分多个 <audio></audio>，用户点第二章时，第一章不该继续响。这得靠 JS 监听和手动控制，HTML 本身不提供“单例播放”机制。
核心思路是：所有音频共用一个变量记录当前正在播放的实例，每次新播放前先调用旧实例的 pause()。
- 给每个
<audio></audio>加data-id或id，方便识别 - 监听所有
play事件，触发时遍历其他<audio></audio>并pause() - 注意别漏掉
playing或timeupdate事件干扰逻辑；只响应play就够了
const audios = document.querySelectorAll('audio');
let currentPlaying = null;
audios.forEach(audio => {
audio.addEventListener('play', () => {
if (currentPlaying && currentPlaying !== audio) {
currentPlaying.pause();
}
currentPlaying = audio;
});
});
封面图、标题、进度文字这些怎么跟音频联动
纯 HTML 不处理状态同步，得靠 JS 订阅音频事件。最实用的是监听 timeupdate（播放中持续触发）和 ended（播完）。
容易被忽略的一点：timeupdate 触发频率不固定，不要在里面做重计算或频繁 DOM 更新，否则卡顿。用 requestAnimationFrame 节流更稳。
- 更新当前时间显示：取
audio.currentTime和audio.duration算百分比，再更新<progress></progress>的value - 切换封面或标题：可以按时间段预设数组，比如
[[0, 120, "第一章"], [120, 240, "第二章"]]，在timeupdate里比对区间 - 注意
duration初次可能为NaN（元数据未加载完），要等loadedmetadata事件后再读
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
