行内音频需将直接置于内并添加controls和preload="metadata"属性，保持默认inline显示，提供mp3/ogg双格式，避免display:block或width:100%。
用 <audio></audio> 标签实现行内播放，不是靠 CSS 定位
HTML 本身没有“行内音频”这个独立概念，所谓“段落中插入行内音频”，本质是把 <audio></audio> 元素放在 <p></p> 标签内部，并设为不换行显示。浏览器默认会把它渲染成一个内联级控件（类似图片），但前提是不能加 controls 以外的破坏性属性。
常见错误是试图用 display: inline 强行塞进段落——其实不用，<audio></audio> 在现代浏览器中默认就是 display: inline（或 inline-block），只要没被父容器的 white-space 或 flex 布局干扰。
- 确保
<audio></audio>直接写在<p></p>里，不要套<div> 或 <code><span></span> - 避免给
<audio></audio>设width: 100%或display: block，否则它会撑满整行 - 如果音频控件太宽影响排版，用
width设固定值（如width: 120px），别用百分比 - 只加
controls，别加autoplay或loop——自动播放在多数浏览器被策略限制，还容易触发用户反感 - 若想默认静音，用
muted，但注意：muted不等于volume="0"，后者 JS 才能设，前者是 HTML 属性且更可靠 - 控件尺寸由浏览器决定，无法用 CSS 精确缩放；若需定制样式，得用 JS + 自定义按钮，不再是“行内嵌入”了
- 路径优先用相对路径，且确认相对于 HTML 文件的位置，不是相对于 CSS 或 JS
- 务必提供至少两种格式：
<source src="a.mp3" type="audio/mpeg"></source>和<source src="a.ogg" type="audio/ogg"></source>，MP3 在 Safari/Edge 支持好，OGG 在 Firefox 更稳 - 检查服务器是否返回正确的 MIME 类型；本地双击打开 HTML 时，
file://协议下 Chrome 会拒绝加载音频，必须走本地服务器（如python3 -m http.server）
controls 属性必须加，否则用户点不了
不加 controls 的 <audio></audio> 默认不可见、不可操作，哪怕它在段落里也等于不存在。很多人误以为“静音自动播放”就是行内嵌入，但那只是技术上可行，体验上几乎等于没放。
真正可用的行内音频必须带控件，且推荐最小化交互干扰：
路径和格式问题比样式更常导致失败
音频文件打不开，90% 是路径或格式问题，而不是标签写错。尤其当音频放在段落里时，出错更难察觉——因为页面其他部分正常，只有那个小控件显示“×”或空白。
移动端点击不触发？大概率是没加 preload="metadata"
iOS Safari 和部分安卓 WebView 要求音频必须有元数据才能响应首次点击播放。光写 <audio controls src="x.mp3"></audio> 在手机上可能点一下没反应，再点才有声。
解决方法很简单，在标签上加 preload="metadata"：
<p>请听这段说明：<audio controls preload="metadata" src="guide.mp3"></audio></p>
这个属性告诉浏览器：先下载音频头信息（时长、采样率等），不下载全部内容，既快又省流量。不加的话，某些 UA 会卡在“等待用户手势”的状态，直到第二次点击才开始加载。
真正麻烦的是异步加载后手动播放——那已经超出“段落中插入”的范畴了，得用 JS 绑定事件、处理 Promise，而且 iOS 对非用户手势触发的 play() 依然拦截。所以，老老实实用 preload="metadata" + controls，最省事。
