Czy można stylizować znacznik audio HTML5?

120

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

rabidmachine9
źródło
3
Przypomina mi się przyciski rytmiczne na starych Wurlitzerach - „samba”, „jazz”, „walc”, ...
David Gelhar
1
Różne przeglądarki różnie reagują na stylizację elementu audio - stackoverflow.com/a/27765938/325251
mvark
1
tak, a na tj. najgorzej wygląda. jak mogą sprawić, by wyglądało tak źle?
miłość na żywo
1
stylizacja wideo odpowiedź w różnych przeglądarkach advprog.blogspot.co.uk/2013/07/…
Mysi
@ 40-Love: czy to poważne pytanie? to jest Microsoft !!
Ringo

Odpowiedzi:

47

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.

Benny
źródło
49
Czyli odpowiedź brzmi „nie, to niemożliwe, musisz użyć zewnętrznego odtwarzacza”?
Fernando
2
@Fernando: jest to rzeczywiście możliwe. To odpowiada na pytanie „czy to możliwe?”
Dan Schnau
3
Dziękuję @dsschnau. Opublikowałem swój komentarz, ponieważ pytanie dotyczy stylizacji tagu wideo html5 , a wszystkie odpowiedzi są mniej więcej tak, tak, jest to możliwe, używając innych tagów .
Fernando
10
Czy to naprawdę „nie”? Rolling własnego interfejsu użytkownika to nie to samo, co przechowywanie istniejących znaczników.
bob
2
Ta odpowiedź to tak naprawdę tylko link do zasobu. Co jeśli jPlayer zniknie ?
Kyle
74
<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

Fábio Zangirolami
źródło
18
Słaba prezentacja, ale przydatny selektor CSS!
benoît
6
czy możesz pokazać przykład, jak ich używać? tylko przykładowy kod?
Xsmael
9
Jest to obsługiwane tylko przez przeglądarki oparte na webkitach (np. Nie Firefox, IE itp.)
gilad mayani
2
Bardzo fajny hacking, to poprawna odpowiedź i wielkie dzięki! zmieniam styl tagu audio bez bólu i dodatkowego kodu JS, ViVa Fabio
java acm
1
Wydaje
diachedelic
64

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

gilad mayani
źródło
z pewnością to (.play) nie zadziała na IOS, ponieważ jest zablokowane (patrz stackoverflow.com/questions/31776548/ ... )
user1432181
30

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

Mihai
źródło
14

pewne strojenie kolorów

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
Arthur Veselov
źródło
1
to szybki i brudny sposób na zmianę podstawowych kolorów odtwarzacza, bardzo przydatny
wakandan
Odkurzyłem moje dane logowania, aby się zalogować, zagłosować za tym i powiedzieć „DZIĘKUJĘ”.
Marc Amos
8

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

Nacięcie
źródło
Dla mnie dużym problemem jest Internet Explorer. Wygląda okropnie i ma inny kolor i znacznie większy rozmiar niż inne odtwarzacze przeglądarki, mimo że szerokość jest ustawiona na 150 pikseli
Ringo
Jeśli potrzebujesz umieścić odtwarzacz IE9 + na małej przestrzeni, wysokość 25px i szerokość 100px mi się przydały. Myślę, że wysokość 25 pikseli była kluczowa, ale większe liczby nie działały z jakiegoś powodu.
Ringo
Link niestety nie
działa
6

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.

Karin
źródło
12
Nie zmienia to koloru mojego odtwarzacza, a jedynie umieszcza za nim kolor tła. Masz jakiś pomysł, dlaczego?
Tom
1
@Tom bo to rozwiązanie nie służy do zmiany domyślnego szarego tła odtwarzacza :-) Taki sam wynik jak u mnie.
Florian Doyen
0

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

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
Hernán Eche
źródło
Nie działa w przeglądarce Firefox 77
Henry
-4

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

audio {
    enter code here;
}
Kenneth Klippert
źródło
1
niekompletny opis jest bardzo prosty i mogę użyć tego sposobu do stylizacji wszystkich elementów audio
Davod Aslanifakor
Nawet pobieżne sprawdzenie tej odpowiedzi ujawniłoby, że jest błędna.
Izaak Lubow