Можно ли стилизовать аудиотег html5?

120

Я не нашел ресурсов, как это сделать. Было бы неплохо иметь такую ​​простую вещь, как изменение цвета плеера :)

html audio rabidmachine9
источник
3
Заставляет меня думать о кнопках ритма на старых Wurlitzers - «самба», «джаз», «вальс», ...
Дэвид Гелхар
1
Разные браузеры по-разному реагируют на стили звукового элемента - stackoverflow.com/a/27765938/325251
mvark 04
1
да, и на т.е. выглядит хуже всего. как они могут так плохо выглядеть?
live-love
1
кроссбраузерный ответ по стилю
Mousey
@ 40-Любовь: это серьезный вопрос? это Microsoft !!
Ринго

Ответы:

47

Да! Аудио-тег HTML5 с атрибутом "controls" использует проигрыватель по умолчанию браузера. Вы можете настроить его по своему вкусу, не используя элементы управления браузера, а развернув свои собственные элементы управления и разговаривая с аудио API через javascript.

К счастью, это уже сделали другие люди. Сейчас мой любимый плеер - jPlayer , он очень стильный и отлично работает. Проверить это.

Бенни
источник
49
Значит, ответ - «нет, это невозможно, необходимо использовать внешний плеер»?
Фернандо
2
@ Фернандо: это действительно возможно. Это отвечает на вопрос "возможно ли?"
Дэн Шнау
3
Спасибо @dsschnau. Я разместил свой комментарий, потому что вопрос касается стилизации тега видео html5 , и все ответы более или менее похожи на да, это возможно, используя другие теги .
Фернандо
10
Так действительно ли это «нет»? Сворачивание собственного пользовательского интерфейса - это не то же самое, что устаревание существующей разметки.
bob
2
Этот ответ на самом деле просто ссылка на ресурс. Что, если jPlayer уйдет ?
Кайл
74 
<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

ССЫЛКА: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Фабио Зангиролами
источник
18
Плохая презентация, но полезный селектор CSS!
Benoît
6
не могли бы вы показать пример, как их использовать? просто образец кода?
Xsmael
9
Это поддерживается только браузерами на основе webkit (например, не Firefox, IE и т. Д.)
gilad mayani
2
Очень хороший взлом, правильный ответ и огромное спасибо! я меняю стиль аудио тега без боли и дополнительного кода JS, ViVa Fabio
java acm
1
Похоже,
диаходелический
64

Да: вы можете скрыть встроенный пользовательский интерфейс браузера (удалив controlsатрибут из audio) и вместо этого создать свой собственный интерфейс и управлять воспроизведением с помощью Javascript ( источник ):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

Затем вы можете стилизовать элементы, как хотите, используя CSS.

Справочник по API MDN HTMLAudioElement

Гилад Майани
источник
конечно, это (.play) не будет работать на IOS, поскольку оно заблокировано (см. stackoverflow.com/questions/31776548/… )
user1432181
30

Внешний вид тега зависит от браузера, но вы можете скрыть его, создать свой собственный интерфейс и управлять воспроизведением с помощью Javascript.

Михай
источник
14

некоторые настройки цвета

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
Артур Веселов
источник
1
это быстрый и грязный способ изменить основные цвета плеера, очень удобный
wakandan
Я стряхнул пыль со своих учетных данных, чтобы войти, проголосовать за это и сказать «СПАСИБО».
Марк Амос,
8

Кен тоже был прав.

cssтег:

audio {

}

даст вам некоторые результаты. кажется, он не хочет, чтобы у игрока была высота выше или ниже 25 пикселей, но ширину можно до некоторой степени уменьшить или удлинить.

для меня этого было достаточно; см. этот пример (предупреждение, звук воспроизводится автоматически): www.thenewyorkerdeliinc.com

Ник
источник
Для меня большой проблемой является Internet Explorer. Он выглядит ужасно, отличается по цвету и имеет гораздо больший размер, чем у других браузеров, даже несмотря на то, что ширина установлена ​​на 150 пикселей
Ринго
Если вам нужно разместить IE9 + player в небольшом пространстве, мне подойдут высота 25 пикселей и ширина 100 пикселей. Я думаю, что высота 25 пикселей была ключевой, но большие числа по какой-то причине не работали.
Ринго
Ссылка, к сожалению, не работает
Алекс Сороколетов
6

Чтобы изменить только цвет плеера, просто обратитесь к тегу audio в вашем файле css, например, на одном из моих сайтов плеер стал невидимым (белый на белом), поэтому я добавил:

audio {
    background-color: #95B9C7;
}

Это изменило цвет игрока на голубой.

Karin
источник
12
Это не меняет цвет моего плеера, а только добавляет цвет фона. Есть идеи, почему?
Tom
1
@Tom, потому что это решение не для изменения серого фона плеера по умолчанию :-) Тот же результат, что и вы для меня.
Флориан Дойен,
0

Да, это возможно, из ответа @ Fábio Zangirolami

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
Эрнан Эче
источник
Не работает в Firefox 77
Генри,
-4

Если вы хотите стилизовать стандартный музыкальный проигрыватель браузеров в CSS: 

audio {
    enter code here;
}
Кеннет Клипперт
источник
1
Неполное
Даже беглая проверка этого ответа показала бы, что это неверно.
Isaac Lubow