html5可通过blob对象实现本地音频文件的浏览器端预览播放，核心是用filereader读取文件生成blob url并赋给audio元素src属性，需校验类型、监听加载事件、及时释放url避免内存泄漏。
HTML5 音频可以通过 Blob 对象实现本地音频文件的预览播放，无需上传服务器，完全在浏览器端完成。核心是利用 FileReader 读取用户选择的音频文件，生成 Blob URL，再将其赋给 <audio></audio> 元素的 src 属性。
获取并读取本地音频文件
通过 <input type="file"> 获取用户选择的音频文件（如 MP3、WAV、OGG 等），确保设置 accept 属性限制类型，提升体验：
- 使用
accept="audio/*"可匹配常见音频格式 - 监听
change事件，在回调中获取files[0] - 检查
files.length > 0和files[0].type.startsWith('audio/')做基础校验
创建 Blob URL 并绑定到 audio 元素
用 URL.createObjectURL(file) 直接生成可播放的临时 URL，比 FileReader.readAsDataURL 更高效（避免 Base64 编码开销）：
- 该 URL 是浏览器内存中的引用，生命周期与当前文档绑定
- 将它赋给
audio.src后调用audio.load()（可选，多数情况自动触发） - 播放前建议监听
canplay或loadedmetadata事件，确保元数据就绪
注意释放资源避免内存泄漏
每次预览新文件前，应主动释放旧的 Blob URL；页面卸载或组件销毁时也需清理：
- 保存上一个
objectURL，在加载新文件前调用URL.revokeObjectURL(oldUrl) - 在
audio元素移除或组件 unmount 时执行清理 - 不清理会导致浏览器持续占用内存，尤其反复预览大文件时明显
兼容性与简单示例代码
现代浏览器（Chrome 8+、Firefox 4+、Edge 12+、Safari 6.1+）均支持 URL.createObjectURL 和 <audio></audio> 的本地 Blob 播放。一个最小可用示例：
<input type="file" id="audioFile" accept="audio/*"><audio id="player" controls></audio><script>
const input = document.getElementById('audioFile');
const audio = document.getElementById('player');
let currentUrl = null;
input.addEventListener('change', (e) => {
if (currentUrl) URL.revokeObjectURL(currentUrl);
const file = e.target.files[0];
if (!file || !file.type.startsWith('audio/')) return;
currentUrl = URL.createObjectURL(file);
audio.src = currentUrl;
});
</script>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
