clicksound

Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden. D.h. beim klicken/berühren eines Elementes wird ein Sound abgespielt. Über Selektoren im Attribut data-bind-to werden die Elemente ausgewählt, es können verschiedenen Selektoren unterschiedliche Sounds zugewiesen werden. Das Widget selbst ist nicht sichtbar.

Das Widget bringt die Library ion.sound mit, die einige Sounds vordefiniert.

HTML

<div data-type="clicksound"
    data-sound="ion-button-tiny"
    data-length="200"
    data-bind-to="[data-type=button]"></div>

Widgets vom Typ "button" werden den Sound "ion-button-tiny" 200ms lang abspielen, wenn sie geklickt werden.

<div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-bell-ring","ion-tap"]'
    data-length='[200,300,400]'
    data-bind-to='["+button","+knob","+slider"]'></div>

Widgets der Typen "button", "switch" und "push" werden den Sound "ion-button-tiny" 200ms lang abspielen; Widgets vom Typ "volume" und "thermostat" werden den Sound "ion-bell-ring" 300ms lang abspielen; Widgets vom Typ "slider" und "dimmer" werden den Sound "ion-tap" 400ms lang abspielen.

Attribute

sound

Name/Dateiname des abszuspielenenden Sounds. Die Sounds der ion.sound-Library können mit dem Prefix "ion-" und ihrem Namen gesetzt werden. Bindestriche werden dabei in Unterstriche konvertiert. zB: data-sound="ion-camera-flashing" lädt den Sound "camery_flashing" aus der ion-Library. Wird der Prefix "ion-" nicht verwendet, wird data-sound als Pfad zu einer Datei auf dem Webserver interpretiert. Die Dateiendung (.mp3, .ogg...) muss nicht angegeben werden. zB: data-sound="../sound/button" spielt die Datei "button.mp3" aus dem Verzeichnis "../sound/" ab. Bevorzugt der Browser ein anderes Format, wird versucht eine Datei "button.(anderesformat)" zu laden. Default: ion-button-tiny

Optional kann das Attribut sound als Array angegeben werden. Es wird automatisch mit length und bind-play-to verknüpft. Achtung: Eigene Sounds in einem Array müssen im gleichen Verzeichnis liegen.

length

Abspiellänge in Milisekunden. Kann als Array angegeben werden und wird in dem Fall mit den Arrays sound und bind-play-to verknüft. Default: 200

bind-play-to

jQuery-Selektor, der die Elemente angibt, die den Sound abspielen sollen, wenn sie geklickt werden. Um zB alle Buttons, die nicht class="readonly" gesetzt haben auszuwählen gibt man

data-bind-to="[data-type=button]:not(.readonly),[data-type=switch]:not(.readonly),[data-type=push]:not(.readonly)" 

an. Zur Vereinfachung der Konfiguration sind folgende Spezialselektoren definiert:

• +buttons: push,switch,button und famultibutton (ohne "readonly" und nicht innerhalb eines circlemenu)
• +knob: volume und thermostat
• +slider: slider und dimmer
• +circlemenu: Alle Elemente eines circlemenu
• +circlemenu_center: Zentrales Element eines circlemenu
• +circlemenu_center: Äussere Elemente eines circlemenu
• +widgets: alle Widgets
• +everything: alles!

Kann als Array angegeben werden und wird in dem Fall mit den Arrays sound und length verknüft.

bind-to

Kurzform von data-bind-play-to

bind-pause-to

Wie bind-play-to, startet aber kein Abspielen, sondern pausiert es. Evtl. Interessant bei Sounddateien mit längerer Spieldauer

volume

Wert zwischen 0 und 100 der die prozentuale Wiedergabelautstärke angibt. Manche Browser können auch mit Werten über 100 umgehen. Die Wiedergabelautstärke wird dann entsprechend erhöht. Default: 100