Возможно ли использовать стиль html5 audio tag?

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

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

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

  
 Play Pause Vol+  Vol-   

Затем вы можете добавлять classы CSS к каждому из элементов (в данном случае, button div +) и стилизовать их, как вы пожелаете.

Дополнительные свойства и методы интерфейса JavaScript HTMLAudioElement можно найти здесь .

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

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

 audio { background-color: #95B9C7; } 

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

У Кен было это правильно.

тег css :

 audio { } 

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

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

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

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

 audio { enter code here; }