È possibile applicare uno stile al tag audio HTML5?

Non ho trovato risorse su come farlo. Sarebbe bello avere qualcosa di semplice come cambiare il colore del giocatore :)

Sì! Il tag audio HTML5 con l'attributo "controls" utilizza il player predefinito del browser. Puoi personalizzarlo a tuo piacimento non utilizzando i controlli del browser, ma ruotando i tuoi controlli e parlando con l'API audio tramite javascript.

Fortunatamente, altre persone l'hanno già fatto. Il mio lettore preferito in questo momento è jPlayer , è molto personalizzabile e funziona alla grande. Controlla.

<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

RIFERIMENTO: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Sì: puoi nascondere l'interfaccia utente del browser integrata (rimuovendo l' controlsattributo da audio) e invece creare la tua interfaccia e controllare la riproduzione utilizzando Javascript ( sorgente ):

<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>

Puoi quindi modellare gli elementi come preferisci usando i CSS.

Riferimento API MDN HTMLAudioElement

L'aspetto del tag dipende dal browser, ma puoi nasconderlo, creare la tua interfaccia e controllare la riproduzione utilizzando Javascript.

alcune regolazioni dei colori

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

Devi creare il tuo lettore che si interfaccia con l'elemento audio HTML5. Questo tutorial aiuterà http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Anche Ken aveva ragione.

un csstag:

audio {

}

ti darà dei risultati. sembra che non voglia che il giocatore abbia un'altezza superiore o inferiore a 25px ma la larghezza può essere accorciata o allungata in una certa misura.

questo era abbastanza buono per me; vedere questo esempio (avviso, l'audio viene riprodotto automaticamente): www.thenewyorkerdeliinc.com

Per cambiare solo il colore del player, indirizza semplicemente il tag audio nel tuo file css, ad esempio su uno dei miei siti il ​​player è diventato invisibile (bianco su bianco) quindi ho aggiunto:

audio {
    background-color: #95B9C7;
}

Questo ha cambiato il giocatore in azzurro.

Sì, è possibile, dalla risposta di @ Fábio Zangirolami

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

Se desideri applicare uno stile al lettore musicale standard del browser nel CSS:

audio {
    enter code here;
}