Sound abspielen

[Chris M.]

Ich hab nur mal kurz quergelesen:

1. Verwendest Du auch die neueste SVN-Version? Ich befürchte nicht...
2. Du musst vermutlich die Intervall-ID zwischenspeichern um das Intervall zu beenden. Das geht gut in einem Closure - und den gibt dir die neuste Version im SVN for free
3. Alternativ ggf. den Intervall durch einen (sich selbst wiederholenden) Timeout ersetzen. (In diesem Fall könnte aber beides passen)

[jensgulow]

So, jetzt habe ich die neueste Version.

Die clearIntervall - Sache im closure funktioniert ja für den Zähler

                var intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
               [COLOR=Red][B] if (numOfCalls == maxcount-1) clearInterval(intervalID);[/B][/COLOR]
                if (value < on) clearInterval(intervalID);
                }, interval);

was jedoch nicht klappt ist die nächste Zeile:

                var intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
                if (numOfCalls == maxcount-1) clearInterval(intervalID);
                [COLOR=Red][B]if (value < on) clearInterval(intervalID);[/B][/COLOR]
                }, interval);

value und on werden ja vorher definiert und sollten so eigentlich wieder auszurufen sein, oder ? Irgendwie habe ich gerade einen Knoten in der Birne

Hier nochmal der relevante Auszug aus der audio.js

  update: function(e,d) {
    var element = $(this);
    var data    = element.data();
    var actor   = element.find('.actor');
    var value = basicdesign.defaultUpdate( e, d, element, true );
    var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );
    // value >= threshold
    if (value >= on){
        var maxcount = data.count;
        var interval = data.interval;
        var audioWidget = document.getElementById(element.data('id'));
        if (audioWidget.paused == true){
            if (maxcount && interval) {
                var numOfCalls = 0;
                audioWidget.play();
                var intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
                if (numOfCalls == maxcount-1) clearInterval(intervalID);
                if (value < on) clearInterval(intervalID);
                }, interval);
            }
            else audioWidget.play();
        }
    };
    // value < then threshold
    if (value < on){
    var audioWidget = document.getElementById(element.data('id'));
    audioWidget.pause();
    };
  }

[Chris M.]

Am einfachsten debuggst Du das in der Konsole und schaust einfach mal live was da passiert.
Spontan sehe ich keinen Grund warum es nicht gehen sollte (habe mich aber nicht wirklich reingedacht).

Was mir vom Stil allerdings aufgefallen ist: Du hast oben schon per

var data = element.data()

den Inhalt von data() ausgelesen. D.h. weiter unten ist element.data(foo) unnötig aufwändig, mach da doch einfach ein data[foo]...

[jensgulow]

So, jetzt funktioniert es erst einmal:

Ich habe value global gemacht:

vorher:

  update: function(e,d) {
    var element = $(this);
    var data    = element.data();
    var actor   = element.find('.actor');
    [B][COLOR=Red]var value[/COLOR][/B] = basicdesign.defaultUpdate( e, d, element, true );
    var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );

... funktioniert nicht

nachher:

  update: function(e,d) {
    var element = $(this);
    var data    = element.data();
    var actor   = element.find('.actor');
    [B][COLOR=Red]value[/COLOR][/B] = basicdesign.defaultUpdate( e, d, element, true );
    var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );

... funktioniert


Kann man das so lassen, oder hat die "Globalisierung" negative Auswirkungen ?

Im Anhang nochmal die aktuell von mir genutzte audio.js

PS: @ Chris: habe das element.data(foo) noch nicht rausgenommen - kommt noch

[Chris M.]

Kann man das so lassen, oder hat die "Globalisierung" negative Auswirkungen ?

Ja, große!

1. Es ist unsauber und gehört pauschal verboten. (Eigentlich gehört soger ein "use strict"; oben rein...)
2. Was ist wenn alle das so machen?
3. Im konkreten Fall: was ist, wenn Du mehrere Audio-Widgets hast?

Das ganze ist sicher auch ohne Global möglich!

[jensgulow]

@ Chris: habe das ganze wieder rückgängig gemacht und die letzten Tage versucht per closure auf die Werte Zugriff zu bekommen - jedoch ohne Erfolg.

Ich habe eine Recherche im Netz gemacht und hier und da und dort .... gute Hinweise bekommen. Allerdings führte das zu keinem Ergebnis. Es wurde der Abbruch des Intervals durch eine eintreffende "0" auf "value" einfach ignoriert.

