Audio

Einfaches Beispiel

Es gibt zwar eine Menge an CSS Eigenschaften für das Audio und Video Tag, aber diese greifen nicht in allen Browsern. Vor allen Dingen Chrome lässt kaum Gestaltungen zu.

Wer die komplette Gestaltungsfreiheit haben möchte kann auf eine alternative Lösung mit Javascript zurückgreifen, dazu habe ich ein ausführliches Step by Step Tutorial Javascript Audio.


<audio preload controls>
	<source src="media/audio/test.ogg">
	<source src="media/audio/test.mp3">
</audio>

CSS

audio::-webkit-media-controls-panel {
background-image: linear-gradient(180deg,rgba(135,141,164,1.00) 0%,rgba(68,68,99,1.00) 100%);
}

 

Audio Pseudo Elemente;

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

Lösungen mit eigenem Player und Javascript

beispiel