html 5音频标签宽度

Question

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

不需要跨平台/浏览器支持;只要FireFox（3.6 ++）支持它我就开心了。

关于我将要使用的快速示例：

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

Answer 1

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

audio { width: 200px; }

请注意，audio默认情况下是Firefox中的内联元素，因此您可能还需要将其设置为display: block。 Here's an example。

Answer 2

对于那些寻找内联示例的人来说，这里有一个：

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

它似乎不尊重“高度”设置，至少不是很棒。但你可以随时“自定义”控件，但创建自己的控件（而不是使用内置的控件）或使用类似创建自己的人的小部件:)

Answer 3

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

audio = document.getElementById('audio-id');
audio.style.width = '200px';

Answer 4

您可以使用html并成为一个简单的老板：

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