行，但必须加 controls 属性，否则无播放控件；路径错误是80%“点不动”主因；多音频需js实现互斥播放；移动端要注意ios手势触发限制和格式兼容性。
表格单元格里直接放 <audio></audio> 标签行不行？
行，但得加 controls 属性，否则用户看不到播放控件。默认情况下 <audio></audio> 是静默的、不可交互的，塞进 <td> 里也不会自动显示 UI。
<p>常见错误是只写 <code><audio src="sound.mp3"></audio>，结果表格里一片空白——不是没加载，是根本没渲染控件。
- 必须显式写
<audio controls src="xxx.mp3"></audio> -
controls是布尔属性，不带值也行，但不能省略 - 建议加上
preload="metadata"，避免整段音频预加载拖慢表格渲染
音频路径写相对还是绝对？表格里容易出错在哪？
路径错是 80% 的“点不动”问题根源。表格本身不改变路径解析逻辑，但容易让人忽略当前 HTML 文件所在位置。
比如 HTML 在 /pages/list.html，音频在 /assets/audio/notify.ogg，那 src 就得写 ../assets/audio/notify.ogg 或绝对路径 /assets/audio/notify.ogg。
- 别用
./audio/xxx.mp3假设表格所在目录就是音频目录——大概率错 - 浏览器控制台看到
404 (Not Found)错误，八成是路径问题 - 用开发者工具右键「Open in new tab」点
src链接，能直接验证路径是否有效
多个音频共存时怎么避免互相干扰？
原生 <audio></audio> 默认不互斥，点一个，另一个还在播。网页表格常有多行多音频，用户点完 A 行又点 B 行，结果两个声音叠在一起。
没有内置“单例播放”机制，得靠 JS 控制。核心思路是：监听所有 <audio></audio> 的 play 事件，暂停其他正在播放的实例。
document.querySelectorAll('td audio').forEach(audio => {
audio.addEventListener('play', () => {
document.querySelectorAll('td audio').forEach(a => {
if (a !== audio && !a.paused) a.pause();
});
});
});
- 这段代码要等 DOM 加载完再执行（比如放在
<script></script>末尾或DOMContentLoaded里） - 注意不要重复绑定，否则同一个 audio 可能被多次监听，导致异常暂停
- 如果表格支持动态插入行，需对新插入的
<audio></audio>单独调用监听逻辑
移动端点击没反应？iOS 和 Android 的兼容细节
iOS Safari 对自动播放限制极严，哪怕加了 controls，首次点击也可能触发失败——尤其当音频不在用户手势上下文中启动时。
最稳妥做法：确保 <audio></audio> 元素本身可被直接点击（比如不被 pointer-events: none 挡住），且没有父级阻止冒泡。
- 别把
<audio></audio>套在<a href="#"></a>里再加onclick="return false"——会吞掉原生控件事件 - Android Chrome 一般没问题，但旧版 WebView 可能不支持
.ogg，建议至少提供.mp3备份 - 用
<source></source>标签提供多格式：<source src="x.mp3" type="audio/mpeg"><source src="x.ogg" type="audio/ogg"></source></source>
表格里音频不是装饰，是功能组件。路径、事件绑定、移动端点击穿透，这三个点漏掉任意一个，用户就卡在“明明写了却播不了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
