Czy można stylizować znacznik audio HTML5?

Nie znalazłem żadnych zasobów, jak to zrobić. Przydałoby się coś tak prostego, jak zmiana koloru odtwarzacza :)

Tak! Tag audio HTML5 z atrybutem „controls” używa domyślnego odtwarzacza przeglądarki. Możesz dostosować go do swoich upodobań, nie używając elementów sterujących przeglądarki, ale tocząc własne elementy sterujące i rozmawiając z interfejsem audio API za pomocą javascript.

Na szczęście inni już to zrobili. Moim ulubionym odtwarzaczem w tej chwili jest jPlayer , jest bardzo stylowy i działa świetnie. Sprawdź to.

<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

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

Tak: możesz ukryć wbudowany interfejs przeglądarki (usuwając controlsatrybut z audio) i zamiast tego zbudować własny interfejs i sterować odtwarzaniem za pomocą JavaScript ( źródło ):

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

Następnie możesz stylizować elementy w dowolny sposób, używając CSS.

Dokumentacja interfejsu API MDN HTMLAudioElement

Wygląd tagu zależy od przeglądarki, ale możesz go ukryć, zbudować własny interfejs i sterować odtwarzaniem za pomocą JavaScript.

pewne strojenie kolorów

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

Musisz stworzyć swój własny odtwarzacz, który będzie współpracował z elementem audio HTML5. Ten samouczek pomoże http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Ken też miał rację.

csstag:

audio {

}

przyniesie Ci pewne wyniki. wydaje się, że nie chce, aby odtwarzacz miał wysokość powyżej lub poniżej 25 pikseli, ale szerokość można w pewnym stopniu skrócić lub wydłużyć.

to mi wystarczyło; zobacz ten przykład (ostrzeżenie, dźwięk jest odtwarzany automatycznie): www.thenewyorkerdeliinc.com

Aby zmienić tylko kolor odtwarzacza, po prostu zaadresuj tag audio w pliku css, na przykład na jednej z moich witryn odtwarzacz stał się niewidoczny (biały na białym), więc dodałem:

audio {
    background-color: #95B9C7;
}

Zmieniło to gracza na jasnoniebieski.

Tak, to możliwe, z odpowiedzi @ Fábio Zangirolami

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

Jeśli chcesz stylizować standardowy odtwarzacz muzyki w przeglądarce w CSS:

audio {
    enter code here;
}