Hallo zusammen,
kenne mich zwar etwas mit HTML & CSS aus, aber beim Audio-Player (audio tag) muss ich leider passen.
Hat zufällig jemand schon eine fertige Lösung für das Standard-Design des WebFronts?
Also eine ehr ins blau tendierende Version und nicht die Standard-Weiß-Browser-Version 
Danke & Ciao
Pitti
Hallo zusammen,
jetzt habe ich mich mal schlau gemacht und dabei ist eine Lösung hinsichtlich Webradio herausgekommen.
Aber vielleicht erstmal die Antwort auf die selbst gestellte Styling-Frage:
<style>
audio::-webkit-media-controls-panel { background: blue;}
audio::-webkit-media-controls-mute-button {}
audio::-webkit-media-controls-play-button {background: transparent}
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 {}
</style>
Mit diesen Style-Anweisungen kann man das Player-Control etwas pimpen 
Bei mir sieht das als Webradio-Variante so aus:
Das Script dazu sieht dann folgendermaßen aus:
<?
################################################################################
# Scriptbezeichnung: Multimedia.Webradio.ips.php
# Version: 1.0.20170910
# Author: Heiko Wilknitz (@Pitti)
#
# Webradio Struktur:
# Script
# |- Player Variable
# | - n-Sender Varablen
#
# Player-Variablen
# - Typ => String
# - Profil => ~HTMLBox
# - Aktion => keine
#
# Sender-Variablen
# - Typ => Bool
# - Profil => ~Switch
# - Beschreibung => Streaming-URL
# - Aktion => Webradio-Script
#
# Webfront:
# - einfach die Player-Variable ins WF verlinken - fertig!
#
# ------------------------------ Konfiguration ---------------------------------
#
$player = 12345 /*Object ID der Player Variable*/;
#
# ----------------------------------- ID´s -------------------------------------
#
#
################################################################################
if ($_IPS['SENDER'] == "Execute") {
//Array mit allen untergeordneten Sender-Variablen
$ids = IPS_GetChildrenIDs($player);
// echo print_r($ids);
foreach ($ids as $id) {
$array = IPS_GetObject($id);
// Variable?
if ($array['ObjectType'] == 2) {
SetValueBoolean($id, false);
}
}
// Player deaktivieren
PlayAudio($player, '', false);
}
if ($_IPS['SENDER'] == "WebFront") {
$source = '';
$autoplay = false;
//Array mit allen untergeordneten Sender-Variablen
$ids = IPS_GetChildrenIDs($player);
// echo print_r($ids);
foreach ($ids as $id) {
if ($id == $_IPS['VARIABLE']) {
if ($_IPS['VALUE'] == true) {
$array = IPS_GetObject($id);
// Variable?
if ($array['ObjectType'] == 2) {
$source = $array['ObjectInfo'];
$autoplay = true;
}
}
SetValue($_IPS['VARIABLE'], $_IPS['VALUE']);
}
else {
SetValueBoolean($id, false);
}
}
// Player aktivieren
PlayAudio($player, $source, $autoplay);
}
# ------------------------------- Funktionen -----------------------------------
//Start writing your scripts between the brackets
function PlayAudio($player, $sound, $auto)
{
$audio = 32762 /*[Steuerung\Multimedia\Webradio\Player]*/;
$style = "";
$style = $style.'<style type="text/css">';
$style = $style.'audio::-webkit-media-controls-panel { background-color: rgb(160, 160, 0); background-image: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%);}';
$style = $style.'audio::-webkit-media-controls-timeline { -webkit-filter: hue-rotate(175deg) saturate(5); }';
$style = $style.'audio::-webkit-media-controls-current-time-display { color: white;} ';
$style = $style.'audio::-webkit-media-controls-time-remaining-display { color: white;}';
$style = $style.'audio::-webkit-media-controls-volume-slider {-webkit-filter: hue-rotate(175deg) saturate(5) ;}';
$style = $style.'#player {border: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 5px 0px 5px; margin:auto;}';
$style = $style.'#player audio {width: 100%;} /* 25px fuer Android */';
$style = $style.'#player audio:focus, #player audio:hover {background:#444;} /* die Rahmenfarbe */';
$style = $style.'</style>';
$html = $style;
$html = $html.'<div id="player">';
# autoplay="autoplay"
if($auto == true) {
$html = $html.'<audio id="innerplayer" src="'.$sound.'" controls="controls" autoplay="autoplay" controlsList="nodownload"></audio>';
}
else {
$html = $html.'<audio id="innerplayer" src="'.$sound.'" controls="controls" controlsList="nodownload"></audio>';
}
$html = $html.'</div>';
SetValue($player, $html);
}
################################################################################
?>
Ist jetzt mal schnell programmiert worden, kann man noch perfektionieren
Viel Spaß beim Style’n
Heiko