Пользовательский CSS для тега <audio>?

Question

Я создаю веб-приложение для музыкального проигрывателя, в котором реализована звуковая метка HTML5, однако хотелось бы, чтобы оно выглядело одинаково во всех браузерах - возможно ли определить мой собственный CSS?И как?

ура

Фела

Answer 1

В настоящее время нет способа стилизовать игроков HTML5 <audio> с помощью CSS. Вместо этого вы можете опустить атрибут control и реализовать свои собственные элементы управления с помощью Javascript. Если вы не хотите реализовывать их все самостоятельно, я бы порекомендовал использовать существующий HTML5-проигрыватель с поддержкой тем, например jPlayer .

.

Answer 2

Я совершенно случайно обнаружил (в то время я работал с изображениями), что box-shadow, border-radius и переходы работают довольно хорошо с помощью стандартного проигрывателя аудио тегов.У меня это работает в Chrome, FF и Opera.

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

с: -

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

Я даю вам это только "немного подправляет", но это делает ихзрение более захватывающее, чем то, что уже есть, и без использования MAJOR в JS.

НЕ доступно в IE, к сожалению (пока не поддерживает бит перехода), но, похоже, неплохо ухудшается.

Answer 3

Помимо параметров box-shadow, transform и border, упомянутых в других ответах, браузеры WebKit в настоящее время также подчиняются -webkit-text-fill-color, чтобы установить цвет чисел «прошедшего времени», но так как нет способаустановите их фон (который может варьироваться в зависимости от платформы, например, инвертированные высококонтрастные режимы в некоторых операционных системах), вам будет рекомендовано установить -webkit-text-fill-color в значение «initial», если вы использовали его в другом месте иаудиоэлемент наследует это, иначе некоторые пользователи могут счесть эти цифры нечитаемыми.

Answer 4

Существуют опции CSS для аудио тега.

Как: html 5 ширина звукового тега

Но если вы поэкспериментируете с этим, вы увидите, что результаты могут быть неожиданными - по состоянию на август 2012 года.