Skip to content

Commit b7d9f2e

Browse files
Steve-MclSteve-Mcl
authored
Merge pull request #1894 from FlowFuse/1560-tts
Add TTS Support in audio node
2 parents f95df42 + 464a4fd commit b7d9f2e

File tree

12 files changed

+748
-137
lines changed

12 files changed

+748
-137
lines changed

‎docs/de/nodes/widgets/ui-audio.md‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
---
22
description: "Spielen Sie dynamisch Audiodateien mit ui-audio im Node-RED Dashboard 2.0 ab."
33
props:
4-
Gruppe: Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
4+
Mode: Wählen Sie zwischen Audioplayer (Abspielen von Audiodateien von einer URL) oder Text-zu-Sprache (Sprechen von Text mit den integrierten TTS-Funktionen des Browsers).
5+
Gruppe: Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird (nur Audioplayer).
6+
UI: Die UI (<code>ui-base</code>), zu der diese Seite hinzugefügt wird (nur TTS).
57
Größe: Steuert die Breite der Schaltfläche in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
68
Quelle:
7-
description: Die Quelle ist die URL, von der die Audiodatei abgerufen werden kann.
9+
description: Die Quelle ist die URL, von der die Audiodatei abgerufen werden kann (nur Audioplayer).
810
dynamic: true
911
Autoplay:
10-
description: Gibt an, ob die Audiodatei automatisch abgespielt wird.
12+
description: Gibt an, ob die Audiodatei automatisch abgespielt wird (nur Audioplayer).
1113
dynamic: true
1214
Schleife:
13-
description: Gibt an, ob das Audio in einer Schleife abgespielt werden soll, d.h. automatisch wieder von vorne beginnt, wenn es endet.
15+
description: Gibt an, ob das Audio in einer Schleife abgespielt werden soll, d.h. automatisch wieder von vorne beginnt, wenn es endet (nur Audioplayer).
1416
dynamic: true
1517
Stumm:
16-
description: Gibt an, ob das Audio stummgeschaltet sein soll.
18+
description: Gibt an, ob das Audio stummgeschaltet sein soll (nur Audioplayer).
1719
dynamic: true
20+
Stimme:
21+
description: Die Stimme, die für Text-zu-Sprache verwendet wird (nur TTS).
22+
dynamic: false
1823
controls:
1924
aktiviert:
2025
example: true | false
@@ -48,8 +53,49 @@ dynamic:
4853

4954
</TryDemo>
5055

51-
Fügt dem Dashboard einen Audioplayer hinzu.
52-
Der Audioplayer kann vom Benutzer oder durch Steuerungsnachrichten gesteuert werden.
56+
Fügt dem Dashboard Audiofunktionen hinzu.
57+
58+
## Modi
59+
60+
Sie können zwischen zwei Modi wählen: „Audioplayer“ und „Text-to-Speech“.
61+
62+
### Audioplayer
63+
Wenn Sie den Modus „Audioplayer“ wählen, zeigt der Knoten im Dashboard einen Audioplayer an, der Audiodateien von einer URL abspielen kann.
64+
Sie können die URL in der Knotenkonfiguration oder dynamisch über eingehende Nachrichten angeben (siehe „Dynamische Eigenschaften“ unten).
65+
Zusätzlich wird durch Senden einer Zeichenfolge „Nutzlast“ an den Knoten die Audioquelle auf diese Zeichenfolge eingestellt und die Wiedergabe gestartet (sofern die automatische Wiedergabe aktiviert ist).
66+
67+
### Text-to-Speech (TTS)
68+
Wenn Sie den Modus „Text-to-Speech“ wählen, nutzt der Knoten die integrierten TTS-Funktionen des Browsers, um Text vorzulesen. Dies erfordert eine Benutzergeste (z. B. einen Klick auf das Dashboard), bevor es funktioniert (Browser-Sicherheitseinschränkungen).
69+
70+
Wenn die Nutzlast der eingehenden Nachricht eine Zeichenfolge ist, wird diese als vorzulesender Text verwendet.
71+
Wenn die Nutzlast ein Objekt ist, können Sie zusätzliche Optionen angeben (Text ist erforderlich):
72+
73+
Beispiel: Sagen Sie „Hallo Welt“ mit der Stimme „Google Deutsch“ bei 1,1-facher Geschwindigkeit, 0,9-facher Tonhöhe und 88% Lautstärke
74+
75+
```json
76+
{
77+
"payload": {
78+
"text": "Hallo Welt!",
79+
"voice": "Google Deutsch",
80+
"rate": 1.1,
81+
"pitch": 0.9,
82+
"volume": 88
83+
}
84+
}
85+
```
86+
87+
HINWEISE:
88+
– Die verfügbaren Stimmen hängen vom Browser und Betriebssystem ab. Sie können die Liste der verfügbaren Stimmen abrufen, indem Sie `speechSynthesis.getVoices()` in der Browserkonsole ausführen.
89+
– Die Eigenschaft `voice` ist optional. Dies kann der Name einer Stimme (z. B. „Google US English“) oder ein Index (z. B. `0` für die erste Stimme, `1` für die zweite usw.) sein. Wenn Sie `voice` auf die leere Zeichenfolge `""` setzen, wählt der Browser die Standardstimme aus.
90+
– Mit der Eigenschaft `lang` können Sie eine Stimme auswählen, die der angegebenen Sprache entspricht. Dies ist nützlich, wenn Sie eine bestimmte Sprache verwenden möchten, aber den genauen Namen der Stimme nicht kennen. Der Browser wählt die erste Stimme aus, die der angegebenen Sprache entspricht. Hinweis: Wenn `voice` gesetzt ist, hat es Vorrang vor `lang`.
91+
92+
## Wiedergabe
93+
Der Knoten unterstützt auch die Wiedergabesteuerung über eingehende Nachrichten.
94+
Senden Sie eine Nachricht mit einem der folgenden Strings für die Wiedergabesteuerung:
95+
- `play`: Wiedergabe starten oder fortsetzen. Wenn die Audiowiedergabe pausiert ist, wird sie an der aktuellen Position fortgesetzt.
96+
- `resume`: (Alias ​​für `play`)
97+
- `pause`: Wiedergabe pausieren
98+
- `stop`: Wiedergabe stoppen und zum Anfang zurücksetzen
5399

