浏览器不支持通过绝对路径加载本地音频文件，必须将文件置于web服务器可访问目录并用相对路径引用，且需通过http(s)协议打开页面。
HTML中用<audio></audio>标签插入本地录音文件，但浏览器不支持直接读取本地路径
浏览器出于安全限制，无法通过src="C:/Users/xxx/recording.mp3"这类绝对路径加载本地音频。你看到的“空白播放器”或“加载失败”，大概率是这个原因。必须把录音文件放到 Web 服务器可访问的目录下，再用相对路径引用。
实操建议：
- 把录音文件（如
recording.wav）放进项目根目录或assets/audio/子目录 - 在 HTML 中写：
<audio controls><source src="assets/audio/recording.wav" type="audio/wav"></source></audio>
- 确保网页通过
http://或https://打开（不能双击打开file://协议的 HTML） - 常见错误：用中文文件名或空格命名 → 改为
recording_01.wav更稳妥
用<input type="file">实现用户上传录音并即时播放
这是真正“自制声音上传添加”的核心路径：让用户选本地录音文件，JS 读取并绑定到<audio></audio>元素。不需要后端也能预览。
关键点：
- HTML 需含：
<input type="file" accept="audio/*" id="audio-upload">——accept="audio/*"过滤非音频文件 - JS 中监听
change事件，用FileReader.readAsDataURL()转为 base64 URL - 把生成的 URL 赋给
audio.src，再调用audio.load()刷新元数据 - 注意：大文件（>50MB）可能卡顿，WAV 比 MP3 更占体积，优先导出为
audio/mpeg（MP3）格式
录音文件格式兼容性差？优先用 MP3 或 OGG，避免 WAV 直接上线
不是所有浏览器都原生支持audio/wav。Chrome 和 Edge 可以，但 Safari 对 WAV 支持不稳定，iOS 微信内嵌浏览器常静音或报错DOMException: The element has no supported sources。
推荐方案：
- 录音时就导出为 MP3（用 Audacity、Adobe Audition 或手机录音 App 的“导出为 MP3”选项）
- 若只有 WAV，可用 FFmpeg 快速转码：
ffmpeg -i input.wav -c:a libmp3lame -q:a 4 output.mp3 - 为最大兼容，可同时提供 MP3 和 OGG：
<audio controls><source src="rec.mp3" type="audio/mpeg"><source src="rec.ogg" type="audio/ogg"></source></source></audio>
上传后想持久化？需后端接收FormData，前端别存 base64 到 HTML
用FileReader生成的 base64 字符串只是临时预览手段。如果页面刷新，音频就丢了。要真正“添加”进系统，必须把文件上传到服务器。
关键步骤：
- 前端用
new FormData()包裹input.files[0]，发送 POST 请求 - 后端（如 Node.js + Express）需配置
multer中间件接收multipart/form-data - 上传成功后，后端返回可访问的 URL（如
/uploads/rec_20240520.mp3），前端再把这个 URL 写入audio.src - 切勿把几 MB 的 base64 字符串硬编码进 HTML —— 页面体积暴涨，且无法被 CDN 缓存
type="audio/mpeg"，Safari 就可能不识别；本地双击 HTML 文件永远跨不过file://这道坎。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
