要让标签真正好用，需理解属性作用与限制并合理组合：必加controls、多格式source（mp3+ogg）、降级文字；autoplay需muted或用户交互后js调用；preload按场景选metadata/auto/none；loop后ended事件仍触发；js实现进度条、错误处理、音量调节和跳转。
要让 <audio></audio> 标签真正“好用”，光堆属性不行，得理解每个属性的实际作用和限制，再按需组合。现代浏览器对自动播放、预加载、跨域等行为有严格策略，硬写 autoplay 很可能静音失败，只加 controls 又太简陋。关键在于：用对属性、留好退路、补上 JS 控制。
基础控件 + 多格式兼容是底线
没有 controls，用户连播放按钮都看不到；只提供一种格式（比如仅 MP3），在旧版 Firefox 或某些 Linux 浏览器里会直接黑屏。必须两者兼顾：
- 始终加上
controls属性，这是用户操作入口 - 不用
src单路径，改用<source></source>列出至少两种格式：MP3（全平台支持）+ OGG（开源兼容补充） -
<source></source>按顺序写，浏览器试到第一个能解码的就停，所以把兼容性最好的放前面 - 结尾保留降级文字，比如“您的浏览器不支持音频播放”，这不是摆设——当所有
<source></source>都加载失败时，它真会显示
自动播放必须满足“静音+交互”双条件
单纯写 autoplay 几乎无效。Chrome、Safari、Edge、Firefox 全部默认拦截有声自动播放。可行方案只有两个：
- 加
autoplay muted：静音状态下允许自动启动，适合背景音乐或无需声音的场景 - 先让用户点一下页面任意位置（哪怕是个空白
<div>），再用 JS 调用 <code>audio.play()：这样就算没muted也能正常发声 - 注意：移动端更严格，部分安卓 WebView 即使
muted也可能忽略autoplay，不能完全依赖 -
preload="metadata"：只加载时长、封面、采样率等基本信息，适合列表页预览，省流量又快 -
preload="auto"：提示浏览器尽可能加载全部音频，但移动端常被忽略，PC 端也取决于网络和内存 -
preload="none"：完全不预加载，用户点播放才开始拉流，适合大文件或低带宽环境 -
loop是纯前端控制，开启后ended事件仍会触发一次，如需自定义循环逻辑（比如跳过末尾 0.5 秒），得靠 JS 监听ended后手动currentTime = 0再play() - 用
timeupdate事件驱动进度条更新，别靠定时器轮询 - 监听
error事件并检查audio.error.code，区分是 404、跨域失败还是解码错误，再决定重试或提示 - 音量调节写
audio.volume = 0.7即可，但注意部分安卓 WebView 不响应动态修改 - 想实现“点击进度条跳转”，先算出点击位置对应的时间比例，再赋值给
currentTime，记得加try...catch防止无效时间报错
preload 和 loop 要看使用场景选值
preload 不是“一定会加载”，而是告诉浏览器“你看着办”。不同取值效果差异明显：
JavaScript 是补全体验的核心环节
纯 HTML 属性只能做到“能播”，真正“好用”得靠 JS：
