HTML 5 ширина аудио тега - PullRequest
       3

HTML 5 ширина аудио тега

25 голосов
/ 12 апреля 2011

Мне было интересно, можно ли установить ширину аудиотега.По умолчанию это не поддерживаемая функция, поэтому «хаки» будут с радостью приняты.
Я уже пытался поместить их в небольшие div и таблицы, но это выглядит не очень гладко ... Насколько я вижу,Меня беспокоит только этот вопрос, но я действительно ценю некоторую помощь

Нет необходимости в поддержке между платформами и браузерами;Я счастлив, если FireFox (3.6 ++) его поддерживает.

Быстрый пример того, что я буду использовать:

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

Ответы [ 4 ]

45 голосов
/ 12 апреля 2011

Установите его так же, как и ширину любого другого элемента HTML, с помощью CSS:

audio { width: 200px; }

Обратите внимание, что audio является встроенным элементом по умолчанию в Firefox, поэтому вы можете такжехочу установить его на display: block. Вот пример .

11 голосов
/ 04 ноября 2015

Для тех, кто ищет встроенный пример, вот один:

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

Кажется, он не соответствует настройке "высота", по крайней мере, не очень.Но вы всегда можете «настроить» элементы управления, но создав свои собственные элементы управления (вместо использования встроенных) или используя чей-то виджет, который аналогичным образом создает свой собственный:)

1 голос
/ 08 февраля 2016

Вы также можете установить ширину звукового тега с помощью JavaScript:

audio = document.getElementById('audio-id');
audio.style.width = '200px';
0 голосов
/ 06 мая 2017

Вы можете использовать html и быть боссом с простыми вещами:

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

...