不行，HTML标签直接autoplay播语音验证码无效；必须用户点击触发fetch获取动态音频blob，再用URL.createObjectURL()赋值audio.src并await play()，且后端需返回带时效token的一次性语音资源。
HTML里直接用
不行。浏览器默认禁止自动播放带声音的媒体，尤其在用户没和页面交互过时，autoplay 会被静音或直接阻断——你看到音频元素加载了，但点不了、播不出、甚至 play() 调用直接抛 NotAllowedError。
真正能稳定触发播放的唯一时机，是用户明确操作后（比如点击「听语音」按钮）。所以语音验证码不能靠自动播放，必须绑定用户手势。
- 别写
<audio autoplay src="code.mp3">，它在绝大多数现代浏览器里无效 - 语音文件必须由后端动态生成并返回唯一 URL（含时效 token），不能复用固定链接
- 前端每次点击「听语音」都要重新请求新音频，避免缓存或重放旧验证码
怎么用JavaScript控制语音验证码播放
核心是：用按钮触发 fetch 拿音频 blob，再用 URL.createObjectURL() 创建临时地址给 <audio>，最后调 play()。
<button id="speak-btn">听语音</button>
<audio id="verify-audio" controls style="display:none"></audio>
<script>
document.getElementById('speak-btn').onclick = async () => {
try {
const res = await fetch('/api/voice-captcha?ts=' + Date.now());
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const audio = document.getElementById('verify-audio');
audio.src = url;
await audio.play(); // 这里才真正触发播放
} catch (e) {
console.error('语音加载失败:', e.message);
}
};
</script>
注意：audio.play() 返回 Promise，必须 await 或接 .catch()，否则错误会静默丢弃；iOS Safari 对 blob URL 播放更敏感，建议加 audio.load() 再 play。
立即学习“前端免费学习笔记（深入）”；
后端返回语音文件要注意什么
语音验证码不是普通音频资源，它本质是一次性凭证，后端必须做三件事：
- 生成语音时，把当前验证码文本转成语音（推荐用
gTTS、pyttsx3或云服务如阿里云语音合成） - 响应头设为
Content-Type: audio/mpeg（MP3）或audio/wav，且加Cache-Control: no-cache, no-store - 接口必须校验 session 或 token，防止被刷；同一验证码最多允许 2–3 次获取，超限即失效
常见翻车点：后端返回 200 但 body 是 JSON 错误（比如 {"code":401}），前端没判断 res.ok 就直接 blob()，结果报 Unexpected end of input。
用户点了没声音？先查这三处
语音验证码最常被投诉“点了没反应”，90% 都卡在这几个地方：
- 浏览器未获得焦点：Electron 或某些 WebView 中，
document.hasFocus()为 false 会导致play()失败 - 音频源跨域但没配
CORS：后端响应头漏了Access-Control-Allow-Origin: *，fetch 直接被拦 - 用户设备已全局禁音：检查系统音量、浏览器是否标记该站点为“静音”，Safari 还要确认「设置 > Safari > 自动播放」是否允许
真要兼容极旧环境（比如 IE11），得降级用 <embed> + Flash，但现在基本没人这么干了——重点盯住 Chrome/Firefox/Safari/iOS 的手势播放限制就行。
