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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

<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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

audio {
    background-color: #95B9C7;
}

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

Ответ 6

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

a css тег:

audio {

}

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

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

Ответ 8

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

audio {
    enter code here;
}