Hier noch mal der aktuelle Code und die Zeile , welche nicht funktioniert:

  update: function(e,d) {
    var element = $(this);
    var data    = element.data();
    var actor   = element.find('.actor');
    var value = basicdesign.defaultUpdate( e, d, element, true );
    var on = templateEngine.map( data[ 'threshold_value' ], data['mapping'] );
    if (value >= on){
        var maxcount = data.count;
        var interval = data.interval;
        var audioWidget = document.getElementById(data['id']);
        if (audioWidget.paused == true){
            if (maxcount && interval) {
                var numOfCalls = 0;
                audioWidget.play();
                var intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
                if (numOfCalls == maxcount-1) clearInterval(intervalID);
                [COLOR=Red][B]if (value < on) clearInterval(intervalID);[/B][/COLOR]
                }
                , interval);
            }
            else audioWidget.play();
        }
    };

    if (value < on){
    var audioWidget = document.getElementById(data['id']);
    audioWidget.pause();
    };
  }

Mir ist ja klar, dass die dort genannten Variablen "value" und "on" in der "parent"-function deklariert sind und nicht in der aktuellen function. Deshalb stehen sie nicht zur Verfügung - soweit ist mir das klar. Aber wie bekomme ich Zugriff auf diese Variablen ???

Ich komme da echt nicht mehr weiter und würde mich über Hilfe freuen.

[Chris M.]

Mir ist ja klar, dass die dort genannten Variablen "value" und "on" in der "parent"-function deklariert sind und nicht in der aktuellen function. Deshalb stehen sie nicht zur Verfügung - soweit ist mir das klar.

Eigentlich sollten die da noch zur Verfügung stehen - ist ja auch eine Closure...

Aber: value wird sich nie aktualisieren, d.h. daher wird die rote Zeile niemals clearInterval() aufrufen...

Aber wie bekomme ich Zugriff auf diese Variablen ???

Wie geschrieben: ich glaube Du hast da schon Zugriff. Aber einen der nichts bringt...

Du müsstest eher die intervallID "weiter draußen" speichern.
Evtl. (was keine klassische Closure ist, aber hier evtl. eine gute Lösung) im data() des HTML Elementes...

[jensgulow]

@ Chris: es besteht wohl schon die Möglichkeit, dass sich "value" aktualisiert. wie hier beschrieben klappt das ganze Konstrukt ja, wenn "value" global wäre (und "on" auch). In diesem Fall lässt sich die Ausführung von setIntervall mit dem Eintreffen eines Wertes < threshold vorzeitig beenden.
Also müsste doch das Konstrukt an sich funktionieren, oder? Wenn nun "value" und "on" jedoch lokal definiert sind, dann passiert nichts (und ich denke, dass ich keinen Zugriff auf diese Variablen habe).
Wie könnte ich dann überprüfen, ob Zugriff auf die o.g. Variablen in der "inner function" besteht?

[Chris M.]

@ Chris: es besteht wohl schon die Möglichkeit, dass sich "value" aktualisiert. wie hier beschrieben klappt das ganze Konstrukt ja, wenn "value" global wäre (und "on" auch). In diesem Fall lässt sich die Ausführung von setIntervall mit dem Eintreffen eines Wertes < threshold vorzeitig beenden.
Also müsste doch das Konstrukt an sich funktionieren, oder? Wenn nun "value" und "on" jedoch lokal definiert sind, dann passiert nichts (und ich denke, dass ich keinen Zugriff auf diese Variablen habe).
Wie könnte ich dann überprüfen, ob Zugriff auf die o.g. Variablen in der "inner function" besteht?

Nicht wirklich - das zeigt nur was ich oben schon beschrieben habe.

So wie value definiert ist, gehört es zu der update Funktion. Wenn nun ein neues Paket kommt wird eine "neue" Update Funktion aufgerufen - und die hat keinen Zugriff auf das value der "alten" Instanz.

Als Du value nun global definiert hattest, wurde folglich dieses Problem gelöst - aber mit dem Problem der globalen Variablen.

Als Zwischen"lösung" könntest Du nun das value zumindest "lokal-global" zu dem Plugin machen und innerhalb der define() Funktion definieren.
Das wird so lange gut gehen bis jemand auf die Idee kommt zwei oder mehr der audio Widgets zu verwenden...

Wie oben schon geschrieben, würde ich das nicht über value lösen, sondern über intervallID. Und die dem HTML-Element per data() zuordnen.

(Übrigens: keine Scheu davor und vor jQuery. Im Plugin scheinst Du das ja vermeiden zu wollen...)

[jensgulow]

Ich werde es probieren (heute aber nicht mehr ) und berichte dann weiter!

[jensgulow]

So, wie besprochen ein Zwischenbericht: aktuell funktioniert es (eine Einschränkung gibt es noch - weiter unten)

Ich habe intervalID weiter "oben" gespeichert:

