[gelöst] Tastenklick im HTML eingebettet?

[Pete37]

Hallo Forum,

ich möchte gerne Tastenklicks mit Audio-Dateien realisieren und stoße dabei auf seltsame Phänomene. Vielleicht hat jemand von Euch das auch gehabt und eine Lösung dazu?

Aktuell benutze ich ein Android-Tablet mit der Fully-App. Daher kann ich das Tablet direkt anweisen, eine auf dem Tablet hinterlegte Audiodatei abzuspielen. Das funktioniert auch, hat aber erhebliche Verzögerungszeiten. Zum Teil mehrere Sekunden, bevor der Klang abgespielt wird.
> einfach umzusetzen, unbefriedigend im Ergebnis

Deshalb experimentiere ich gerade mit einer als HTMLCode eingebetteten Datei, die ich dann per "trigger WEB JS:..." aufrufe. Das funktioniert hervorragend am Laptop. Reagiert sehr schnell und der Laptop spielt den Klang ab, also die Webseite, die den Trigger auch gestartet hat. ABER: Drücke ich diese Taste auf dem Tablet, spielt AUCH der Laptop die Datei ab. Das Tablet bleibt stumm. Hat der Laptop die Webseite (FLOORPLAN) nicht offen, so bleiben alle stumm.
> auch einfach umzusetzen, überraschend im Ergebnis

Die Audio-Datei habe ich so eingebunden:

Code Auswählen Erweitern

define SND_VIS_Beep1 weblink htmlCode <audio name=SND_VIS_Beep1 src="/fhem/images/default/lcars/sounds/1BEEP.WAV" type="audio/wav"></audio>"


Der Aufruf erfolgt dann so:

Code Auswählen Erweitern

trigger WEB JS:document.getElementsByName("SND_VIS_Beep1")[0].play()

Hat jemand eine Erklärung für dieses Verhalten? Besser sogar Abhilfe?

[Pete37]

Ich habe inzwischen selber eine Lösung gefunden - zumindest eine halbe. Vielleicht kann mir jemand helfen, die zu einer Ganzen zu machen?

Ziel ist, dass bei jedem Drücken auf einen Knopf (in der Regel Dummies) sofort ein Beep-Sound abgespielt wird und das ohne einen Fhem-Automatismus (DOIF oder Notify) bemühen zu müssen, weil das dauert zu lange.

Ich habe jetzt folgende zwei Varianten als JavaScript in die Floorplans integriert:

Variante 1:

Code Auswählen Erweitern


$(document).ready(function(){
  var sound = new Audio('Pfad/zu/meinem/Beepsound');
  $('div[title="tap"]').click(function(){
    sound.play();
  });
});
Die funktioniert für jeden Knopf genau ein mal nach einem Page-Reload. Danach nicht mehr. Nach einem erneuten Reload, dann wieder genau ein mal.
Ich vermute, das hängt damit zusammen, dass ich nach dem "title"-Attribut filtere, das für das Mouse-Over ist, und das funktioniert andernorts auch oftmals nur einmalig.

Variante 2:

Code Auswählen Erweitern


$(document).ready(function(){
  var sound = new Audio('Pfad/zu/meinem/Beepsound');
  $('.fp_device_div').click(function(){
    sound.play();
  });
});
Die funktioniert ohne Limit, allerdings für alles auf dem Floorplan und eben nicht nur für die Knöpfe.

Mein Wunsch wäre genau dazwischen: Für alle klickbaren Elemente und nur für die, aber dann ohne Limit.

Gibt es eine Eigenschaft, die bei allen klickbaren Elementen gleich ist, nach der ich filtern könnte?
Oder kann ich mir diese Eigentschaft durch ein custom-Attribut vielleicht erzeugen?
Oder weiß jemand, wie ich alle "tap"-Events abfangen kann? ("tab" ist der Zustand meiner Dummies, wenn ich draufgedrückt habe)

[mchilli]

Hey ich schätze mal das Problem liegt darin, das der "click-handler" weg ist nachdem du auf den Dummy gedrückt hast und somit das DOM neu geschrieben wurde.

Versuch mal den Handler an ein statisches Element zu binden, zb. "body". Dadurch bleibt er erhalten auch wenn das DOM ersetzt wird.

Als Beispiel:

Code Auswählen Erweitern


$(document).ready(function(){
  var sound = new Audio('Pfad/zu/deinem/Beepsound');
  $('body').on('click', 'div[title="tap"]', function () {
     sound.play();
  });
});


[Pete37]

Oh, sehr schön!

Das funktioniert ja großartig, vielen Dank!!