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

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

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

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

<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

ССЫЛКА: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Да: вы можете скрыть встроенный пользовательский интерфейс браузера (удалив 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.

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

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

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

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

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

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

cssтег:

audio {

}

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

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

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

audio {
    background-color: #95B9C7;
}

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

Да, это возможно, из ответа @ Fábio Zangirolami

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

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

audio {
    enter code here;
}