36

我想知道是否可以设置音频标签的宽度。默认情况下它不是受支持的功能,因此“hacks”将被愉快地接受。
我已经尝试将它们放在小 div 和表格中,但这看起来不太顺利......据我所知,我是唯一一个为此烦恼的人,但我真的很感谢一些帮助

无需跨平台/浏览器支持;只要 FireFox (3.6 ++) 支持它,我就很高兴。

关于我将使用什么的快速示例:

<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>
4

4 回答 4

57

设置它的方式与设置任何其他 HTML 元素的宽度相同,使用 CSS:

audio { width: 200px; }

请注意,audio默认情况下它是 Firefox 中的内联元素,因此您可能还希望将其设置为display: block. 这是一个例子

于 2011-04-12T17:16:11.543 回答
19

对于那些寻找内联示例的人,这里有一个:

<audio controls style="width: 200px;">
   <source src="http://somewhere.mp3" type="audio/mpeg">
</audio>

它似乎不尊重“高度”设置,至少不令人敬畏。但是您始终可以“自定义”控件,但创建自己的控件(而不是使用内置控件)或使用类似创建自己的某人的小部件:)

于 2015-11-04T20:50:00.260 回答
2

您还可以通过 JavaScript 设置音频标签的宽度:

audio = document.getElementById('audio-id');
audio.style.width = '200px';
于 2016-02-08T15:06:58.187 回答
1

您可以使用 html 并通过简单的事情成为老板:

<embed src="music.mp3" width="3000" height="200" controls>

于 2017-05-06T14:06:11.193 回答