basicdesign.addCreator('audio', {
  create: function( element, path, flavour, type ) {
    var $e = $(element);
    // create the main structure
    var ret_val = basicdesign.createDefaultWidget( 'audio', $e, path, flavour, type, this.update);
    // and fill in widget specific data
    ret_val.data( {
      'src'     : $e.attr('src'),
      'id'      : $e.attr('id'),
      'width'   : $e.attr('width'),
      'height'  : $e.attr('height'),
      'autoplay': $e.attr('autoplay'),
      'loop'    : $e.attr('loop'),
      'count'    : $e.attr('count'),
      'interval'    : $e.attr('interval'),
[B][COLOR=Red]      'intervalID'    : "",[/COLOR][/B]
      'threshold_value'  : $e.attr('threshold_value' ) || 1
    } );
    var data = ret_val.data();

weiter unten in der update-function sieht es jetzt so aus:

  update: function(e,d) {
    var element = $(this);
    var data    = element.data();
    [B][COLOR=Red]var intervalID = data.intervalID;[/COLOR][/B]
    var actor   = element.find('.actor');
    var value = basicdesign.defaultUpdate( e, d, element, true );
    var on = templateEngine.map( data[ 'threshold_value' ], data['mapping'] );
    if (value >= on){
        var maxcount = data.count;
        var interval = data.interval;
        var audioWidget = document.getElementById(data['id']);
        if (audioWidget.paused == true){
            audioWidget.play();
            if (maxcount && interval) {
            var numOfCalls = 0;
                intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
                if (numOfCalls == maxcount-1) clearInterval(intervalID);
                [B][COLOR=Red]data.intervalID = intervalID;[/COLOR][/B]
                } 
                , interval);
            }
        }
    };

    if (value < on){
    var audioWidget = document.getElementById(data['id']);
    audioWidget.pause();
    [B][COLOR=Red]if (intervalID != '') clearInterval(intervalID);[/COLOR][/B]
    };
  }

Aufruf in der visu_config.xml:

        <audio src="media/wama_fertig.mp3" threshold_value="1" autoplay="false" loop="false" id="Jens" count="5" interval="5000">
            <address transform="DPT:1.001" mode="readwrite" variant="">1/1/30</address>
        </audio>

Führt nun dazu, dass beim Eintreffen eines Wertes >threshold auf die benannte GA das audio-widget gestartet wird. Sind hier "count" und "interval" nicht definiert, so wird die Datei "normal" abgespielt. Sind count="x" und interval="y" angegeben, so wird die Datei x-mal alle y Millisekunden gestartet (Achtung bei langen Dateien - das Interval muss schon länger sein als die Dateilänge, denn Pause= interval-Dateilänge!). Wird während dieser Abspielprozedur ein Wert < threshold auf die GA gesendet, so wird das ganze abgebrochen.

So weit so gut. Aber ... damit beim Eintreffen auf der GA sofort die Datei abgespielt wird existiert dieses Konstrukt:

        if (audioWidget.paused == true){
            [COLOR=Red]audioWidget.play();[/COLOR]
            if (maxcount && interval) {
            var numOfCalls = 0;
               [COLOR=Red] intervalID = setInterval(function () {
                audioWidget.play();
                numOfCalls = numOfCalls + 1 ;
                if (numOfCalls == maxcount-1) clearInterval(intervalID);
                data.intervalID = intervalID;
                } 
                , interval);[/COLOR]
            }
        }

d.h. es wird einmal die Datei abgespielt, dann "greift" setinterval und nach y Millisekunden wird die Datei das nächste mal abgespielt. Läßt man das erste audioWidget.play(); weg, dann dauert es nach Eintreffen eines Wertes auf der GA erst einmal y Millisekunden bevor die Audiodatei das erste mal abgespielt wird (und das wollte ich nicht).

Aber... wenn man nun nach dem ersten Abspielen der Datei einen Wert < threshold auf die GA sendet, dann ist offensichtlich setinterval noch nicht "initiiert", intervalID existiert noch nicht ...... und dann kann die Wiedergabe so nicht abgebrochen werden . Dafür ist mir noch nichts eingefallen.

Für Verbesserungen oder Lösungsvorschläge bin ich dankbar!

[Chris M.]

Ich bin jetzt mal ehrlich: im Code wird für mich gerade zu viel "rumgezwirbelt".
Der ist vermutlich noch deutlich komplizierter als er sein müsste und versteckt sich daher bisschen (und wird außerdem dadurch noch Fehleranfällig).

Da Du eh mitzählst wie oft Du Dich schon aufgerufen hast, ein Vorschlag:
Gehe mal auf setTimeout() - und beachste, dass die Funktionssignatur neben der Funktion und den Millisekunden noch beliebig viele weitere Parameter aufnehmen kann. Diese werden dann zu Aufrufparametern der Funktion.
In diesen Parametern könntest Du z.B. die Zahl der noch aufzuführenden Widerholungen übergeben.

Die Funktion könnte dann immer im aktuellen value des Widgets nachsehen und bei entsprechendem Wert sich halt eben nicht mehr selbst aufrufen.

In halben Pseudo-Code:

 update: function(e,d) {
  // internal helper function
  function play( amountLeft )
  {
    if( data.value < data.threshold_value )
      return; // nothing to do anymore

    audioWidget.play();
    if( amountLeft > 0 )
      setTimeout( play, data.interval, amountLeft - 1 );
  }

  // ...
  data.value = ...;

  // this will play up to data.count times and only when threshold is fullfilled
  play( data.count );
}

[Ziegelstein]

Hallo Freunde des Audio-Widgets!

Was darf ich denn hier angeben? :

src -> hier wird der Pfad zur abzuspielenden Audiodatei angegen.Datei kann irgendwo im Heimnetz liegen?? oder auf dem WG? wie ist in beiden Fällen der Pfad korrekt anzugeben?


id -> Angabe einer id als Freitext. Wird benötigt um ..tbd.



threshold_value -> Grenzwert der Angibt, wie oft die Datei abgespielt werden soll?

width -> größe des Widgets in px

height -> größe des Widgets in px
volume -> Lautstärke in ?? laut, leise, brüllen? oder in Zahlen 1-10??


autoplay -> ??
.
loop -> vordefinierte Anzahl an Abspielwiederholungen? Ganze Zahlen 1 - ..


flavour -> complexe Einstellung / Design-Option...Farbenbezeichnungen - welche gingen für flavour?



Danke und Grüße - auch an den Weihnachtsmann!

[Chris M.]

src -> hier wird der Pfad zur abzuspielenden Audiodatei angegen.Datei kann irgendwo im Heimnetz liegen?? oder auf dem WG? wie ist in beiden Fällen der Pfad korrekt anzugeben?

Das ist eine klassische URL - der Wert wird einfach 1:1 an das <audio> Element weitergereicht, d.h. alles was der HTML-Standard erlaubt ist hier möglich.

id -> Angabe einer id als Freitext. Wird benötigt um ..tbd.

um per KNX Telegramm den Sound abspielen zu können.

threshold_value -> Grenzwert der Angibt, wie oft die Datei abgespielt werden soll?

Nein, das ist der Wert den das KNX Telegram überschreiten muss um den Sound abspielen zu lassen (s.o.)

Beispiel: setze den Threshold auf 25 (°C) und die GA auf einen Temperatursensor. Wenn's dann im Raum zu warm wird, kann die Visu "Mir ist warm" abspielen :P

width -> größe des Widgets in px

height -> größe des Widgets in px

Jain. Nicht in "px" sondern in der Größe die in diesem Wert angegeben wurde. Alls was CSS erlaubt. Also auch "em", "%", "mm", ...

volume -> Lautstärke in ?? laut, leise, brüllen? oder in Zahlen 1-10??

Finde ich im Code nicht - glaube daher nicht, dass es das gibt...

autoplay -> ??
.

Wird quasi an das HTML <audio> Element durchgereicht.
Ich vermute, dass der Sound mit laden sofort abgespielt wird.

loop -> vordefinierte Anzahl an Abspielwiederholungen? Ganze Zahlen 1 - ..

Da dürfte als Wert nur "true" gehen - und der bedeutet dass der Sound wiederholt wird. Beliebig lange.

flavour -> complexe Einstellung / Design-Option...Farbenbezeichnungen - welche gingen für flavour?

Alle erlaubten flavours - so wie bei allen anderen Widgets auch.

[Ziegelstein]

also dass mit der ID verstehe ich gar nicht.

wenn wir hier als Beispei ne GA mit den Temp. Daten verknüpfen..
und wir mit dem threshold_value arbeiten.. und src auch ordentlich ausgefüllt haben .. dann liegen doch alle infos vor um das audio-file abzuspielen.

An welcher stelle soll denn dann eine ID vom Bus kommen..
Brauchen wir dann noch eine seperate GA mit DPT 16... die Temp.GA mit DPT 9 kann doch nicht noch ne ID liefern??


ergänzend mein Verständnis zu
threshold_value:

Wenn die GA nur DPT1 ist: dann kann hier nur ne 0 stehen. kommt dann die 1 ist die 1 über dem grenzwert 0 und der Sound geht los.

Wenn die GA DBP 9 liefert - und wir hier die 21 eingeben, vom Bus und dieser GA ne 21,1 kommt - geht der Sound los..

Richtig-oder?