node-red-dashboard
Version:
A set of dashboard nodes for Node-RED
86 lines (81 loc) • 3.63 kB
HTML
<script type="text/javascript">
(function() {
var myvoice = 0;
var voices;
RED.nodes.registerType('ui_audio',{
category: 'dashboard',
paletteLabel: 'audio out',
color: 'rgb(119, 198, 204)',
defaults: {
name: {value:""},
group: {type: 'ui_group', required: true},
voice: {value:""},
always: {value:""}
},
inputs:1,
outputs:0,
icon: "feed.png",
align: "right",
label: function() {
return this.name||"audio out";
},
onpaletteadd: function() {
if ('speechSynthesis' in window) { voices = window.speechSynthesis.getVoices(); }
},
oneditprepare: function() {
if ('speechSynthesis' in window) {
voices = window.speechSynthesis.getVoices();
for (i = 0; i < voices.length ; i++) {
//console.log(i,voices[i].name,voices[i].lang,voices[i].voiceURI,voices[i].default);
var option = document.createElement('option');
option.textContent = i + " : " + voices[i].name + ' (' + voices[i].lang + ')';
if (voices[i].default) { option.textContent += ' -- DEFAULT'; }
option.setAttribute('value', voices[i].lang);
document.getElementById("node-input-voice").appendChild(option);
}
$('#node-input-voice').val(this.voice || 0);
}
else {
$('#voice-input-row').hide();
}
$("#node-input-voice").change(function() {
myvoice = this.voice = $("#node-input-voice").val();
});
}
});
})();
</script>
<script type="text/x-red" data-template-name="ui_audio">
<div class="form-row">
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
<input type="text" id="node-input-group">
</div>
<div class="form-row" id="voice-input-row">
<label for="node-input-voice"><i class="fa fa-language"></i> TTS Voice</label>
<select id="node-input-voice" style="width:70%"></select>
</div>
<div class="form-row">
<label for="node-input-always"></label>
<input type="checkbox" checked id="node-input-always" style="display:inline-block; width:auto; vertical-align:top;">
Play audio when window not in focus.
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script>
<script type="text/x-red" data-help-name="ui_audio">
<p>Plays audio or text to speech (TTS) in the dashboard.</p>
<p>To work the dashboard web page must be open.</p>
<p>Expects <code>msg.payload</code> to contain a buffer of a <b>wav</b> or <b>mp3</b> file.</p>
<p>If your browser has native support for Text-to-Speech then a <code>msg.payload</code>
can also be a <b>string</b> to be read aloud.</p>
<p>When a <code>msg.reset</code> is available with value <code>true</code>, then playback of the current audio fragment will be stopped.</p>
<p>The <b>node status</b> reflects the current playback status:
<ul>
<li><b>started:</b> the audio fragment playback has been started.</li>
<li><b>reset:</b> the audio fragment playback has been reset (i.e. stopped before completed).</li>
</ul>
As soon as the audio fragment playback is completed, the node status will be cleared automatically.</p>
</script>