html 5 音频标签宽度

Posted 2023-02-25

【中文标题】html 5 音频标签宽度

【英文标题】：html 5 audio tag width

【发布时间】：2011-04-12 12:43:57

【问题描述】：

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

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

关于我将使用什么的简单示例：

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

【参考方案1】：

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

audio  width: 200px; 

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

【讨论】：

遗憾的是，Chrome 播放器在居中之前仅扩展至 800 像素的宽度。

【参考方案2】：

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

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

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

【参考方案3】：

您也可以通过 javascript 设置音频标签的宽度：

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

【参考方案4】：

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

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