70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var myvoice = 0;
|
|
var voices;
|
|
RED.nodes.registerType('ui_audio',{
|
|
category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
|
|
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"; },
|
|
labelStyle: function() { return this.name?"node_label_italic":""; },
|
|
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].voiceURI);
|
|
document.getElementById("node-input-voice").appendChild(option);
|
|
}
|
|
$('#node-input-voice').val(this.voice || 0);
|
|
}
|
|
else {
|
|
$('#voice-input-row').hide();
|
|
}
|
|
|
|
$("#node-input-voice").on("change", function() {
|
|
myvoice = this.voice = $("#node-input-voice").val();
|
|
});
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script type="text/html" 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>
|