Implementierung der Audiowiedergabe von dynamischem Text in Tabnode-red und der Anzeige von Polling-Schleife

Hintergrund

Als Bloggerin, die Node-RED untersucht, bekomme ich oft Nachrichten von Lesern, die mich nach Lösungen für einige Probleme fragen.
In diesem Artikel werden zwei typische Probleme behandelt, die in letzter Zeit aufgetreten sind. Analysieren Sie es, und jeder kann lernen.
Es gibt zwei Fragen:
1: Wie implementiere ich die Wiedergabe von dynamischem Text in Node-red, um Systemaudio aufzurufen?
2: Wie realisieren Sie die 3 - Tab-Schleife im Dashboard?

Problembeschreibung

Das erste Problem besteht darin, die Audio-Hardware des aufrufenden Systems zur Wiedergabe dynamischer Inhalte zu verwenden, ein häufiges Szenario, das beispielsweise eine zu hohe Temperatur eines Geräts erkannt hat und die Audio-Alarm des Geräts wiedergegeben wird, nachdem Node-RED einen Alarm des Geräts empfangen hat. Zum Beispiel: "Ein Gerät A ist zu hoch, bitte rechtzeitig behandeln".
Die Übertragung von Informationen durch Audio-Wiedergabe ist viel mehr als die Realität, die ständig auf den Computerbildschirm starrt.
Dieses Problem ist nicht schwer zu lösen, wenn es sich um eine Audiodatei handelt, in HTML verwenden wir Audio, um Audio abzuspielen, solange Ihr Computer ein Wiedergabegerät hat, kann es Ton geben.
Hier geht es darum, einen Text zu übertragen. Eine Zeichenkette oder eine numerische Variable. Dafür muss man die Informationen überprüfen.

Das zweite Problem, wenn wir das Dashboard verwenden, um eine große Bildschirmanzeige zu erstellen. Manchmal gibt es mehrere Tabs, die für die Kategorierung von Inhalten verwendet werden, und die Seite kann nur eine Tab gleichzeitig anzeigen. Dies erfordert einen Mechanismus, der jede Tab wiederholt zeigt, damit der Besucher die vollständigen Informationen erhalten kann. Alle fünf Sekunden wechseln Sie zum nächsten Tab. Das Problem ist schwieriger, dass es in node-red nicht möglich ist, die Tab-Schaltung zu steuern, und der Dashboard-Knoten zeigt nicht die entsprechende Konfiguration, die uns sagt, dass die Tab derzeit angezeigt ist, wie man zu einem bestimmten Tab springt.

Wie in der folgenden Abbildung, gibt es mehrere Tabs in einem Dashboard.

Implementierungsideen

Die erste Frage, die benötigt wird, ist die JavaScript-API, die für
speechSynthesis与SpeechSynthesisUtterance

Webseite Voice-API verwendet wird.SpeechSynthesis Die Schnittstelle ist die Steuerungsschnittstelle für den Sprachdienst; sie kann verwendet werden, um Informationen über die verfügbaren synthetischen Töne auf dem Gerät zu erhalten, um Sprache zu starten, zu pausieren oder andere Befehle zu geben.

Das SpeechSynthesisUtterance-Objekt ist für die Erstellung von synthetischen Sounds erforderlich.
Mit ihm können Sie einen synthetischen Sound erstellen, die Variablen verwenden können, um die restlichen Geschwindigkeit, Sprache, Lautstärke und andere Eigenschaften der Synthese zu steuern.
Hier ein sehr einfaches Beispiel.

const synth = window.speechSynthesis
const u = new SpeechSynthesisUtterance()
u.lang = 'zh-CN'
u.rate = 1
u.text = '桂花香'
synth.speak(u)

Dies ist die Antwort auf die erste Frage, von welchem Upstream-Inhalt übergeben wird, wenn wir dynamische Inhalte abspielen möchten, können wir die Vorlage verwenden, um die upstream-MSG zu hören und die dynamische Inhalte in der Rückruffunktion abzuspielen.
Wie folgt

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      const synth = window.speechSynthesis
      const u = new SpeechSynthesisUtterance()
      u.lang = 'zh-CN'
      u.rate = 1
      u.text = 'msg.payload'
      synth.speak(u)
    }
  });
})(scope);
</script>

