play函数无法直接加载本地文件路径（如c:music est.mp3），因现代浏览器出于安全限制禁止网页脚本访问本地文件系统，必须通过http(s)协议运行本地服务器，并用相对路径引用音频资源，且需用户手势触发播放。
play 函数本身不直接支持加载本地文件路径，必须通过浏览器安全机制允许的方式加载音频资源。
为什么直接传本地路径（如 C:music est.mp3）会失败
现代浏览器禁止网页脚本直接读取本地文件系统路径，这是出于安全限制。即使你用 new Audio('C:\music\test.mp3') 或调用 play()，控制台也会报错：DOMException: The request is not allowed by the user agent or the platform in the current context. 或直接静音不播。
- 本地双击 HTML 文件（
file://协议）下，大多数浏览器（Chrome/Firefox）默认禁用Audio的自动播放和跨源请求 - 必须使用
http://或https://协议（即启动本地服务器）才能绕过此限制 -
play()是HTMLMediaElement实例的方法，它只负责播放，不负责“加载”——加载靠src属性或setSrc()（已废弃）
正确加载并播放本地音频的三步实操
核心思路：把音频文件放进项目目录，用相对路径引用，并确保运行在本地服务环境下。
- 把音频文件（如
bgm.mp3）放在与 HTML 同级或子目录（例如./audio/bgm.mp3） - 创建
Audio实例并设置src：const audio = new Audio('./audio/bgm.mp3'); - 调用
play()，但注意：必须由用户手势（如 click）触发，否则 Chrome 会拒绝播放（play() returned Promise but was rejected with "NotAllowedError"）
button.addEventListener('click', () => {
const audio = new Audio('./audio/bgm.mp3');
audio.play().catch(e => console.error('播放失败:', e));
});
常见兼容性与静音问题处理
移动端、Safari 和新版 Chrome 对自动播放限制更严格，即使有用户交互，也可能因未设置 muted 或未初始化音轨而失败。
- 首次播放前可先调用
audio.load()显式加载元数据（避免play()报NotSupportedError） - 若需静音后解除（如游戏音效），先设
audio.muted = true，再play()，成功后再设muted = false - Safari 要求音频至少触发一次
play()才能后续自由调用；可加一次空播放：audio.volume = 0; audio.play(); - 检查
audio.readyState是否为4（HAVE_ENOUGH_DATA），否则play()可能被忽略
替代方案：用 fetch + Blob 绕过路径限制（适合动态选文件）
如果用户通过 <input type="file"> 选择本地音频，可读取为 Blob 并创建对象 URL：
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file && file.type.startsWith('audio/')) {
const url = URL.createObjectURL(file);
const audio = new Audio(url);
audio.play();
// 注意：播放完记得释放内存
audio.onended = () => URL.revokeObjectURL(url);
}
});
这种方式完全避开路径安全限制，但仅适用于用户主动选择的文件，不能预加载任意本地路径。
真正卡住的地方往往不是 play() 写得对不对，而是没意识到浏览器根本不会让你碰 C: 这种路径——所有“本地播放”都得走服务化或用户授权流程。