54100
## Eigenschaften
55101

‎docs/en/nodes/widgets/ui-audio.md‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
---
22
description: "Play dynamically audio files with ui-audio in FlowFuse Dashboard."
33
props:
4-
Group: Defines which group of the UI Dashboard this widget will render in.
4+
Mode: Select between Audio Player (play audio files from a URL) or Text-to-Speech (speak text using the browser's built-in TTS capabilities).
5+
UI: The UI (<code>ui-base</code>) that this page will be added to (TTS only).
6+
Group: Defines which group of the UI Dashboard this widget will render in (Audio Player only).
57
Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
68
Source:
7-
description: The source is the url where the audio file can be fetched..
9+
description: The source is the url where the audio file can be fetched from (Audio Player only).
810
dynamic: true
911
Autoplay:
10-
description: Specify whether the audio file will start playing automatically.
12+
description: Specify whether the audio file will start playing automatically (Audio Player only).
1113
dynamic: true
1214
Loop:
13-
description: Specify whether the audio should be looping, i.e. start playing automatically again when ended.
15+
description: Specify whether the audio should be looping, i.e. start playing automatically again when ended (Audio Player only).
1416
dynamic: true
1517
Muted:
16-
description: Specify whether the audio should be muted.
18+
description: Specify whether the audio should be muted (Audio Player only).
1719
dynamic: true
20+
Voice:
21+
description: The voice to use for Text-to-Speech (TTS only).
22+
dynamic: false
1823
controls:
1924
enabled:
2025
example: true | false
@@ -48,8 +53,49 @@ dynamic:
4853

4954
</TryDemo>
5055

51-
Adds an audio player to the dashboard.
52-
The audio player can be controlled by the user or by control messages.
56+
Adds audio capabilities to the dashboard.
57+
58+
## Modes
59+
60+
You can select between two modes: "Audio Player" and "Text-to-Speech".
61+
62+
### Audio Player
63+
If you select the "Audio Player" mode, the node will render an audio player in the dashboard that can play audio files from a URL.
64+
You can specify the URL in the node configuration or dynamically via incoming messages (see Dynamic Properties below)
65+
Additionally, sending a string `payload` to the node will set the audio source to that string and start playing it (if autoplay is enabled).
66+
67+
### Text to Speech (TTS)
68+
If you select the "Text-to-Speech" mode, the node will use the browser's built-in TTS capabilities to speak out text. This requires a user gesture (e.g. click on the dashboard) before it will work (browser security restrictions).
69+
70+
When the `payload` of the incoming message is a string, it will be used as the text to speak.
71+
When the `payload` is an `object`, you can specify additional options (`text` is required):
72+
73+
Example: Say "Hello World" with the "Google US English" voice at 1.1x rate, 0.9x pitch and 88% volume
74+
75+
```json
76+
{
77+
"payload": {
78+
"text": "Hello World",
79+
"voice": "Google US English",
80+
"rate": 1.1,
81+
"pitch": 0.9,
82+
"volume": 88
83+
}
84+
}
85+
```
86+
87+
NOTES:
88+
- The available voices depend on the browser and operating system. You can get the list of available voices by running `speechSynthesis.getVoices()` in the browser console.
89+
- The `voice` property is optional. This can be the name of a voice (e.g. "Google US English") or an index (e.g. `0` for the first voice, `1` for the second, etc.). Setting `voice` to an empty string `""` will instruct the browser to select the default voice.
90+
- The `lang` property can be used to select a voice that matches the specified language. This is useful if you want to use a specific language but don't know the exact voice name. The browser will select the first voice that matches the specified language. Note: if `voice` is set, it takes precedence over `lang`.
91+
92+
## Playback
93+
The node also supports playback control via incoming messages.
94+
Send a message with the `playback` set to one of the following strings to control playback:
95+
- `play`: Start or resume playback. If the audio is paused, it will resume from the current position.
96+
- `resume`: (alias for `play`)
97+
- `pause`: Pause playback
98+
- `stop`: Stop playback and reset to the beginning
5399

54100
## Properties
55101

‎docs/en/user/migration.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,13 @@ The following details a direct comparison of all properties available on each no
7373

7474
<MigrationWidgetProfile :profile="widgets['ui_audio']" />
7575

76-
You can track progress, and input thoughts and ideas on this here: [Widget: Audio #52](https://github.com/FlowFuse/node-red-dashboard/issues/52)
76+
The ui-audio widget has now been migrated. In FlowFuse Dashboard the node has two distinct modes - Audio Player and Text-to-Speech (TTS).
77+
78+
In Audio Player mode, a `group` property is present, so that an audio player can be rendered in a group.
79+
80+
In TTS mode, the `group` property is no longer required, and has been replaced with a `ui` property, which defines which `ui-page` this widget will be rendered on.
81+
82+
Refer to the [ui-audio documentation](/en/nodes/widgets/ui-audio.html) and the nodes built-in help for more details.
7783

7884
### `ui_button`
7985

‎nodes/widgets/locales/de/ui_audio.html‎

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,64 @@
11
<script type="text/html" data-help-name="ui-audio">
2-
<p>
3-
Spielt eine Audiodatei im Dashboard ab.
4-
</p>
5-
<p>
6-
Jedes empfangene <code>msg.payload</code> enthält eine neue Quelle, d.h. eine neue Audio-Datei-URL.
7-
</p>
8-
<h3>Eigenschaften</h3>
2+
<div>
3+
<h5><i class="fa fa-volume-up"></i> Modus: Audioplayer</h5>
4+
<div style="margin-left: 16px;">
5+
<p>Wenn der Modus auf „Audioplayer“ eingestellt ist, wird die angegebene Audiodatei abgespielt.</p>
6+
<p>Jede empfangene <code>msg.payload</code> enthält eine neue Quelle, d. h. eine neue Audiodatei-URL.</p>
7+
</div>
8+
<h5><i class="fa fa-volume-up"></i> Modus: Text-to-Speech</h5>
9+
<div style="margin-left: 16px;">
10+
<p>
11+
Wenn der Modus auf „Text-to-Speech“ eingestellt ist, wird Text-to-Speech-Audio über die Web Speech API
12+
abgespielt (Browserunterstützung erforderlich).
13+
</p>
14+
Akzeptierte Formate für <code>msg.payload</code>:
15+
<ul>
16+
<li><code>string</code>: der zu sprechende Text</li>
17+
<li><code>object</code>: ein Objekt mit zusätzlichen Parametern (siehe unten)</li>
18+
</ul>
19+
20+
<b>Objektformat</b>: ein Objekt mit <code>text</code> und optional, einer der folgenden Eigenschaften:
21+
<ul>
22+
<li><code>text</code>: der zu sprechende Text (ERFORDERLICH)</li>
23+
<li><code>lang</code>: Sprachcode, z. B. "en-US", "en-GB", "de-DE", "fr-FR", etc (optional: Standardeinstellung ist die Browsersprache)</li>
24+
<li><code>voice</code>: Index der zu verwendenden Stimme oder Name der Stimme (optional: Standardeinstellung
25+
ist die ausgewählte Stimme)</li>
26+
<li><code>rate</code>: Geschwindigkeit der Rede <code>0,1</code> bis <code>10</code> (optional:
27+
Standardeinstellung ist <code>1</code>)</li>
28+
<li><code>pitch</code>: Tonhöhe der Rede <code>0</code> bis <code>2</code> (optional: Standardeinstellung
29+
ist <code>1</code>)</li>
30+
<li><code>volume</code>: Lautstärke der Rede <code>0</code> bis <code>100</code> (optional:
31+
Standardeinstellung ist <code>100</code>)</li>
32+
<li><code>interrupt</code>: Wenn diese Option auf <code>true</code> gesetzt ist, wird die laufende Rede
33+
unterbrochen und sofort mit der neuen begonnen (optional: Standardeinstellung ist <code>true</code>)
34+
</li>
35+
<li><code>queue</code>: Wenn <code>true</code> gesetzt ist, wird die neue Sprache in die Warteschlange
36+
gestellt und nach dem Ende der aktuellen abgespielt (optional: Standardwert ist <code>false</code>).
37+
</li>
38+
</ul>
39+
<p>Beispiel für eine Objektnutzlast:</p>
40+
<pre class="nr-db-audio-help-pre"><code>{
41+
"text": "Hallo Welt!",
42+
"lang": "en-US",
43+
"voice": 0,
44+
"rate": 0,9,
45+
"pitch": 1,2,
46+
"volume": 88,
47+
"interrupt": true,
48+
"queue": false
49+
}</code></pre>
50+
</div>
51+
<p>In beiden Modi können Sie auch eine <code>msg.playback</code>-Eigenschaft senden, um die Wiedergabe zu steuern:
52+
</p>
53+
<ul>
54+
<li><code>msg.playback = 'play'</code>: Startet oder setzt die Wiedergabe fort. Hinweis: Im TTS-Modus wird nur
55+
die Fortsetzung unterstützt.</li>
56+
<li><code>msg.playback = 'pause'</code>: Pausiert die Wiedergabe.</li>
57+
<li><code>msg.playback = 'stop'</code>: Stoppt die Wiedergabe.</li>
58+
</ul>
59+
<p>HINWEIS: Bei Verwendung von <code>msg.playback</code> wird die Nutzlast ignoriert.</p>
60+
</div>
61+
<h3>Eigenschaften [Nur Audioplayer-Modus]</h3>
962
<dl class="message-properties">
1063
<dt>Quelle <span class="property-type">string</span></dt>
1164
<dd>Die Quelle ist die URL, unter der die Audiodatei abgerufen werden kann.</dd>
@@ -16,7 +69,7 @@ <h3>Eigenschaften</h3>
1669
<dt>Stumm <span class="property-type">Liste</span></dt>
1770
<dd>Geben Sie an, ob die Audiodatei stummgeschaltet werden soll.</dd>
1871
</dl>
19-
<h3>Dynamische Eigenschaften (Eingaben)</h3>
72+
<h3>Dynamische Eigenschaften (Eingaben) [Nur Audioplayer-Modus]</h3>
2073
<p>Jede der folgenden Eigenschaften kann an ein <code>msg.ui_update</code> angehängt werden, um Eigenschaften dieses Knotens zur Laufzeit zu überschreiben oder festzulegen.</p>
2174
<dl class="message-properties">
2275
<dt class="optional">src<span class="property-type">string</span></dt>

‎nodes/widgets/locales/de/ui_audio.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,25 @@
33
"label": {
44
"group": "Gruppe",
55
"size": "Größe",
6+
"width": "Breite",
7+
"height": "Höhe",
68
"icon": "Symbol",
79
"source": "Quelle",
810
"autoplay": "Automatisch abspielen",
911
"loop": "Schleife",
1012
"muted": "Stumm",
11-
"note": "<b>Hinweis</b>: Die automatische Wiedergabe funktioniert nur, nachdem eine Benutzergeste (z.B. Klick auf das Dashboard) vorgenommen wurde."
13+
"mode-tip-src": "Die automatische Wiedergabe funktioniert nur nach einer Benutzergeste (z. B. Klicken auf das Dashboard).",
14+
"mode-tip-tts": "Die Text-zu-Sprache-Funktion funktioniert nur nach einer Benutzergeste (z. B. Klicken auf das Dashboard).",
15+
"mode": "Modus",
16+
"voice": "Stimme",
17+
"ui": "UI",
18+
"browser-default-voice": "Standard-Browserstimme"
1219
},
1320
"option": {
1421
"on": "Ein",
15-
"off": "Aus"
22+
"off": "Aus",
23+
"src": "Audioplayer",
24+
"tts": "Text-zu-Sprache"
1625
}
1726
}
1827
}

