Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. Tabelle JSON -> HTML - Link Abspielen WAV Datei am Tablet

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Tabelle JSON -> HTML - Link Abspielen WAV Datei am Tablet

    This topic has been deleted. Only users with topic management privileges can see it.
    • liv-in-sky
      liv-in-sky @Larson-Sei180LX last edited by

      @larson-sei180lx

      bin mir nicht ganz sicher:

      du wirst evtl einen audioplayer in die vis einbauen müssen - ansonsten wird vielleicht die vis im browser verlassen, um das file aufzurufen

      vielleicht wäre eine lösung mit dem sayit adapter möglich https://github.com/ioBroker/ioBroker.sayit

      ich habe leider im momentan nicht die zeit etwas umzuprogrammieren, da es mir auch zu aufwendig erscheint, dass ganze nebenbei zu machen

      ps: deine zeilenangabe weißt darauf hin (wo "etwas" geschrieben wird), dass du den firefox beim kopieren des scriptes genutzt hast - der fügt teilweise leerzeichen ein - um scripte zu kopieren nimm lieber chrome

      L 1 Reply Last reply Reply Quote 0
      • L
        Larson-Sei180LX @liv-in-sky last edited by

        @liv-in-sky
        Danke trotzdem, vl meldet sich ja noch jemand, da ich in JS wirklich blank bin.

        1 Reply Last reply Reply Quote 0
        • OliverIO
          OliverIO @Larson-Sei180LX last edited by OliverIO

          @larson-sei180lx sagte in Tabelle JSON -> HTML - Link Abspielen WAV Datei am Tablet:

          Da das Format JSON wohl (zumindest mir nicht bekannt) nicht für einen Link geeignet ist

          du kannst als value-wert auch direkt html eintragen.
          ich habe das soeben mit dem test-json mal ausprobiert

          [{"Title": "first", "Value": "<a href=\"https://www.google.de\">abc</a>", "_Description": "Value1"}, {"Title": "second", "Value": 2, "_Description": "Value2"}]
          

          du musst nur darauf achten, das du die Anführungsstriche die innterhalb der value vorkommen mit einem backslash escapest

          um dann eine mp3 abspielen zu lassen, kannst du dann die normalen anweisungen für html anwenden, indem du als value ein audio-tag einträgst.
          https://www.w3schools.com/html/html5_audio.asp
          als audio src trägst du den link zu deiner mp3 ein, so das der browser sie auch erreichen kann. dazu musst du die datei dem iobroker webserver bekannt machen.
          https://www.smarthome-tricks.de/software-iobroker/bilder-in-iobroker-ueber-vis-im-netzwerk-verfuegbar-machen/#:~:text=Alternativ einfach auf das Feld,in der Datei- und Ordnerauswahl.

          nicht irritieren lassen das es hier um bilder geht. das selbe gilt auch für sound-dateien. dem server ist es egal was für typ von datei da liegt

          L 2 Replies Last reply Reply Quote 0
          • L
            Larson-Sei180LX @OliverIO last edited by

            @oliverio said in Tabelle JSON -> HTML - Link Abspielen WAV Datei am Tablet:

            "<a href="https://www.google.de">abc</a>"

            Ich habe mal versucht das MAIN.JS file anzupassen....

            Meinst du das dann so?

                                                          var msg = {
                                                                index: message.Index[0],
                                                                calledNumber: message.Called[0],
                                                                date: message.Date[0],
                                                                duration: message.Duration[0],
                                                                callerName: message.Name[0],
                                                                callerNumber: message.Number[0],
                                                                audioFile: "<a href=\"''">Link zum File</a>"
                                                            };
            
            1 Reply Last reply Reply Quote 0
            • L
              Larson-Sei180LX @OliverIO last edited by

              @oliverio

              Ich bin gerade echt bisschen überfordert... Kannst Du mir vl Unterstützung bei dem File geben, wie es am Ende aussehen muss ?

              OliverIO 2 Replies Last reply Reply Quote 0
              • OliverIO
                OliverIO @Larson-Sei180LX last edited by OliverIO

                @larson-sei180lx

                ja, allerdings war der link tag nur ein beispiel, den du selber schnell ausprobieren kannst, das man da auch direkt html reinschreiben kann.
                um audio im browser abspielen zu können musst du den audio-tag verwenden.

                da ich jetzt nicht weiß wo deine dateien liegen, muss man evtl den folgenden code noch etwas anpassen, siehe kommentar.
                das deine wav datei für den browser abrufbar ist, kannst du testen in dem du den link direkt in den browser einträgst, der muss dann unter audioFile in den audio tag eingetragen werden.
                schau dir am besten mal die beispiele bei wwwschools an.

                var datei = "file.wav" // entweder hier den dateinamen zuweisen oder deine variable weiter unten anpassen, es sollte aber nicht der komplette pfad drin stehen, sondern nur der pfad unterhalb von /vis.0/"
                var audio = `
                <audio controls>
                  <source src="/vis.0/`+datei+`" type="audio/wav">
                Your browser does not support the audio element.
                </audio>
                `;
                var msg = {
                                                                    index: message.Index[0],
                                                                    calledNumber: message.Called[0],
                                                                    date: message.Date[0],
                                                                    duration: message.Duration[0],
                                                                    callerName: message.Name[0],
                                                                    callerNumber: message.Number[0],
                                                                    audioFile: audio
                                                                };
                

                damit es lesbarer ist, habe ich für den string backticks vertwendet. da muss man die anführungsstriche auch nicht escapen

                mit den web developer tools kannst du schauen, wie das html dann genau im browser ankommt (F12 im edge, chrome und firefox)

                1 Reply Last reply Reply Quote 0
                • OliverIO
                  OliverIO last edited by OliverIO

                  @larson-sei180lx

                  hier mal noch eine Lösung, wie du die Dateien in den webserver hochgeladen bekommst

                  const chokidar = require('chokidar'); //bibliothek zur Überwachung von Verzeichnissen und Dateien. chokidar muss in den adapter einstellungen für javascript als zusätzliches npm modul eingetragen werden
                  const fs = require('fs');
                  const nodepath = require('node:path')
                  
                  const watchpath  = "/opt/iobroker/node_modules/iobroker.fritzbox/tam/"; //verzeichnisname der überwacht werden soll
                  const vispath    = "/anrufbeantworter/"; //verzeichnisname unter dem du dann die dateien im browser abrufen kannst 
                  //bspw dann 
                  // /opt/iobroker/node_modules/iobroker.fritzbox/tam/1505232225-097654321.wav
                  //kann als
                  // ipiobroker:8081/anrufbeantworter/1505232225-097654321.wav
                  // abgerufen werden. das ist dann auch der name, den du in dein json-table datenpunkt reinschreibst
                  
                  //code zur überwachung. vgl dokumentation von chokidar
                  //der code wird aufgerufen, falls im überwachten verzeichnis eine datei hinzugefügt wird.
                  const watcher = chokidar.watch(watchpath).on("add", async (path) => {
                    log(path); //hier wird in der console dann der pfad ausgegeben, welche datei hinzugefügt wurde
                    var data = fs.readFileSync(path); //lesen des dateiinhalts
                    writeFile('vis.0', vispath+nodepath.basename(path), data, function (error) { //hochladen des dateiinhalts und definition des neuen dateinamens
                        console.log('file written'); //optionale ausgabe in die console
                    });
                  });
                  
                  //wichtig, damit die überwachung des verzeichnisses auch bei beenden des skripts wieder angehalten wird. ansonsten multiplizieren sich die ereignisse mit jedem neuen start des skripts
                  onStop (function(){
                      watcher.close()
                  });
                  
                  
                  
                  1 Reply Last reply Reply Quote 0
                  • OliverIO
                    OliverIO @Larson-Sei180LX last edited by

                    @larson-sei180lx

                    hier noch eine kleine erweiterung, das die dateien aus dem webspace wieder gelöscht werden, wenn sie im überwachten verzeichnis ebenfalls gelöscht werden

                    const chokidar = require('chokidar');
                    const fs = require('fs');
                    const nodepath = require('node:path')
                    
                    const watchpath  = "/opt/iobroker/node_modules/iobroker.fritzbox/tam/";
                    const vispath    = "/anrufbeantworter/";
                    
                    // One-liner for current directory
                    const watcher = chokidar.watch(watchpath).on("add", async (path) => {
                      log("add "+path);
                      var data = fs.readFileSync(path);
                      writeFile('vis.0', vispath+nodepath.basename(path), data, function (error) {
                          console.log('file written');
                      });
                    }).on("unlink", async (path) => {
                      log("del "+path);
                      delFile("vis.0", vispath+nodepath.basename(path), function (error) {
                          console.log('file deleted');
                      });
                    });
                    onStop (function(){
                        watcher.close()
                    });
                    
                    
                    L 1 Reply Last reply Reply Quote 0
                    • L
                      Larson-Sei180LX @OliverIO last edited by

                      @oliverio

                      Vielen lieben Dank. Ich glaube so langsam bekomme ich das hin. Habe gestern schon einiges mit deinen Informationen gespielt. Wenn ich "durch" bin poste ich hier das Ergebnis!

                      OliverIO 1 Reply Last reply Reply Quote 0
                      • OliverIO
                        OliverIO @Larson-Sei180LX last edited by OliverIO

                        @larson-sei180lx
                        wenn du fragen hast, dann gerne.
                        hab das alles nicht im detail ausprobiert.
                        aber vom prinzip müsste es klappen

                        bin mir sicher daran sind auch andere interessiert
                        wäre wahrscheinlich auch eine idee das in den adapter als widget zu integrieren
                        aber das muss der original Autor machen

                        L 1 Reply Last reply Reply Quote 0
                        • L
                          Larson-Sei180LX @OliverIO last edited by

                          @oliverio

                          Ich war echt kurz vor dem Ziel.... er synchronisiert mir auch schon die Dateien....aber !!!!
                          Er löscht mir das File auch gleich wieder...

                          Das liegt wahrscheinlich daran, dass ich diese HTML Tags geschrieben habe. Und dadurch, dass er hinterher auch alte Dateien bereinigt, findet er das passende File nicht.
                          Kannst Du mir noch mal helfen ? Ich poste mal den Bereich, wo das alles im Main.JS passiert und was ich bisher angepasst habe.

                          function getTAM(host, user, password) {
                              connectToTR064(host, user, password, function (sslDev) {
                                  var tam = sslDev.services["urn:dslforum-org:service:X_AVM-DE_TAM:1"];
                                  adapter.log.debug("TR-064: Calling GetMessageList()");
                                  tam.actions.GetMessageList({NewIndex: 0}, function(err, ret) {
                                      if (err) {
                                          adapter.log.warn("TR-064: Error while calling GetMessageList(): " + err);
                                      } else if (ret.NewURL && ret.NewURL.length > 0) {
                                          var url = ret.NewURL;
                                          adapter.log.debug("TR-064: Got TAM uri: " + url);
                                          var baseUrl = url.substring(0, url.lastIndexOf('/'));
                                          var sid = url.match(/sid=([\d\w]+)/)[1];
                                          adapter.log.debug(`TR-064: sid=${sid}`);
                          
                                          var agentOptions;
                          				var agent;
                          
                          				agentOptions = {
                          				  rejectUnauthorized: false
                          				};
                          
                          				agent = new https.Agent(agentOptions);
                          
                                          request({
                          				  url: url
                          				, method: 'GET'
                          				, agent: agent
                          				}, function (error, response, body) {
                                              if (!error && response.statusCode == 200) {
                                                  adapter.log.debug("TR-064: Got valid TAM content from, starting to parse ...");
                                                  var parser = new xml2js.Parser();
                                                  parser.parseString(body, function (err, result) {
                                                      if (err) {
                                                          adapter.log.warn("TR-064: Error while parsing TAM content: " + err);
                                                      } else {
                                                          adapter.log.debug("TR-064: Successfully parsed TAM content, analyzing result ...");
                                                          var promises = [];
                                                          var messages = [];
                          
                                                          mkdirSync('tam', { recursive: true });
                          
                                                          if(!result.Root.Message) {
                                                              // No messahes
                                                              promises.push(new Promise((resolve, reject) => resolve()));
                                                          } else {
                                                              for (var m = 0; m <= result.Root.Message.length; m++) {
                                                                  var message = result.Root.Message[m];
                                                                  if (typeof message != 'undefined') {
                                                                      promises.push(new Promise((resolve, reject) => {
                                                                          var msg = {
                                                                              index: message.Index[0],
                                                                              calledNumber: message.Called[0],
                                                                              date: message.Date[0],
                                                                              duration: message.Duration[0],
                                                                              callerName: message.Name[0],
                                                                              callerNumber: message.Number[0],
                                                                              audioFile: ''
                                                                            //  audioLink: ''
                          						};
                                                                          if (!message.Path || message.Path.length < 1) {
                                                                              adapter.log.warn("TR-064: TAM message has no url");
                                                                              resolve(msg);
                                                                              return;
                                                                          }
                          
                                                                          var callDate = message.Date[0].split('.').join("").split(':').join("").split(' ').join("");
                                                                          var file = `tam/${callDate}-${message.Number[0]}.wav`
                                                                          adapter.log.debug(`TR-064: TAM message file: ${file}`);
                                                                          if (existsSync(file)) {
                          						//	msg.audioFile = path.resolve(file);						   
                          						        msg.audioFile =`<audio id=&quot;AudioIndex`+message.Index+`&quot; src=&quot;vis.0/Audio/`+file+`&quot></audio><div><button oncklick=&quot;document.getElementById('AudioIndex`+message.Index+`').play()&quot;>&blacktriangleright;</button></div>`;
                          							resolve(msg);
                                                                              return;
                                                                          }
                          
                                                                          var downloadUrl = message.Path[0];
                                                                          if (downloadUrl.startsWith('/')) {
                                                                              downloadUrl = baseUrl + downloadUrl;
                                                                          }
                                                                          if (downloadUrl.indexOf('sid=')<0){
                                                                              downloadUrl += `&sid=${sid}`;
                                                                          }
                                                                          adapter.log.debug(`TR-064: Download TAM audio file from ${downloadUrl}`);
                          
                                                                          const stream = createWriteStream(file);
                                                                          request({url: downloadUrl, agent: agent})
                                                                              .on('error', function(err) {
                                                                                  unlink(file);
                                                                                  adapter.log.warn(
                                                                                      `TR-064: Error while downloading TAM audio file: ${err}`
                                                                                  );
                                                                              })
                                                                              .pipe(stream)
                                                                              .on('error', function(err) {
                                                                                  unlink(file);
                                                                                  adapter.log.warn(
                                                                                      `TR-064: Error while writing TAM audio file: ${err}`
                                                                                  );
                                                                              })
                                                                              .on('finish', function() {
                                                                                  stream.close(function() {  
                          						//	msg.audioFile = path.resolve(file);
                          						        msg.audioFile =`<audio id=&quot;AudioIndex`+message.Index+`&quot; src=&quot;vis.0/Audio/`+file+`&quot></audio><div><button oncklick=&quot;document.getElementById('AudioIndex`+message.Index+`').play()&quot;>&blacktriangleright;</button></div>`;
                          							resolve(msg);		
                                                                                  });
                                                                              });
                          
                                                                      }).then((result) => {
                                                                          messages.push(result);
                                                                      }));
                                                                  }
                                                              }
                                                          }
                          
                                                          Promise.all(promises).then(function() {
                                                              messages.sort((m1,m2) => m1.index > m2.index ? 1 : m1.index < m2.index ? -1 : 0);
                          
                                                              // cleanup old files
                                                              readdir('tam', (err, files) => {
                                                                  if (err) {
                                                                      adapter.log.warn(
                                                                          `TR-064: Error reading files from dir /tam: ${err}`
                                                                      );
                                                                  } else {
                                                                      files.forEach(file => {
                                                                          file = path.resolve("tam/" + file);
                                                                          if (!messages.find(msg => msg.audioFile == file)) {
                                                                              // old file
                                                                              adapter.log.debug(
                                                                                  `TR-064: Remove old tam audio file: ${file}`
                                                                              );
                                                                              unlink(file, function(err){
                                                                                  if (err) {
                                                                                      adapter.log.warn(
                                                                                          `TR-064: Error deleting file ${file}: ${err}`
                                                                                      );
                                                                                  }
                                                                              });
                                                                          }
                                                                      })
                                                                  }
                                                              })
                          
                                                              adapter.setState('tam.messagesJSON', JSON.stringify(messages), true);
                                                              adapter.log.debug("TR-064: Successfully analyzed TAM results");
                                                          });
                                                      }
                                                  });
                                              } else {
                          						adapter.log.warn(
                          							`TR-064: Error while requesting TAM: ${error}`
                          						);
                          					}
                                          });
                                      }
                                  });
                              });
                          }
                          

                          Ich habe Zeile 70 mit 71 getauscht und 102 mit 103. Ich glaube, das mit dem Cleanup der gelöschten AB Files (nachdem man Sie abgehört hat ) erfolgt in 127. Dort ist aber msg.Audiofile nicht gleich File....

                          verstehst du was ich laienhaft sagen will :)?

                          L OliverIO 2 Replies Last reply Reply Quote 0
                          • L
                            Larson-Sei180LX @Larson-Sei180LX last edited by

                            @larson-sei180lx
                            Achja, für " musste ich das als Sonderzeichen HTML nehmen, da er mir sonst immer ein \ vor jedes" gesetzt hat.

                            L 1 Reply Last reply Reply Quote 0
                            • L
                              Larson-Sei180LX @Larson-Sei180LX last edited by

                              Es gibt noch ein kleines Problem: Der Code, den du zum Hochladen nach VIS geschrieben hast, kopiert mir immer eine 0KB Datei. Ich vermute, dass der zu früh startet, bevor die Datei von der Fritzbox erstmal heruntergeladen ist. Das dauert oft ein bisschen habe ich gesehen.... Kann man da was verändern ?

                              1 Reply Last reply Reply Quote 0
                              • OliverIO
                                OliverIO @Larson-Sei180LX last edited by

                                @larson-sei180lx
                                Also für das löschen in 132 gibt es gar keine Bedingungen.
                                Daher löscht es einfach alle Dateien. Woran erkennst du das bereits angehört wurde?

                                Das verwenden von &quot ist falsch. Muss morgen mal probieren warum.

                                Das verfrühte hochladen könnte man vermeiden, das die Datei erst mal unter einer anderen Endung (bspw. .wav-upload ) angelegt wird und erst wenn es fertig ist dann auf .wav umbenannt wird. Das erzeugt dann bei chokidar verschiedene Ereignisse. Erst wenn die Datei auf .wav endet, wird dann hochgeladen. Aktuell horcht chokidar auf das Ereignis add, wahrscheinlich muss man es dann auf change ändern.
                                Hier die Doku
                                https://github.com/paulmillr/chokidar

                                L 1 Reply Last reply Reply Quote 0
                                • L
                                  Larson-Sei180LX @OliverIO last edited by

                                  @oliverio

                                  Durch den Adapter wird aus der Fritzbox immer wieder der gesamte AB-Bestand abgerufen. D.h., wenn das Script durchläuft, holt er von der Box die Audiofiles und schreibt sie neu. Solange ich die Zeilen belasse, wie im Ursprungsscript (Also ohne html Zusatz), bleiben die Dateien erhalten. Er gleicht da glaub aus der msg.audioFile ab, ob das File schon vorhanden ist und stimmig mit der JSON ist, die dann geschrieben wird. Jetzt sind natürlich durch das Verändern der msg.audioFile auf VIS-Notwendigkeit andere Pfade hinterlegt...

                                  Wenn in der Fritzbox die NAchricht gelöscht wurde, lädt er auch das File nicht mehr hoch und schreibt auch keine msg mehr für den Eintrag.

                                  mit dem " bin ich gestern auch weitergekommen. Ich habe jetzt einfach mal ' genommen, damit gehts auch.

                                  OliverIO 1 Reply Last reply Reply Quote 0
                                  • OliverIO
                                    OliverIO @Larson-Sei180LX last edited by OliverIO

                                    @larson-sei180lx

                                    Wenn in der Fritzbox die NAchricht gelöscht wurde, lädt er auch das File nicht mehr hoch und schreibt auch keine msg mehr für den Eintrag

                                    Und wie löscht du die Dateien auf der FRITZ!Box?

                                    Schau dir bei Gelegenheit auch das mal mit an
                                    https://javascript.info/coding-style
                                    Insbesondere indents und nesting
                                    Nicht das du dadurcheinander kommst und dir unnötige Fehler einbaust

                                    L 1 Reply Last reply Reply Quote 0
                                    • L
                                      Larson-Sei180LX @OliverIO last edited by

                                      @oliverio
                                      Ich gebe an der Stelle erstmal auf. Habe es weder hinbekommen, die WAV richtig zu speichern, ich glaube da muss man lt der Doku vom chok.. etwas einfügen....

                                      Und das mit dem Umformeln werde ich vl. irgendwann mal durch ein Blocky veranlassen... Aber leider muss ich das noch üben.

                                      OliverIO 1 Reply Last reply Reply Quote 0
                                      • OliverIO
                                        OliverIO @Larson-Sei180LX last edited by

                                        @larson-sei180lx
                                        Ne nicht aufgeben.
                                        Stück für Stück die einzelnen Probleme lösen.
                                        Du hattest die wav Dateien doch schon an einer Stelle speichern können? Bzw wo liegt das Problem? Gibt es Fehlermeldungen?

                                        Mein Hinweis auf den codestyle bedeutete auch das dein
                                        Geposteter Code schon recht kompliziert und verschachtelt war.
                                        Lieber die einzelnen Aufgaben in einzelne Funktionen aufteilen und dann schön der Reihe nach aufrufen.
                                        Sonst zerhaut man sich gerade als Anfänger schnell wieder Sachen die schon mal funktioniert haben.

                                        Beschreib mal bis zu welcher Stelle alles funktioniert und wo dann genau die Probleme auftauchen. Poste auch den aktuelle Code nochmal

                                        L 1 Reply Last reply Reply Quote 0
                                        • L
                                          Larson-Sei180LX @OliverIO last edited by

                                          @oliverio

                                          Das ist sehr lieb, dass du dir so viele Mühe mit mir gibst. Vielen Dank dafür.

                                          Vielleicht fangen wir einmal damit an, dass wir erst mal die Daten richtig spiegeln, nachdem sie von der FRITZ!Box auf den Container geladen wurden. Sie sollen erst, nachdem sie fertig übertragen sind, in den Webserver übertragen werden. Das klappt leider noch nicht. Ich habe nur 0 Byte Dateien. Du hast mir den Hinweis gegeben, dass mit Chokidar möglicherweise auch Optionen möglich sind… da habe ich die Funktion awaitWriteFinish gefunden. Leider habe ich keinerlei Ahnung, wo ich die in deinem Code einbauen soll und ob das überhaupt dafür geeignet ist …

                                          Wie muss der Code lauten?

                                          L 1 Reply Last reply Reply Quote 0
                                          • L
                                            Larson-Sei180LX @Larson-Sei180LX last edited by

                                            @larson-sei180lx

                                            Der zweite Punkt liegt in den Audio Elements. Ich habe zwar mit dem Code hinbekommen, dass er mir ein Audioelement hinterlegt und auch eine Wave Datei abspielt, allerdings ist dieser Audio Player total unbrauchbar, da er viel zu groß ist. Ich bräuchte eigentlich nur eine Art play und stopp. Wie ich das bewerkstelligen kann, keine Ahnung.

                                            L 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            785
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            3
                                            30
                                            894
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo