Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[liv-in-sky]

@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

[Larson-Sei180LX]

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

[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

[Larson-Sei180LX]

@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>"
                                                };

[Larson-Sei180LX]

@oliverio

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

[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)

[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()
});

[OliverIO]

@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()
});

[Larson-Sei180LX]

@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]

@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

[Larson-Sei180LX]

@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 :)?

[Larson-Sei180LX]

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

[Larson-Sei180LX]

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 ?

[OliverIO]

@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

[Larson-Sei180LX]

@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]

@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

[Larson-Sei180LX]

@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]

@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

[Larson-Sei180LX]

@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?

[Larson-Sei180LX]

@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.