HTML audio元素无法原生限时播放，必须用JavaScript通过play()后设setTimeout调用pause()实现；需在play()成功后设定时器、监听pause事件清除定时器，并配合服务端签名URL增强防护。
音频文件怎么设置自动停止播放
HTML 本身不提供“限时收听”原生能力，audio 元素没有 maxDuration 或 expireAfter 这类属性。必须靠 JavaScript 控制播放时长，否则用户可无限次播放、拖拽、重播。
核心思路是：用 audio.play() 启动后，立即启动一个 setTimeout 定时器，在指定毫秒后调用 audio.pause() 并（可选）禁用控件。
- 定时器必须在
play()成功 resolve 后再设，避免因用户手势限制（如 Safari/Chrome 移动端需用户交互才允许播放）导致计时提前失效 - 不要依赖
audio.duration初始值——它在加载完成前常为NaN，应监听loadedmetadata事件后再取值，但限时逻辑一般不依赖此值，而是按“从播放开始计时” - 若音频被用户手动暂停，定时器仍继续运行；如需暂停即取消限时，得额外监听
pause事件并clearTimeout
怎么防止用户跳过时间限制
纯前端限时本质是“防君子不防小人”——用户禁用 JS、审查元素删掉 audio 的 controls、或直接扒源文件，都能绕过。所以关键不是“锁死”，而是明确告知限制 + 做基础防护。
实操上可做三层收敛：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 移除原生控件：
<audio controls="false"></audio>，或设controls="false"并隐藏整个元素，只暴露自定义按钮 - 禁用右键和下载：
oncontextmenu="return false;" ondragstart="return false;"（仅辅助，不能替代服务端权限） - 服务端对音频 URL 做短期签名（如 5 分钟有效期），配合前端限时形成双重约束；URL 过期后即使用户拿到链接也无法播放
JavaScript 实现限时播放的最小可靠代码
以下代码支持点击播放、30 秒后自动暂停、暂停后清空定时器、播放失败时不触发计时：
<audio id="limited-audio" src="/api/audio/signed/abc123.mp3"></audio>
<button id="play-btn">限时收听（30秒）</button>
<script>
const audio = document.getElementById('limited-audio');
const playBtn = document.getElementById('play-btn');
let timeoutId = null;
playBtn.addEventListener('click', () => {
if (timeoutId) clearTimeout(timeoutId);
audio.play()
.then(() => {
timeoutId = setTimeout(() => {
audio.pause();
playBtn.textContent = '已结束';
playBtn.disabled = true;
}, 30000); // 30秒
})
.catch(err => {
console.warn('播放失败，未启动计时:', err);
// 常见错误：NotAllowedError（缺少用户手势）、TypeError（格式不支持）
});
});
audio.addEventListener('pause', () => {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
});
</script>
移动端 Safari 和 Chrome 的兼容注意点
iOS Safari 对自动播放限制最严：即使用户点了按钮，若音频含音频轨道且未静音，仍可能被拦截。必须确保：
-
audio元素初始不设autoplay，也不调用play()直到用户真实点击 - 首次播放前，不要提前调用
load()；让play()自动触发加载，否则部分 iOS 版本会拒绝后续播放 - 避免在
touchend外的事件（如setTimeout延迟）里调用play()，Safari 会判定为非直接用户交互 - 如果音频必须静音才能播放，加
muted属性，但注意这与“收听”场景冲突，需权衡
真正难处理的是用户反复点击“重试”造成的多个定时器叠加，或者页面切后台后定时器行为异常——这些都得加状态标记和生命周期清理，不是加一行 setTimeout 就完事的。
