行，但需加controls属性，否则无播放控件；路径错误会报MEDIA_ERR_SRC_NOT_SUPPORTED；多音频需JS监听play事件暂停其他实例；移动端须用户手势触发；推荐根路径或base标签管理音频地址。
表格单元格里直接放 <audio> 标签行不行？
行，但得加 controls 属性，否则用户看不到播放控件。默认情况下 <audio> 是静默隐藏的，放在 <td> 里也不会自动渲染出按钮或进度条。
常见错误是只写 <audio src="xxx.mp3"></audio>，结果页面上啥也不显示——不是代码错了，是没告诉浏览器“请显示控制界面”。
- 必须加上
controls：比如<audio controls src="song.mp3"></audio> - 如果音频路径不对，控制条会显示但点击报错
MediaError: MEDIA_ERR_SRC_NOT_SUPPORTED，优先检查文件是否存在、MIME 类型是否被服务器正确返回（如audio/mpeg） -
<td>宽度不够时，控制条可能被截断，建议给<td>加min-width: 200px或用white-space: nowrap防换行
多个音频共存时怎么避免互相干扰？
原生 <audio> 默认不支持“暂停其他正在播放的音频”，点一个播，另一个还在响——这是浏览器默认行为，不是 bug。
解决办法是用 JS 监听 play 事件，手动暂停别的实例。不需要框架，几行就能搞定：
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
<audio class="table-audio" controls src="a.mp3"></audio> <audio class="table-audio" controls src="b.mp3"></audio>
然后加脚本：
document.querySelectorAll('.table-audio').forEach(audio => {
audio.addEventListener('play', () => {
document.querySelectorAll('.table-audio').forEach(a => {
if (a !== audio) a.pause();
});
});
});
- 注意：
play事件在用户主动触发（如点击）时才可靠；自动播放（autoplay）受策略限制，多数浏览器会静音或拦截 - 如果表格动态生成，要把这段逻辑放在 DOM 渲染完成后执行，比如
DOMContentLoaded或插入后手动调用
移动端点击播放没反应？
iOS Safari 和部分安卓浏览器要求音频播放必须由用户手势（click/tap）直接触发，不能套在 setTimeout 或异步回调里。
表格里常见陷阱：用 onclick 绑在 <td> 上再调 audio.play()，结果失败——因为 <td> 不是 <audio> 本身，事件委托链可能中断或被拦截。
- 最稳做法：让
<audio>的 controls 可见，用户点播放按钮即触发（这是浏览器认可的手势） - 如果非要自定义按钮，确保
audio.play()写在事件回调最外层，且函数名不要用箭头函数包裹后再传入（某些旧版 Safari 对 this 绑定敏感） - 避免在
touchstart里调play()，改用click或touchend，防止误触和兼容性问题
音频路径怎么写才不容易 404？
表格常用于后台管理页或数据列表，音频路径容易写成相对路径，一嵌套多层就挂掉。比如 HTML 在 /admin/list.html，音频却放在 /assets/audio/ 下。
- 推荐用根路径：
src="/assets/audio/intro.mp3"（开头带/） - 如果项目部署在子路径（如
https://example.com/app/），可用<base href="/app/">统一基准，再写相对路径 - 开发时用 Chrome DevTools 的 Network 面板看实际请求地址，比猜路径靠谱得多；看到
404就点开看 Request URL 是不是拼错了斜杠或大小写
音频文件名含中文或空格？赶紧改成英文下划线，服务器对 URL 编码处理不一致，尤其是 Nginx/Apache 默认不支持未编码的空格。
