Можно ли стилизовать html5 audio tag?

Question

Можно ли стилизовать html5 audio tag?

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

643 8

html5 audio

8 ответов:

Comments

Ничего не найдено.

Benny · Accepted Answer · 2016-04-05 21:13:28

да! АУДИОТЕГ HTML5 с атрибутом "controls" использует проигрыватель браузера по умолчанию. Вы можете настроить его по своему вкусу, не используя элементы управления браузера, но добавить собственные элементы управления и аудио API через JavaScript.

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

Fábio Zangirolami · Accepted Answer · 2015-11-27 01:11:56

<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

gilad mayani · Accepted Answer · 2018-09-24 16:41:03

Да: вы можете скрыть встроенный интерфейс браузера (удалив

Mihai · Accepted Answer · 2010-11-08 20:20:28

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

Karin · Accepted Answer · 2011-05-23 20:41:11

чтобы изменить только цвет проигрывателя, просто обратитесь к звуковому тегу в файле css, например, на одном из моих сайтов плеер стал невидимым( белый на белом), поэтому я добавил:
audio {
    background-color: #95B9C7;
}
это изменило плеер на светло-синий.

Nick · Accepted Answer · 2012-05-30 18:43:22

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

a css теги:
audio {

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

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

katzkode · Accepted Answer · 2017-01-03 04:16:16

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

Kenneth Klippert · Accepted Answer · 2011-12-23 18:13:04

Если вы хотите, чтобы стиль браузеров стандартный музыкальный плеер в CSS:
audio {
    enter code here;
}