用实现角落悬浮组件需绕开浏览器策略：本地须用HTTP服务避免file://拦截，src用相对路径，服务器配对MIME类型，播放必须由用户click触发且加catch捕获错误，CSS用position:fixed+z-index并防祖先transform截断。
直接用 <audio></audio> 标签加 position: fixed 就能做出角落悬浮小组件，但多数人卡在播放失败、移动端不响、样式错位这三处——不是代码写得不对，是没绕开浏览器策略和路径陷阱。
audio 标签怎么写才不会 404 或静音？
核心是路径 + MIME + 协议三者对齐。本地双击 HTML 文件时，file:// 协议下 Chrome 会拦截音频加载；必须起本地服务（如 Python 的 python -m http.server）或部署到 HTTP(S) 环境。
-
src路径建议用相对路径，且以 HTML 文件为基准：比如音频在/assets/music.mp3，而 HTML 在根目录，则写src="assets/music.mp3" - 服务器要返回正确的 MIME 类型：
.mp3对应audio/mpeg，Nginx 需加types { audio/mpeg mp3; }，Apache 加AddType audio/mpeg .mp3 - 避免
autoplay属性：iOS Safari 和 Android Chrome 默认禁用，且首次播放必须由用户 click 触发，否则报NotAllowedError
如何让播放器真正“悬浮”在右下角？
靠 CSS 的 position: fixed，但容易被父容器 overflow: hidden 截断，或被 z-index 层级压住。
- 基础定位代码：
.player { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } - 务必检查是否有祖先元素设置了
transform、filter或will-change——这些会创建新的 stacking context，导致z-index失效 - 移动端需加
min-width: 280px防止按钮过小，同时用@media (max-width: 480px)把bottom改成10px避免遮挡虚拟导航栏
为什么 JS 控制播放总报错 “play() failed”？
不是代码错了，是调用时机违规。现代浏览器强制要求：自动播放仅允许静音或由用户手势触发。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 点击按钮才调用
audio.play()，且不能包裹在异步回调（如setTimeout）里 - 务必加
.catch()捕获拒绝：audio.play().catch(e => console.warn('Playback blocked:', e.name)) - 首次播放前，可先设
audio.muted = true再play()，成功后再恢复muted = false（部分安卓机有效） - 别依赖
loadeddata事件来启用按钮——它可能不触发；改用canplaythrough，表示足够缓冲可完整播放
要不要用第三方库或网易云嵌入？
要看你控不控制音频源。如果只是播自己上传的 MP3/WAV，纯原生 <audio></audio> + 几十行 JS 最稳；一旦想调用网易云、QQ 音乐 API，就得走他们的 SDK 或 iframe 嵌入，但会引入跨域、审核、版权风险。
- 第三方脚本如
https://myhkw.cn/player/js/player.js是黑盒，更新不可控，key 参数可能过期，且依赖 jQuery - iframe 嵌入（如网易云外链）虽快，但无法自定义 UI、无法监听播放进度、移动端常被截断
- 真要轻量可控，就别绕路：一个
<audio></audio>、两个按钮、一段 30 行 JS，加上fixed定位，就是最抗打的悬浮小组件
最容易被忽略的是移动端首次交互必须是用户主动 click/tap——哪怕你把播放按钮做成 label 包 input[type="checkbox"]，只要没真实触发，play() 就一定被拒。这个限制不会报错，只会静默失败，得靠 catch 才能看到。
