Apakah mungkin untuk memberi gaya tag audio html5?

120

Saya belum menemukan sumber daya apa pun tentang cara melakukan itu. Sesuatu yang sederhana seperti mengubah warna pemain akan menyenangkan untuk dimiliki :)

html audio rabidmachine9
sumber
3
Membuat saya berpikir tentang tombol ritme pada Wurlitzer lama - "samba", "jazz", "waltz", ...
David Gelhar
1
Browser yang berbeda bereaksi berbeda terhadap gaya elemen audio - stackoverflow.com/a/27765938/325251
mvark
1
ya, dan yaitu terlihat yang terburuk. bagaimana mereka bisa membuatnya terlihat begitu buruk?
cinta langsung
1
gaya video lintas browser jawaban advprog.blogspot.co.uk/2013/07/…
Mousey
@ 40-Love: apakah itu pertanyaan yang serius? itu Microsoft !!
Ringo

Jawaban:

47

Iya! Tag audio HTML5 dengan atribut "kontrol" menggunakan pemutar default browser. Anda dapat menyesuaikannya dengan keinginan Anda dengan tidak menggunakan kontrol browser, tetapi memutar kontrol Anda sendiri dan berbicara ke API audio melalui javascript.

Untungnya, orang lain sudah melakukannya. Pemain favorit saya saat ini adalah jPlayer , sangat bergaya dan berfungsi dengan baik. Saksikan berikut ini.

Benny
sumber
49
Jadi jawabannya "tidak, tidak mungkin, Anda harus menggunakan pemutar eksternal"?
Fernando
2
@Fernando: itu memang mungkin. Ini menjawab pertanyaan "apakah itu mungkin?"
Dan Schnau
3
Terima kasih @dsschnau. Saya memposting komentar saya karena pertanyaannya adalah tentang styling tag video html5 , dan semua jawabannya kurang lebih seperti ya, itu mungkin, menggunakan tag lain .
Fernando
10
Jadi, apakah itu benar-benar "tidak"? Menggulirkan UI Anda sendiri bukanlah hal yang sama dengan menata markup yang sudah ada.
bob
2
Jawaban ini sebenarnya hanyalah tautan ke sumber daya. Bagaimana jika jPlayer hilang ?
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

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

Fábio Zangirolami
sumber
18
Presentasi yang buruk tapi pemilih CSS yang berguna!
benoît
6
bisakah Anda menunjukkan contoh bagaimana menggunakan ini? hanya contoh kode?
Xsmael
9
Ini hanya didukung oleh browser berbasis webkit (misalnya, bukan Firefox, IE, dll.)
gilad mayani
2
Peretasan yang sangat bagus, itu jawaban yang benar dan banyak terima kasih! saya mengubah gaya tag audio tanpa rasa sakit dan kode JS tambahan, ViVa Fabio
java acm
1
Muncul untuk disalin / ditempel dari gist.github.com/afabbro/3759334
diachedelic
64

Ya: Anda dapat menyembunyikan UI browser bawaan (dengan menghapus controlsatribut dari audio) dan sebagai gantinya membuat antarmuka Anda sendiri dan mengontrol pemutaran menggunakan Javascript ( sumber ):

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

Anda kemudian dapat mengatur gaya elemen sesuka Anda menggunakan CSS.

Referensi MDN HTMLAudioElement API

gilad mayani
sumber
pasti ini (.play) tidak akan berfungsi di IOS karena diblokir (lihat stackoverflow.com/questions/31776548/… )
pengguna1432181
30

Munculnya tag bergantung pada browser, tetapi Anda dapat menyembunyikannya, membuat antarmuka Anda sendiri, dan mengontrol pemutaran menggunakan Javascript.

Mihai
sumber
14

beberapa penyetelan warna

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
Arthur Veselov
sumber
1
ini adalah cara cepat dan kotor untuk mengubah warna dasar pemain, sangat praktis
wakandan
Saya membersihkan kredensial login saya untuk masuk, memberi suara positif, dan mengucapkan "TERIMA KASIH".
Marc Amos
8

Ken juga melakukannya dengan benar.

sebuah csstag:

audio {

}

akan memberimu beberapa hasil. tampaknya tidak ingin pemain memiliki tinggi di atas atau di bawah 25px tetapi lebarnya dapat dipersingkat atau diperpanjang sampai batas tertentu.

ini cukup baik untukku; lihat contoh ini (peringatan, audio diputar secara otomatis): www.thenewyorkerdeliinc.com

Nick
sumber
Bagi saya, masalah besar adalah Internet Explorer. Kelihatannya mengerikan dan warnanya berbeda dan ukuran yang jauh lebih besar daripada pemain browser lain, meskipun lebarnya diatur ke 150px
Ringo
Jika Anda perlu memasukkan pemutar IE9 + ke ruang kecil, tinggi 25px dan lebar 100px bekerja untuk saya. Saya pikir tinggi 25px adalah kuncinya, tetapi angka yang lebih besar tidak berfungsi karena alasan apa pun.
Ringo
Sayangnya, tautannya mati
Alex Sorokoletov
6

Untuk mengubah hanya warna pemutar, cukup alamatkan tag audio di file css Anda, misalnya di salah satu situs saya pemutar menjadi tidak terlihat (putih di atas putih) jadi saya menambahkan:

audio {
    background-color: #95B9C7;
}

Ini mengubah pemutar menjadi biru muda.

Karin
sumber
12
Ini tidak mengubah warna pemutar saya, ini hanya menempatkan warna latar belakang. Tahu kenapa?
Tom
1
@ Tom karena solusi ini bukan untuk mengubah latar belakang abu-abu default pemutar :-) Hasil yang sama seperti Anda untuk saya.
Florian Doyen
0

Bisa, dari jawaban @ Fábio Zangirolami

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
Hernán Eche
sumber
Tidak berfungsi di Firefox 77
Henry
-4

Jika Anda ingin menata pemutar musik standar browser di CSS: 

audio {
    enter code here;
}
Kenneth Klippert
sumber
1
deskripsi tidak lengkap sangat sederhana dan saya dapat menggunakan cara ini untuk menata semua elemen audio
Davod Aslanifakor
Bahkan pemeriksaan sepintas dari jawaban ini akan mengungkapkan bahwa itu salah.
Isaac Lubow