audio.readyState≥3是可交互播放的可靠基准，其0-4五级状态分别对应无数据、仅元数据、当前帧就绪、含下一帧、全程不缓冲；应监听readystatechange事件并结合networkState、canplay等综合判断。
元素的 readyState 属性是判断它是否“准备好播放”的关键依据，但它不是个开关式布尔值，而是一个反映资源加载进度和数据可用程度的数字状态。直接检查 audio.readyState >= 3 或 >= 4 才算真正可靠，仅看 != 0 容易误判。
readyState 的五个取值含义（标准定义）
0 → HAVE_NOTHING
音频尚未初始化，连元数据（如时长）都没获取到。常见于src为空、路径错误、跨域未配置或网络完全不可用。1 → HAVE_METADATA
已成功加载元数据（duration、尺寸、编码信息等），但没加载任何音频帧。此时可安全读取duration，但调用play()很可能卡住或报错。2 → HAVE_CURRENT_DATA
当前播放位置的数据已就绪（比如第一帧音频可解码），但后续数据不一定有。能显示初始画面（对 video）或发出极短声音（对 audio），但继续播放大概率触发缓冲。3 → HAVE_FUTURE_DATA
当前帧 + 至少下一帧的数据已加载并可解码。这是启用播放按钮、允许用户点击触发play()的最低安全阈值。多数场景下，此时调用play()成功率高。4 → HAVE_ENOUGH_DATA
浏览器认为已有足够数据，可全程播放不中断（无需后续缓冲）。适合自动播放逻辑、进度条预渲染、或需要“即点即播”体验的场景。
✅ 实际开发中，推荐以
readyState >= 3作为“可交互播放”的判断基准；若需更高确定性（如避免移动端偶发卡顿），则等待>= 4。
如何监听和使用 readyState
readyState 会随加载过程动态变化，不能只查一次。应监听 readystatechange 事件：
const audio = document.querySelector('audio');
audio.addEventListener('readystatechange', () => {
console.log('当前 readyState:', audio.readyState);
if (audio.readyState >= 3) {
// 可以启用播放按钮、显示封面、允许用户点击播放
document.getElementById('playBtn').disabled = false;
}
if (audio.readyState >= 4) {
// 可视为“已充分加载”，适合自动播放（仍需用户手势触发）
console.log('音频已足够播放全程');
}
});
⚠️ 注意：
-
readystatechange可能触发多次（尤其在弱网或重定向时）； - 不要在该回调里反复调用
play()，容易被浏览器静音策略拦截； - 它不保证网络通畅，还需配合
networkState验证：if (audio.readyState >= 3 && audio.networkState === audio.NETWORK_LOADED) { // 更稳妥的“可播”条件 }
结合其他信号提高判断准确率
单靠 readyState 仍有盲区。建议组合以下属性/事件：
-
监听
canplay或canplaythrough事件-
oncanplay：等价于readyState >= 3，语义更清晰； -
oncanplaythrough：等价于readyState >= 4，表示“预计不缓冲就能播完”。
-
检查
error属性
加载失败时audio.error会返回MediaError对象，code为 1–4（如MEDIA_ERR_SRC_NOT_SUPPORTED），此时readyState可能卡在 0 或 1，需主动捕获。验证
src是否有效
在 Elements 面板中点击src链接，确认返回 200 且Content-Type是audio/mpeg、audio/mp4等合法类型；404 或 MIME 错误会直接导致readyState无法提升。注意 preload 设置影响
若设preload="none"，readyState默认长期为 0，直到手动调用load()或play()；设preload="metadata"则通常可达 1；设preload="auto"才有机会升到 3 或 4。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
