Чи можливий стиль звукового тегу 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.

Посилання на MDN HTMLAudioElement API

Зовнішній вигляд тегу залежить від браузера, але ви можете його приховати, створити власний інтерфейс і керувати відтворенням за допомогою 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

Щоб змінити лише колір плеєра, просто зверніться до аудіотек у вашому файлі 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;
}