表格渲染后播放音效必须在done回调中执行，因table.render()异步，需确保audio标签已插入DOM；应通过templet返回未转义audio标签并用querySelector精准定位首行音频播放。
表格渲染完成后的音效播放必须放在 done 回调里
因为 table.render() 是异步的，调用后立即查 <audio> 元素会返回 null。所有依赖表格 dom 的操作，包括查找并播放音频，都得塞进 done 函数内部——这是唯一能确保 <audio> 标签已真实插入页面的时机。
常见错误是把 document.querySelector('audio') 写在 render() 调用之后，结果永远找不到元素；也别用 setTimeout 或监听 DOMContentLoaded，它们和 Layui 表格的渲染节奏不同步。
-
done会在数据加载完、<tbody>插入 DOM、分页/排序状态更新后触发，此时第一行的<audio>已就绪 - 如果用了
url+page: true，done每次翻页都会再执行，注意避免重复自动播放 - 服务端返回空数据时
done仍会执行，但res.data.length === 0，需提前判断是否跳过播放
单元格内怎么放 <audio> 才能被正常识别
不能靠后端返回 HTML 字符串直接渲染（Layui 默认转义），也不能在 templet 里写 document.write —— 正确做法是在列配置中用 templet 返回未转义的完整 <audio> 标签，并确保该列不参与排序/调整宽度（加 unresize: true 防控错位）。
- 字段名必须和后端返回 key 一致，比如后端返回
audio_url，templet里就得用d.audio_url -
src必须是可访问路径，相对地址要相对于当前页面，带鉴权 token 的需拼成完整 URL - 推荐加
preload="none"，避免首屏加载大量音频资源；自动播放只在首次渲染触发，不设autoplay属性 - 移动端或静音环境可能拦截播放，
play().catch()必须处理，不要让报错中断后续逻辑
{ field: 'audio_url', title: '音效', unresize: true, templet: function(d) {
return '<audio id="first-audio" src="' + (d.audio_url || '') + '" preload="none"></audio>';
} }
如何精准定位并播放第一行的 <audio>
别用 document.getElementById('first-audio') —— 如果表格有多页或重载，ID 会重复。正确方式是：在 done 中用原生 JS 定位第一行对应列的 <audio>，然后调用 play()。
- 用
document.querySelector('#demo + .layui-table-box .layui-table-body tbody tr:first-child td:nth-child(N) audio')，其中N是音频列的序号（从 1 开始） - 更稳妥的做法是给该列
templet加一个唯一 class，比如<audio class="row-audio">，再用querySelector('.row-audio') - 播放前检查
audio.src是否有效，空值或 404 会导致play()报错 - 现代浏览器要求用户交互后才能播放有声媒体，若音频无声音，可加
muted属性提高成功率（但非必需）
done: function(res, curr, count) {
if (res.data.length === 0) return;
const audio = document.querySelector('#demo + .layui-table-box .layui-table-body tbody tr:first-child .row-audio');
if (audio && audio.src) {
audio.currentTime = 0;
audio.play().catch(e => console.warn('自动播放被阻止:', e));
}
}
容易被忽略的兼容性与体验细节
自动播放不是“点了就响”，它受浏览器策略、设备类型、用户设置三重限制。很多问题不是代码写错了，而是没绕开这些现实约束。
- Chrome、Safari、微信内置浏览器普遍禁止无用户手势的有声自动播放；加
muted可缓解，但不能保证成功 - 某些安卓 WebView 对
<audio>支持不全，优先用 MP3（H.264/AAC）格式，避免 OPUS 或 FLAC - 表格开启虚拟滚动（
height设置）时，第一行可能被复用或暂未渲染，tr:first-child查询会失效，此时应改用table.cache数据 + 动态插入<audio> - 如果音效只是提示用途（如“提交成功”），建议降级为
layer.msg()或震动反馈，比强求播放更可靠
