可用Promisefy音频的canplaythrough事件实现await等待，确保音频可完整播放；也可用loadedmetadata快速获取元数据；需处理error、清理监听器，并在用户交互后调用play()以符合自动播放策略。
可以用 Promisefy 音频的 oncanplaythrough（或 onloadedmetadata）事件，让音频加载就绪变成可 await 的 Promise。
监听 canplaythrough 保证可完整播放
这是最常用的时机：浏览器已下载足够数据，能不中断地播放整个音频。适合对播放可靠性要求较高的场景（比如语音播报、音乐播放器）。
- 创建
Audio实例后，立即监听canplaythrough - 在事件触发时 resolve Promise；若出错（如 404、解码失败），监听
error并 reject - 记得移除监听器，避免重复触发或内存泄漏
function audioReady(src) {
return new Promise((resolve, reject) => {
const audio = new Audio(src);
const cleanup = () => {
audio.removeEventListener('canplaythrough', onCanPlay);
audio.removeEventListener('error', onError);
};
const onCanPlay = () => {
cleanup();
resolve(audio);
};
const onError = () => {
cleanup();
reject(new Error(`Failed to load audio: ${src}`));
};
audio.addEventListener('canplaythrough', onCanPlay);
audio.addEventListener('error', onError);
});
}
// 使用
async function playSound() {
try {
const audio = await audioReady('/sound.mp3');
audio.play();
} catch (err) {
console.error(err);
}
}
用 loadedmetadata 获取元数据更快响应
如果只需知道音频时长、采样率等基本信息（比如做进度条），可用 loadedmetadata，它比 canplaythrough 触发更早。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 适用于 UI 初始化阶段，不需要等全部缓冲完成
- 注意：此时不一定能立即播放，调用
play()可能仍返回 pending Promise - 同样需处理 error 和清理监听器
兼容性与自动播放策略注意事项
现代浏览器（尤其移动端）要求用户手势后才能播放音频，即使 Promise 已 resolve，直接 audio.play() 仍可能被拒绝。
立即学习“Java免费学习笔记（深入）”；
- 务必用
try/catch捕获play()的 Promise rejection - 常见错误："
DOMException: play() failed because the user didn't interact with the document first" - 建议在按钮点击等用户操作中触发播放流程，而非 onload 后自动执行
