如何控制HTML <audio>标签的宽高？设置height/width属性无效

直接给<audio>标签加height和widthHTML属性之所以没用，是因为带controls的原生音频控件是浏览器渲染的内置组件，这些HTML属性的优先级低于浏览器默认样式，而且很多浏览器不会把这些属性应用到整个控件上。

你可以用CSS直接控制<audio>标签的尺寸，这是最可靠的方法：

方法一：内联CSS直接设置 #

<audio autoplay controls style="width: 100px; height: 100px;">
  <source src="周杰伦-天台的月光.flac">
</audio>

方法二：内部CSS类控制（更易维护） #

<style>
  .small-audio {
    width: 100px;
    height: 100px;
    /* 可选：如果控件显示异常，可调整内边距或边框 */
    /* padding: 0; */
    /* border: none; */
  }
</style>

<audio autoplay controls class="small-audio">
  <source src="周杰伦-天台的月光.flac">
</audio>

补充说明 #

不同浏览器的原生音频控件样式有差异，设置尺寸后可能显示效果略有不同。如果需要完全统一的控件样式，就得自己用HTML/CSS/JS实现自定义音频控件，但只是简单调整尺寸的话，上面的CSS方法完全够用。

内容的提问来源于stack exchange，提问作者grineveryday