Das zweite Problem, nach der Suche nach Daten Dashboard hat es keine relevanten Daten, aber beim Wechsel Tab habe ich festgestellt, dass sich ein Teil der URL der Seite geändert hat, genauer gesagt, der Hash-Teil, mit dem Wechsel Tab.
Das bedeutet, dass wir die aktuelle Seite umleiten, die URL ändern, um die gewünschte Tab anzuzeigen.

Im Template-Knoten in einem Tab müssen wir nur regelmäßig zum nächsten Tab springen, um eine Schleife zu bilden.
wie folgt

<script>
  setTimeout(()=> {
      location.href = './#!/1'
  }, 2000)
</script>

Vollständiger Code

[{"id":"a3cac8fa89348ff4","type":"tab","label":"流程 1","disabled":false,"info":""},{"id":"ea401302bd11e20a","type":"inject","z":"a3cac8fa89348ff4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":200,"y":120,"wires":[["1ed565c47e882d78","05df5da79857332c","96fef40df595e471"]]},{"id":"1ed565c47e882d78","type":"ui_template","z":"a3cac8fa89348ff4","group":"cbb46b0d06d43956","name":"Tab1","order":2,"width":0,"height":0,"format":"tab1n<script>n    (function(scope) {n    scope.$watch('msg', function(msg) {n        if (msg) {n        const synth = window.speechSynthesisn        const u = new SpeechSynthesisUtterance()n        u.lang = 'zh-CN'n        u.rate = 1n        u.text = 'msg.payload'n        synth.speak(u)n        }n    });n})(scope);n    setTimeout(()=> {n        location.href = './#!/1'n    }, 2000)n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":120,"wires":[[]]},{"id":"05df5da79857332c","type":"ui_template","z":"a3cac8fa89348ff4","group":"13f004c6b59bc839","name":"Tab2","order":0,"width":0,"height":0,"format":"tab2n<script>n    setTimeout(()=> {n        location.href = './#!/2'n    }, 2000)n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":220,"wires":[[]]},{"id":"96fef40df595e471","type":"ui_template","z":"a3cac8fa89348ff4","group":"f8c018c8eb60cd75","name":"Tab3","order":1,"width":0,"height":0,"format":"tab3n<script>n    setTimeout(()=> {n        location.href = './#!/0'n    }, 2000)n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":320,"wires":[[]]},{"id":"cbb46b0d06d43956","type":"ui_group","name":"g1","tab":"d00f486ab56bd2ee","order":1,"disp":true,"width":"6","collapse":false},{"id":"13f004c6b59bc839","type":"ui_group","name":"g2","tab":"84ef8f9a5d83da7d","order":1,"disp":true,"width":"6","collapse":false},{"id":"f8c018c8eb60cd75","type":"ui_group","name":"Default","tab":"d2e2e3a672a99ef1","order":1,"disp":true,"width":"6","collapse":false},{"id":"d00f486ab56bd2ee","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"84ef8f9a5d83da7d","type":"ui_tab","name":"Home2","icon":"dashboard","disabled":false,"hidden":false},{"id":"d2e2e3a672a99ef1","type":"ui_tab","name":"Home3","icon":"dashboard","disabled":false,"hidden":false}]

Zusammenfassung

Wenn Sie Probleme haben, sollten Sie gut darin sein, Dokumente zu lesen, bevorzugen Sie offizielle Dokumente, wenn Sie offiziell nicht haben, müssen Sie die Suchmaschine gut nutzen, schließlich müssen Sie scharfe Beobachtung hinzufügen, um die Verbindung zwischen den Dingen zu verstehen, um das unwirrende Reich zu erreichen.

Relative Links

SpeechSynthesis

SpeechSynthesisUtterance