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

Question

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

Answer 1

<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

Answer 2

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

<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 к элементам (в данном случае, div + button s) и стилизовать их по своему желанию.

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

Answer 3

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

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

Answer 4

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

Answer 5

Вы должны создать свой собственный проигрыватель, который взаимодействует с аудиоэлементом HTML5.Этот урок поможет http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Answer 6

Кен тоже правильно понял.

a css tag:

audio {

}

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

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

Answer 7

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

audio {
    background-color: #95B9C7;
}

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

Answer 8

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

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Answer 9

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

audio {
    enter code here;
}