拖拽音频播放需监听dragenter、dragover、drop事件，dragover中preventDefault()允许投放；用URL.createObjectURL()转File为临时URL并及时revoke；drop后设audio.src并监听loadedmetadata再play，失败则启用controls手动播放。
拖拽区域怎么监听文件进入和释放
关键不是靠 click 或 input，而是用原生的 dragenter、dragover、drop 事件。浏览器默认会阻止 drop 行为，所以必须在 dragover 里调用 event.preventDefault()，否则文件根本进不来。
常见错误是只监听了 drop 却没处理 dragover，结果拖进去直接跳转到新页面（浏览器默认打开音频文件）。
- 给目标容器绑定
dragenter和dragover，加类名提示“可投放”状态 -
drop事件里取event.dataTransfer.files，只取第一个且过滤非音频类型：file.type.startsWith('audio/') - 别忘了
event.preventDefault()和event.stopPropagation()防止冒泡干扰
怎么把拖进来的文件变成可播放的 URL
不能直接把 File 对象塞给 <audio src="..."></audio>，得用 URL.createObjectURL() 创建临时内存 URL。这个 URL 只在当前页面生命周期有效，关掉标签页就失效，也不占磁盘空间。
注意：每次拖新文件都要先 URL.revokeObjectURL() 旧的，否则内存泄漏——尤其用户反复拖拽时，容易卡顿甚至崩溃。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 保存上一个
objectUrl的引用，drop时先revoke再创建新的 - 检查
file是否存在且file.size > 0，空文件或损坏文件会导致createObjectURL返回空字符串 - 不建议用
FileReader.readAsArrayBuffer()再转 base64：大文件会卡死主线程，且 base64 URL 体积膨胀约 33%
audio 元素怎么适配拖入的音频并自动播放
<audio></audio> 默认不自动播放，移动端尤其严格（需用户手势触发）。但拖拽本身算用户手势，所以可以在 drop 后立刻调用 audio.play()，多数桌面浏览器能成功。
失败时会抛 DOMException: play() failed because the user didn't interact with the document first，说明环境限制了自动播放。这时候不要静默吞掉错误，至少把 audio.load() 和 audio.controls = true 设好，让用户点一下再播。
- 设置
audio.src = objectUrl后，监听loadedmetadata事件再调play()，避免还没加载完就播失败 - 加上
preload="metadata"，减少等待时间 - 用
audio.addEventListener('error', ...)捕获解码失败（比如用户拖了个 .txt 当音频）
为什么拖进来没反应？几个高频排查点
不是代码写错，往往是权限或路径细节被忽略：
- 本地双击打开 HTML 文件（
file://协议）时，Chrome 禁用dataTransfer.files—— 必须起个本地服务（如python3 -m http.server） - Mac 上从 Finder 拖 .m4a 文件，有时
file.type是空字符串，得 fallback 到file.name.endsWith('.m4a') - 拖整个文件夹进来？
dataTransfer.files不包含子文件，得用webkitGetAsEntry()+readEntries()（仅 Chromium），但兼容性差，建议直接提示“请拖单个音频文件” -
audio元素没加id或没正确获取 DOM 引用，play()调用对象是undefined
拖拽播放本质是三步闭环：监听 → 转 URL → 绑定播放。中间任何一环断开，都会静默失败。最稳的做法是每步都加 console.log 或小提示文案，而不是等用户问“为什么不动”。
