倒计时结束自动播放提示音需先通过用户点击触发 audio.play() 解锁音频上下文，再复用预加载的 Audio 对象在到期时调用 play()；iOS Safari 需额外处理后台恢复问题，失败时应降级为弹窗或震动提醒。

倒计时结束时怎么自动播放提示音

浏览器默认禁止自动播放音频（尤其是带声音的），所以直接在倒计时 setTimeout 里调用 audio.play() 很可能静音失败，控制台报错 DOMException: play() failed because the user hasn't interacted with the document yet。必须先获得用户手势授权。

• 首次播放必须由用户真实交互触发（如点击、触摸），之后才能自动播放
• 建议在页面加载后加一个「开始倒计时」按钮，点击时初始化并播放一次无声音频（或极短静音片段）来解锁音频上下文
• 不要用 new Audio(src).play() 在定时器里反复创建实例；应提前创建 audio 对象并复用

如何用 HTML + JS 实现可播放的倒计时音频

核心是：预加载 Audio 对象 + 用户点击激活 + 倒计时到点调用 play()。注意音频格式兼容性（推荐 .mp3 和 .ogg 双源）。

<audio id="alert-sound" preload="auto">
  <source src="alert.mp3" type="audio/mpeg">
  <source src="alert.ogg" type="audio/ogg">
</audio>

<button id="start-btn">开始倒计时（3秒）</button>

JS 部分关键逻辑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 点击按钮时，先调用 audio.play().catch(e => console.warn("Audio unlock needed:", e)) —— 即使失败也不影响后续
• 启动倒计时用 setTimeout 或 setInterval，到期执行 audio.currentTime = 0; audio.play();
• 为防重复触发，倒计时结束后可设 audio.loop = false，并重置 currentTime

移动端 iOS Safari 特别要注意什么

iOS Safari 对音频限制最严：即使用户点过页面，如果页面切到后台再回来，音频上下文可能被挂起，play() 仍会失败。

立即学习“前端免费学习笔记（深入）”；

• 不能依赖 visibilitychange 事件后自动恢复播放；必须再次捕捉用户点击
• 建议倒计时结束时，如果 audio.play() 报错，就 fallback 到弹窗提醒或震动（navigator.vibrate(200)）
• 音频文件大小尽量小（oncanplay 不触发
• 避免使用 autoplay 属性 —— 它在所有现代浏览器中基本无效且会被忽略

为什么用 Web Audio API 而不是 Audio 元素更可控

如果需要精确控制音量、暂停、淡入淡出，或播放合成音效（比如“滴”一声而非录音文件），Web Audio API 是更可靠的选择，它不依赖用户手势解锁播放权限（只要上下文已激活）。

• 初始化一次 const AudioContext = window.AudioContext || window.webkitAudioContext;，在用户点击时调用 ctx.resume()
• 倒计时结束时，用 oscillator + gainNode 生成短促提示音，无需加载外部文件
• 但注意：iOS 上仍需用户交互才能调用 ctx.resume()，这点和 Audio 元素一致

实际用起来，多数场景用预加载的 Audio 元素就够了，重点就是那个「用户第一次点一下」的动作不能省——没这一步，后面全是静音。