Tag <audio> transparent gestalten (Firefox)

uname · Beitrag von **uname** » 23.09.2023 12:46:45

Heute bräuchte ich ein wenig CSS-Unterstützung. Ich würde gerne den Audio-Player (im Beispiel Radio SWR3) nicht mit schwarzem Hintergrund, sondern transparent angezeigt bekommen. Mit dem aufgeführten Code funktioniert das sowohl mit Chromium bei Debian als auch im Edge unter Windows. Mit Firefox funktionert das weder bei Debian noch Windows. Der Hintergrund des Audio-Players bleibt schwarz.

Kennt jemand einen CSS-Code, der auch für Mozilla Firefox den Hintergrund des Audio-Players transparent darstellt?

datei.html

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: #fff;
  color: #a0276e;
}
</style>
</head>
<body>
<br><b>SWR3</b><br>
<audio controls preload="none"><source src="https://liveradio.swr.de/sw890cl/swr3" type="audio/ogg" />
</audio>
</body>
</html>

Update 13:58 Uhr: Code aktualisiert, Problem leider nicht behoben.

curt123 · Beitrag von **curt123** » 26.09.2023 13:13:29

uname hat geschrieben:
23.09.2023 12:46:45
Kennt jemand einen CSS-Code, der auch für Mozilla Firefox den Hintergrund des Audio-Players transparent darstellt?

Da geht wohl wenig. Z.B. opacity:0; für das ganze audio-Element wäre nicht ausreichend. Also bleibt vielleicht der Umweg:

https://developer.mozilla.org/en-US/doc ... ment/audio

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want

oln · Beitrag von **oln** » 28.09.2023 11:29:46

Wie ja schon fest gestellt worden ist, kannst du das Audio-Element nur bedingt sylen.
Besser ist es ein eigenes AudioSteuerelement zu bauen.
Hier mal ein simples Beispiel:

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#audioControl{
	color: red;
	font-size: 15px;
	font-weight: bold;
}
</style>

</head>
<body>
<br><b>RadioEins</b><br>
<audio id="Audio1" preload='none'>
    <source src="https://dispatcher.rndfnk.com/rbb/radioeins/live/mp3/mid" type="audio/ogg" />
</audio>
<a href="#" id="audioControl">play!</a>
<script>
var Audio1 = document.getElementById('Audio1'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    Audio1[method]();

    // Prevent Default Action
    return false;
};
</script>

</body>
</html>

debianforum.de

Tag <audio> transparent gestalten (Firefox)

Tag <audio> transparent gestalten (Firefox)

Re: Tag <audio> transparent gestalten (Firefox)

Re: Tag <audio> transparent gestalten (Firefox)