Html5 ses etiketini biçimlendirmek mümkün mü?

Bunun nasıl yapılacağına dair herhangi bir kaynak bulamadım. Oyuncunun rengini değiştirmek kadar basit bir şeye sahip olmak güzel olurdu :)

Evet! "Kontroller" özelliğine sahip HTML5 ses etiketi, tarayıcının varsayılan oynatıcısını kullanır. Tarayıcı kontrollerini kullanmayarak, kendi kontrollerinizi yuvarlayarak ve javascript aracılığıyla ses API'siyle konuşarak beğeninize göre özelleştirebilirsiniz.

Neyse ki, başka insanlar bunu zaten yaptı. Şu anda en sevdiğim oyuncu jPlayer , çok şık ve harika çalışıyor. Bunu kontrol et.

<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

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

Evet: yerleşik tarayıcı kullanıcı arayüzünü gizleyebilir ( controlsözniteliği buradan kaldırarak audio) ve bunun yerine kendi arayüzünüzü oluşturabilir ve Javascript ( kaynak ) kullanarak oynatmayı kontrol edebilirsiniz :

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

Daha sonra CSS kullanarak öğeleri istediğiniz gibi biçimlendirebilirsiniz.

MDN HTMLAudioElement API başvurusu

Etiketin görünümü tarayıcıya bağlıdır, ancak onu gizleyebilir, kendi arayüzünüzü oluşturabilir ve Javascript kullanarak oynatmayı kontrol edebilirsiniz.

bazı renk ayarları

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

HTML5 ses öğesi ile arayüz oluşturan kendi oynatıcınızı oluşturmanız gerekir. Bu eğitici, http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/ yardımcı olacaktır.

Ken de haklıydı.

bir cssetiket:

audio {

}

size bazı sonuçlar verecektir. Görünüşe göre oynatıcının 25 pikselin üzerinde veya altında herhangi bir yükseklik istemiyor, ancak genişlik bir dereceye kadar kısaltılabilir veya uzatılabilir.

bu benim için yeterince iyiydi; bu örneğe bakın (uyarı, ses otomatik olarak çalar): www.thenewyorkerdeliinc.com

Oynatıcının sadece rengini değiştirmek için, css dosyanızdaki ses etiketini adreslemeniz yeterlidir, örneğin sitelerimden birinde oynatıcı görünmez hale geldi (beyaz üzerine beyaz) ben de ekledim:

audio {
    background-color: #95B9C7;
}

Bu, oynatıcıyı açık mavi olarak değiştirdi.

Evet, mümkün, @ Fábio Zangirolami cevabından

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

CSS'de tarayıcının standart müzik çalarına stil vermek istiyorsanız:

audio {
    enter code here;
}