<!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>