网页无法自动读取手机本地音乐文件，只能通过用户手动点击选择音频文件，再用filereader或url.createobjecturl()处理；cordova等方案依赖原生容器，不属于纯网页方案。
Web 页面无法直接读取手机本地音乐文件
浏览器出于安全限制，File API 和 <input type="file"> 只能由用户主动触发（比如点击选择），且仅能访问用户显式选中的文件，不能遍历或扫描手机的音乐目录（如 /sdcard/Music/ 或 iOS 的媒体库）。所谓“网页自动获取本地音频”在标准 Web 环境下根本做不到。
<input type="file" accept="audio/*"> 是唯一合规入口
这是目前唯一被所有现代移动浏览器支持的方式，用户必须手动点选——哪怕是在微信、QQ 内置浏览器里，也得弹出系统文件选择器或相册音频列表。
- 必须带
accept="audio/*"，否则 Android 可能只显示图片/文档；iOS Safari 对此更敏感，不加可能压根不显示音频文件 - 不要依赖
webkitdirectory：它在移动端基本无效，Android Chrome 和 iOS Safari 均不支持目录选择 - 选中后用
FileReader读取二进制流，或直接传给URL.createObjectURL()创建可播放的临时 URL
const input = document.querySelector('input[type="file"]');<br>input.addEventListener('change', e => {<br> const file = e.target.files[0];<br> if (file && file.type.startsWith('audio/')) {<br> const url = URL.createObjectURL(file);<br> const audio = new Audio(url);<br> audio.play();<br> }<br>});
为什么 Cordova / Capacitor / Tauri 不算“纯网页方案”
这些框架能访问原生音频库，是因为它们在 WebView 外包了一层原生容器，并通过插件桥接调用 MediaPicker（iOS）或 MediaStore（Android）。但一旦脱离该容器，代码就失效——你写的 JS 本身没变，只是运行环境变了。
- Capacitor 的
@capacitor/media插件需要安装原生依赖，iOS 还要额外配置NSAppleMusicUsageDescription - Cordova 的
cordova-plugin-media-capture在 Android 10+ 上因存储权限变更常报Permission denied - 这些方案生成的不是“网页”，而是“类 App”，发布渠道、签名、审核规则全不一样
常见错误现象和对应检查点
遇到“选不了”“读不出”“放不了”，先盯住这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 页面未托管在 HTTPS 下：iOS Safari 和新版 Android Chrome 会直接禁用
getUserMedia和部分File API功能，连<input type="file">都可能静默失败 - 音频格式不兼容：Android 很多低端机不支持
.flac，iOS Safari 不支持.ogg；优先用.mp3或.m4a - 自动播放被拦截：移动端浏览器普遍禁止非用户手势触发的
audio.play()，必须包裹在click或touchend回调里 - 内存泄漏风险：每次用
URL.createObjectURL()后，记得在音频结束或销毁时调用URL.revokeObjectURL()
