HTML5音频无法播放怎么办_常见音频故障排查指南【解答】

audio标签没反应？先看浏览器是否真支持你的格式

不是所有.mp3、.ogg、.wav都能播——浏览器只认特定编码组合，比如 safari 能播 .mp3，但对某些用 AAC-LC 以外编码的 MP3 文件会静默失败；firefox 不支持 .mp3 的旧版解码器，却能稳定播 .ogg；chrome 对 .wav 支持有限，尤其带 IEEE Float 编码的。

• 用 ffprobe your-audio.mp3 查真实编码（别信文件后缀），重点看 Stream #0:0: Audio: mp3 (mp3), 44100 Hz, stereo, fltp, 128 kb/s 中的 fltp（浮点）就容易被 Safari 拒绝
• 最稳的兼容组合是：一个 <audio></audio> 标签里塞 <source src="a.mp3" type="audio/mpeg"></source> + <source src="a.ogg" type="audio/ogg"></source>
• 别省事只写一个 src——没有 fallback，不支持就彻底黑屏，连错误提示都没有

控制台报“MediaError {code: 4}”？那是格式不被支持的明确信号

code: 4 就是 MEDIA_ERR_SRC_NOT_SUPPORTED，不是路径错、不是网络挂，是浏览器打开文件后当场判了死刑。它常被误认为“加载失败”，其实加载成功了，只是解不了码。

• 检查 Network 面板里音频请求的 Content-Type 响应头：要是 text/plain 或空着，服务器根本没配 MIME 类型，浏览器不敢动它
• apache 用户加一行：AddType audio/mpeg .mp3；nginx 用户在 types 块里补 audio/mpeg mp3;
• 本地双击 html 测试？Chrome 会直接封禁 file:// 下的音频加载，换 Firefox 或起个 python3 -m http.server 8000 再试

点了播放按钮还是没声音？大概率是自动播放策略在拦你

现代浏览器（包括微信内置浏览器）默认禁止无用户手势的 play() 调用，哪怕写了 autoplay 和 muted，也得等第一次 click、touchstart 或 keydown 才放行。

• 别在 window.onload 里直接 audio.play()——99% 失败，promise 会被 reject，控制台显示 “The play() request was interrupted”
• 可靠写法：绑定一次用户交互，比如 document.body.addEventListener('click', () => audio.play().catch(e => {}), { once: true });
• 微信 ios 端更绝：必须等 WeixinjsBridgeReady 事件，否则 play() 直接静音返回，连 Promise 都不给你

CORS 报错“Blocked by CORS policy”？跨域音频不是加个 header 就完事

音频跨域比图片严格得多——即使服务器返回了 access-Control-Allow-Origin: *，若音频文件本身没带 crossorigin 属性，浏览器照样当普通资源处理，拒绝解码。

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

• HTML 侧必须写：<audio crossorigin="anonymous" src="https://cdn.example.com/song.mp3"></audio>
• 服务端除了 Access-Control-Allow-Origin，还得确保 Access-Control-Allow-Headers 允许 Range（音频流式加载依赖它）
• CDN 或对象存储（如 OSS、S3）常默认关闭 CORS，得手动配置规则，不能只改源站

最容易被跳过的其实是 MIME 类型和 crossorigin 属性——它们不报红错，只让音频“假装加载成功”，然后彻底沉默。真出问题时，先开 Network 面板盯住响应头，比反复改 JS 有用得多。