Beispielkonfiguration Squeezelite Player

[Syrex-o]

Wollte mal mit euch meine Konfiguration der Squeezeplayer teilen und eventuell hilft es euch ja bei eurem Aufbau.

Der Aufbau ist für ein Handy gedacht und ist dementsprechend skalliert.

Code Auswählen Erweitern

<li class="halbTransparent top-narrow" data-row="2" data-col="2" data-sizex="2" data-sizey="3.5">
<header class="headerTransparent">Musik Steuerung</header>
<div class="top-space">
<div class="inline">
<div data-type="volume"
                 data-device="AV_Receiver"
                 data-get="volumeStraight"
                 data-set="volumeStraight"
                 data-min="-70"
                 data-max="-35"
                 data-tickstep="10"
                 data-color="#FF0000"
                 data-background-color="#565E6B"
                 class="medium left">
            </div>
            <div data-type="popup"
                 data-height="300"
                 data-width="300"
                 class="right">
                <div data-type="image"
                     data-device="SB_2"
                     data-get="coverarturl"
                     data-width="70px"
                     data-height="70px"
                     data-refresh="5"
                     class="right">
                </div>
                <div class="dialog">
                <header>Cover</header>
                    <div data-type="image"
                         data-device="SB_2"
                         data-get="coverarturl"
                         data-size="100%"
                         class=""
                         onclick="$('.dialog-close').trigger('click');">
                    </div>
                </div>
            </div>
</div>
<div class="inline">
        <div data-type="label"
             data-device="SB_2"
             data-get="currentTrackPosition"
             data-substitution="toMinFromSec()"
             class="inline middle medium">
        </div>
        <div data-type="level"
             data-device="SB_2"
             data-get="currentTrackPosition"
             data-max="duration"
             data-min="0"
             data-width="100"   
             class="horizontal inline middle">
        </div>
        <div data-type="label"
             data-device="SB_2"
             data-get="duration"
             data-substitution="toMinFromSec()"
             class="inline middle medium">
        </div>
    </div>
<div class="row large thin top-space">
        <div data-type="label"
             data-device="SB_2"
             data-get="currentTitle"
             data-substitution="s/Or//g"
             class="bold">
        </div>
        <div data-type="label"
             data-device="SB_2"
             data-get="currentArtist"
             class="">
        </div>
    </div>
    <div class="container">
        <div data-type="push"
             data-device="SB_2"
             data-icon="fa-step-backward"
             data-background-icon="-"
             data-off-color="#fff"
             data-on-color="#aa6900"
             data-set-on="prev"
             class="col-1-5">
        </div>
        <div data-type="multistatebutton"
             data-device="SB_2"
             data-get="playStatus"
             data-get-on='["playing","paused","stopped"]'
             data-set='["pause","play"]'
             data-set-default="pause"
             data-icons='["fa-pause","fa-play"]'
             data-on-background-color="gray"
             class="col-1-5">
        </div>
        <div data-type="push"
             data-device="SB_2"
             data-icon="fa-stop"
             data-background-icon="fa-circle"
             data-off-color="#000000"
             data-on-color="#aa6900"
             data-background-color="grey"
             data-set-on="stop"
             class="col-1-5">
        </div>
        <div data-type="push"
             data-device="SB_2"
             data-icon="fa-step-forward"
             data-background-icon="-"
             data-off-color="#fff"
             data-on-color="#aa6900"
             data-set-on="next"
             class="col-1-5">
        </div>
</div>
    <div class="container top-space">
        <div data-type="multistatebutton"
             data-device="SB_2"
             data-get="repeat"
             data-get-on='["off","one"]'
             data-set='["repeat one","repeat off"]'
             data-set-default='["repeat off"]'
             data-icon="fa-repeat"
             data-background-colors='["grey","white"]'
             class="col-1-5">
        </div>
        <div data-type="push"
             data-device="Soundcloud_SB_2"
             data-icon="fa-soundcloud"
             data-background-icon="fa-square-o"
             data-set-on="on"
             class="col-1-5">
        </div>
        <div data-type="multistatebutton"
             data-device="SB_2"
             data-get="shuffle"
             data-get-on='["off","song"]'
             data-set='["shuffle song","shuffle off"]'
             data-set-default='["shuffle off"]'
             data-icon="fa-random"
             data-background-colors='["grey","white"]'
             class="col-1-5">
        </div>
    </div>
</li>

Für Soundclopud habe ich einen dummy erstellt der die Soundcloud Likes vom Plugin Squeezecloud abspielt.
Das Albumcover ist ein onClick Popup damit man es auch so schließen kann.

Die Button sind als Multistate entworfen damit man eine Änderung direkt grafisch darstellen kann.

Falls es fragen oder Anregungen gibt, immer her damit.

Grüße