Layui的accept:'audio'仅前端过滤，必须后端校验文件头；表格中需用templet返回未转义的audio标签，src须为可访问完整URL并处理中文编码；移动端禁用autoplay，进度条需正确绑定index，IE11需降级iframe模式。
accept: 'audio' 能否直接限制音频类型
能，但只是前端过滤，不防绕过。layui 的 accept: 'audio' 会自动匹配 audio/* mime 类型（如 audio/mpeg、audio/wav），但浏览器实际允许用户手动修改文件后缀或伪造 mime，所以必须配合后端校验文件头（如 mp3 的 ff fb、wav 的 riff）。常见错误是只信前端，导致上传了 .exe 改名成 .mp3 后触发 xss 或服务崩溃。
上传成功后怎么让页面立刻可播放
关键不是“放个 <audio></audio> 标签”，而是确保 src 是可访问的静态路径，且服务端没加防盗链或跨域拦截。常见坑：
-
done回调里拿到的res.data.src必须是完整 URL（如https://xxx.com/uploads/abc.mp3），不能是相对路径或后端内部路径（如/var/www/uploads/abc.mp3） - 如果用的是
<audio controls></audio>，记得给它加preload="metadata"，否则 iOS Safari 可能卡在加载状态 - 别把 audio 标签写死在 HTML 里再用 JS 改
src——Layui 表格单元格里要关掉escape，否则<audio></audio>被转义成纯文本
如何在表格里显示音频并支持点击播放
Layui 表格默认对单元格内容做 HTML 转义，<audio></audio> 标签会被当成字符串显示。必须用 templet 返回原始 HTML，并处理空值和协议问题：
示例列配置：
templet: function(d) {
return d.audio_url
? '<audio controls preload="metadata" style="width:200px;"><source src="'%20+%20d.audio_url%20+%20'"></source></audio>'
: '—';
}
注意点：
-
d.audio_url必须是已通过 CORS 或同源策略允许加载的地址 - 移动端 Safari 对 autoplay 限制极严，别加
autoplay，靠用户手势触发 - 如果音频路径带中文或特殊字符，务必用
encodeURIComponent编码后再拼进 src
上传时显示进度条但不生效？
进度条不更新，90% 是因为没传 progress 回调，或回调里没正确绑定到对应 DOM 元素。Layui 的 progress 回调第 4 个参数是当前文件索引，必须用它区分多个文件：
progress: function(n, elem, e, index) {
var bar = elem.next('.layui-progress').find('.layui-progress-bar');
bar.css('width', n + '%').text(n + '%');
}
容易漏的细节：
- HTML 中每个进度条容器要有唯一
id或 class，不能全用同一个选择器 - 如果用了
bindAction手动上传，progress依然有效，但需确保 upload 实例已 render 成功 - IE11 不支持
XMLHttpRequest.upload.onprogress，若需兼容，得降级用 iframe 模式（Layui v2.8+ 已弃用，建议明确告知不支持 IE）
AudioContext 解析——但后者在非 HTTPS 环境下被禁用，且耗性能，实际项目里基本都由后端计算好一并返回。
