html - html 5 音频标签宽度

Question

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

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

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

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

score 57 · Accepted Answer

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

audio { width: 200px; }

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

score 19 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

4 回答 4