html表单控件（如input[type=file]）仅负责选择和提交音视频文件，不支持预览或播放；真正播放需用audio/video标签，二者语义不同、职责分离。
表单控件本身不支持音视频文件上传以外的交互
HTML 表单控件（如 <input type="file">）只负责“选择并提交”音视频文件，它不会解析、预览、播放或控制媒体内容。你不能用 <input type="submit"> 播放 MP3，也不能靠 <select></select> 切换视频源——这些是常见误解。
真正能播放音视频的是 <audio></audio> 和 <video></video> 标签，它们和表单控件属于不同语义层：一个管“选文件”，一个管“播文件”。两者可协作，但不能混用。
<input type="file"> 上传音视频时的格式与限制
浏览器对 <input type="file"> 的音视频支持取决于 accept 属性和实际 MIME 类型匹配，不是文件后缀名：
-
accept="audio/*"匹配所有浏览器识别为音频的类型（如audio/mpeg、audio/ogg），但不保证 MP3 一定能播——只是允许选中 -
accept="video/mp4"可过滤出 MP4 文件，但若服务器返回的 Content-Type 是video/x-matroska（即 MKV），即使后缀是 .mp4，也可能被拒绝 - 移动端 Safari 对
accept支持较弱，有时会忽略，直接打开全部媒体文件选择器 - 用户选中后，需用 JavaScript 读取
FileList并创建URL.createObjectURL(file)才能传给<audio></audio>或<video></video>播放
表单提交时音视频文件如何处理
表单提交（<form method="post"></form>）本身不处理音视频内容，只把二进制数据按 multipart/form-data 编码发给后端：
- 前端无法在 submit 前校验音频时长、码率或是否损坏；这些必须由后端完成
- 若想在提交前预览，必须手动绑定
change事件，用FileReader或URL.createObjectURL()加载到<audio></audio>中，再调用.play() - 注意：调用
.play()时若无用户手势（如 click），会触发NotAllowedError，尤其在 Chrome/Safari 中——哪怕文件已加载成功 - 不要在
submit事件里直接play()，因为表单可能立即跳转或刷新，导致播放中断
为什么不能把 <audio></audio> 当作表单控件提交值
<audio></audio> 不是表单控件，没有 name 属性，也不会随表单提交发送任何值。它的作用仅限于渲染和播放：
- 试图给
<audio src="a.mp3"></audio>加name="bgm"是无效的，服务器收不到这个字段 - 若需“记住用户选的背景音乐”，得用 JS 把文件名、URL 或 base64 存入隐藏域：
<input type="hidden" name="selected_audio" value="a.mp3"> - 更稳妥的做法是上传后由后端返回唯一 ID（如
audio_abc123），再把这个 ID 存进隐藏域——避免路径暴露或重名冲突 - 用
<audio></audio>的ended、timeupdate等事件做业务逻辑没问题，但它永远不参与表单数据流
最容易被忽略的一点：表单里的音视频交互，90% 的问题其实不出在 HTML 写法，而出在「没区分清楚哪个环节该由谁负责」——文件选择归 input[type=file]，播放归 audio/video，状态同步归 JS，校验归后端。混用或越界，就会出现“点了没反应”“上传了却播不了”“本地能跑线上报错”这类现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