‎nodes/widgets/locales/en-US/ui_audio.html‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,53 @@
11
<script type="text/html" data-help-name="ui-audio">
2-
<p>
3-
Plays an audio file in the dashboard.
4-
</p>
5-
<p>
6-
Each received <code>msg.payload</code> will contain a new source, i.e. a new audio file url.
7-
</p>
8-
<h3>Properties</h3>
2+
<div>
3+
<h5><i class="fa fa-volume-up"></i> Mode: Audio Player</h5>
4+
<div style="margin-left: 16px;">
5+
<p>When mode is set to Audio Player, it plays the audio specified.</p>
6+
<p>Each received <code>msg.payload</code> will contain a new source, i.e. a new audio file url.</p>
7+
</div>
8+
<h5><i class="fa fa-volume-up"></i> Mode: Text-to-Speech</h5>
9+
<div style="margin-left: 16px;">
10+
<p>
11+
When mode is set to Text-to-Speech, it plays text-to-speech audio using the Web Speech API (requires browser support).
12+
</p>
13+
Accepted formats for <code>msg.payload</code>:
14+
<ul>
15+
<li><code>string</code>: the text to be spoken</li>
16+
<li><code>object</code>: an object containing additional parameters (see below)</li>
17+
</ul>
18+
19+
<b>Object format</b>: an object containing <code>text</code> and optionally, any of the following properties:
20+
<ul>
21+
<li><code>text</code>: the text to speak (REQUIRED)</li>
22+
<li><code>lang</code>: language code e.g. "en-US", "en-GB", "de-DE", "fr-FR", etc (optional: defaults to browser language)</li>
23+
<li><code>voice</code>: index of the voice or the name of the voice to use (optional: defaults to selected voice)</li>
24+
<li><code>rate</code>: speed of the speech <code>0.1</code> to <code>10</code> (optional: defaults to <code>1</code>)</li>
25+
<li><code>pitch</code>: pitch of the speech <code>0</code> to <code>2</code> (optional: defaults to <code>1</code>)</li>
26+
<li><code>volume</code>: volume of the speech <code>0</code> to <code>100</code> (optional: defaults to <code>100</code>)</li>
27+
<li><code>interrupt</code>: if set to <code>true</code>, it will stop any ongoing speech and start the new one immediately (optional: defaults to <code>true</code>)</li>
28+
<li><code>queue</code>: if set to <code>true</code>, it will queue the new speech and play it after the current one finishes (optional: defaults to <code>false</code>)</li>
29+
</ul>
30+
<p>Example object payload:</p>
31+
<pre class="nr-db-audio-help-pre"><code>{
32+
"text": "Hello, world!",
33+
"lang": "en-US",
34+
"voice": 0,
35+
"rate": 0.9,
36+
"pitch": 1.2,
37+
"volume": 88,
38+
"interrupt": true,
39+
"queue": false
40+
}</code></pre>
41+
</div>
42+
<p>In either mode, you can also send a <code>msg.playback</code> property to control playback:</p>
43+
<ul>
44+
<li><code>msg.playback = 'play'</code>: starts or resumes playback. Note: in TTS mode, only resume is supported</li>
45+
<li><code>msg.playback = 'pause'</code>: pauses playback</li>
46+
<li><code>msg.playback = 'stop'</code>: stops playback</li>
47+
</ul>
48+
<p>NOTE: When <code>msg.playback</code> is used, the payload is ignored.</p>
49+
</div>
50+
<h3>Properties [Audio Player Mode Only]</h3>
951
<dl class="message-properties">
1052
<dt>Source <span class="property-type">string</span></dt>
1153
<dd>The source is the url where the audio file can be fetched.</dd>
@@ -16,7 +58,7 @@ <h3>Properties</h3>
1658
<dt>Muted <span class="property-type">list</span></dt>
1759
<dd>Specify whether the audio should be muted.</dd>
1860
</dl>
19-
<h3>Dynamic Properties (Inputs)</h3>
61+
<h3>Dynamic Properties (Inputs) [Audio Player Mode Only]</h3>
2062
<p>Any of the following can be appended to a <code>msg.ui_update</code> in order to override or set properties on this node at runtime.</p>
2163
<dl class="message-properties">
2264
<dt class="optional">src<span class="property-type">string</span></dt>
@@ -29,3 +71,13 @@ <h3>Dynamic Properties (Inputs)</h3>
2971
<dd>Override the configured muted setting.</dd>
3072
</dl>
3173
</script>
74+
75+
<style type="text/css">
76+
div.red-ui-help pre.nr-db-audio-help-pre {
77+
overflow-x: auto;
78+
}
79+
div.red-ui-help pre.nr-db-audio-help-pre > code {
80+
white-space: pre;
81+
font-size: small;
82+
}
83+
</style>

0 commit comments

Comments
 (0)