Apakah mungkin untuk memberi gaya tag audio html5?

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

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.

<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

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

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

beberapa penyetelan warna

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

Anda harus membuat pemutar Anda sendiri yang berinteraksi dengan elemen audio HTML5. Tutorial ini akan membantu http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

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

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.

Bisa, dari jawaban @ Fábio Zangirolami

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

Jika Anda ingin menata pemutar musik standar browser di CSS:

audio {
    enter code here;
}