audio元素不支持width/height属性，需用CSS控制容器或自定义UI；原生控件尺寸由UA决定且浏览器差异大；transform缩放有兼容性问题；完全可控方案是移除controls并手写UI+JS绑定。
audio 元素本身不支持 width/height 属性
直接给 <audio></audio> 标签写 width="300" 或 height="40" 是无效的——HTML 规范里 <audio></audio> 是**替换元素（replaced element）**，但它的默认渲染行为不接受尺寸属性。浏览器会忽略这些设置，控件大小由 UA 样式决定，且各浏览器差异大（比如 Chrome 的控件高度约 36px，Safari 约 44px）。
常见错误现象：
– 写了 width 和 height 但控件没变；
– 用 CSS 设置 audio { width: 100% } 后控件横向拉伸变形或按钮错位。
- 真正生效的方式只有 CSS 控制其包裹容器 + 强制重设内部控件样式（有限）
- 若需精确尺寸，必须隐藏原生控件（去掉
controls属性），用自定义 UI 替代 -
display: block是必要的，否则 inline 行为会导致 margin/padding 失效
用 CSS 调整原生 controls 的视觉尺寸（有限但够用）
虽然不能直接缩放控件，但可通过覆盖 UA 样式微调：重点控制 audio 自身的盒模型、字体缩放和内部伪元素（部分浏览器支持）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先统一基础盒模型：
audio { display: block; margin: 0 auto; } - 用
transform: scale(0.9)缩放整个控件（注意：会连带缩放文字和点击热区，移动端可能影响可点性） - Chrome/Edge 可通过
audio::-webkit-media-controls系列伪类调整按钮大小，但 Safari 和 Firefox 不支持，不可靠 - 更稳妥的做法是限制容器宽度，并让控件自动适应：
audio { max-width: 100%; height: auto; }，配合父容器font-size调节（某些浏览器将控件尺寸与根字号挂钩）
完全可控的方案：移除 controls，手写 UI + JavaScript 绑定
这是唯一能精确控制每个按钮、滑块、进度条尺寸和布局的方式。你放弃原生控件，换来 100% 的 DOM 控制权。
关键步骤：
- HTML 中去掉
controls属性，加id="myAudio"方便获取 - 用
<button></button>、<input type="range">、<span></span>拼出界面，所有尺寸用 CSS 明确定义 - JavaScript 绑定：
play()/pause()控制状态，currentTime驱动进度条，volume绑定音量滑块 - 注意：移动端需监听
touchstart或click（iOS Safari 对input[type="range"]的input事件触发不一致）
示例片段：<audio id="myAudio" src="bgm.mp3"></audio><div class="player">
<button id="playBtn">▶</button><input type="range" id="progress" min="0" max="100">
</div>
容易被忽略的兼容性细节
尺寸控制不是纯样式问题，它和媒体加载、事件时机强相关：
- 在
loadedmetadata事件前读取audio.duration会得NaN，导致进度条计算失败 - Safari 对
transform: scale()下的控件热区有偏移，需额外加pointer-events: none到父层再透传到按钮 - Android WebView 中，原生控件可能无视任何 CSS 缩放，只认系统 DPI 设置
- 如果音频是背景音乐且无用户交互，
play()调用可能被静默拒绝（尤其 iOS），此时自定义 UI 的播放按钮必须是真实用户点击触发的
