用network面板确认音频是否真加载：先看是否有请求，再检查响应头content-type是否与的type完全一致，且需支持range请求（accept-ranges: bytes、206响应），并确保跨域头和fallback顺序正确。
怎么用 Network 面板确认音频是否真加载了
浏览器不报错，不代表音频真加载成功。很多“没声音”问题其实卡在第一步：请求发出去了，但服务端返回了错误的 Content-Type 或 404。打开 DevTools → Network → 切到 Media 或 All 标签，播放时看有没有对应音频请求；点进去检查响应头：Content-Type 必须和 <source></source> 的 type 完全一致，比如 type="audio/ogg; codecs=opus" 就要求响应头是 Content-Type: audio/ogg（不能是 application/octet-stream）。
常见漏查点：
- 本地双击 HTML 文件走
file://协议 → Chrome 直接禁用play()，且不发跨域请求，Network 里根本看不到音频请求 - 路径写成
src="audio/a.mp3"但实际文件在./a.mp3→ 404 不报错，只静默跳过该<source></source> - Nginx/Apache 没配
add_type audio/mpeg .mp3;→ 返回text/plain，Safari 当文本处理，不触发解码
为什么 iOS Safari 上 currentTime 设置无效、拖动条灰显
本质是服务端没支持 Range 请求。Safari/iOS 要求音频必须能分片加载，否则拒绝暴露时长、禁止拖动、currentTime 设了也无效，duration 为 NaN。
验证方式：在 Network 面板点开音频请求 → 查看响应头是否有 Accept-Ranges: bytes；再手动发一个带 Range: bytes=0-1023 的 curl 请求，看是否返回 206 Partial Content 和正确字节范围。
修复要点：
- Nginx 必须加
add_header Accept-Ranges bytes;并确保静态文件服务未被 proxy_pass 覆盖 Range 行为 - Apache 要启用
mod_headers和mod_mime，并确认EnableSendfile off（某些版本下 sendfile 会干扰 Range） - 跨域音频还必须带
Access-Control-Allow-Origin: *，缺了 Safari 直接拒绝解码，连错误都不抛
多格式 fallback 顺序写错，等于白写
浏览器按 DOM 顺序调用 canPlayType()，一旦返回 "probably" 或 "maybe" 就立刻加载，不再往后看。顺序错了，兼容性方案就失效。
推荐写法（按实际支持率从高到低）：
-
<source src="a.opus" type="audio/ogg; codecs=opus"></source>→ Firefox/Chrome 新版首选，体积小、音质好 -
<source src="a.m4a" type="audio/mp4; codecs=aac"></source>→ Safari/macOS 原生高效，比 MP3 更省带宽 -
<source src="a.mp3" type="audio/mpeg"></source>→ 兜底，iOS 17.5 仍认这个，但别放第一位
注意：
- 别写
type="audio/ogg"（无 codecs）→ Safari 17.5 直接跳过，哪怕文件是 .opus - 别把
.wav放前面 → 16-bit PCM 体积大，Firefox 虽能播，但用户得等完整下载才出声 - 删掉所有没写
type的<source></source>→ 它可能绕过 MIME 检查试播，结果报MEDIA_ERR_DECODE却找不到原因
自动播放失败，90% 是没过用户手势关
iOS Safari 和 Android Chrome 都强制要求 play() 必须由用户手势（click、touchstart）同步触发。在 load、canplay 或定时器里调用，一律失败。
可靠写法：
- 按钮绑定
click：btn.addEventListener('click', () => audio.play().catch(e => console.log(e))) - iOS 17+ 要求
touchstart不能设{ passive: true }，否则事件不触发 - 静音自动播要同时满足三个条件：
muted属性存在（不是muted="false"）、volume = 0、且后续没 JS 改写volume
容易忽略的一点：即使加了 autoplay muted，如果页面还没完成首屏渲染（比如 JS 阻塞），iOS 也可能判定“非即时响应”，直接拒绝。所以按钮交互仍是唯一稳态路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
