HTML5需通过JavaScript桥接实现上传即试听：绑定file输入change事件→用File API获取文件→URL.createObjectURL生成临时URL→赋值给audio标签src并播放，注意内存释放与自动播放限制。
HTML5 本身不支持“上传即试听”——<input type="file"> 负责选择文件，<audio> 负责播放，两者需通过 JavaScript 桥接才能实现本地音频的即时预览。关键在于利用 File API 读取用户选中的音频文件，并用 URL.createObjectURL() 创建临时可播放的 URL。
核心步骤：绑定文件选择 + 创建临时播放地址
用户点击文件输入框选中音频后，不上传到服务器，而是直接在浏览器内解析并播放：
- 给
<input type="file" accept="audio/*">绑定change事件 - 从
event.target.files[0]获取 File 对象 - 调用
URL.createObjectURL(file)生成一个仅当前会话有效的 blob URL - 将该 URL 赋值给
<audio>的src属性，再调用.load()或直接.play()
完整示例代码（含错误处理）
以下代码可直接运行，支持 MP3、OGG、WAV 等常见格式：
<audio id="previewPlayer" controls></audio>
<script>
const fileInput = document.getElementById('audioFile');
const audioPlayer = document.getElementById('previewPlayer');
fileInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
// 检查是否为音频文件
if (!file.type.startsWith('audio/')) {
alert('请选择有效的音频文件');
return;
}
// 创建临时 URL 并播放
const url = URL.createObjectURL(file);
audioPlayer.src = url;
audioPlayer.load(); // 确保元数据加载完成
// 可选：播放完成后自动释放内存（推荐）
audioPlayer.addEventListener('ended', () => {
URL.revokeObjectURL(url);
}, { once: true });
});
</script>
注意事项与兼容性要点
- 无需服务器参与：整个过程纯前端，文件不离开用户设备
- 支持所有现代浏览器（Chrome ≥ 8、Firefox ≥ 4、Safari ≥ 6、Edge ≥ 12）
-
不能自动播放有声内容：多数浏览器禁止静音外的自动播放；如需自动试听，必须先触发用户手势（例如点击按钮），或加
muted属性再设autoplay -
记得释放内存：每次调用
createObjectURL都会占用内存，应在不再需要时调用URL.revokeObjectURL()，尤其在频繁更换试听文件时 -
移动端同样有效：iOS Safari 和 Android Chrome 均支持，但部分安卓 WebView 可能限制
accept="audio/*"的识别精度
进阶提示：添加格式校验与加载反馈
可在 change 回调中增加：
立即学习“前端免费学习笔记（深入）”；
- 用
file.size限制最大文件体积（如 < 50MB） - 监听
audioPlayer.addEventListener('canplay', ...)显示“已就绪”状态 - 监听
error事件捕获解码失败（如损坏文件、不支持编码） - 结合
FileReader读取 ID3 标签（需额外库）提取标题/艺术家信息
