wavenet.html

<!-- 
    lightBrown: #FDF0C2
    green: #44A1A0
 -->

<script type="text/javascript">
    RED.nodes.registerType('wavenet', {
        category: 'advanced',
        color: '#44A1A0',
        defaults: {
            name: { value: "Wavenet" },
            key: { value: "", type: "wavenet-config" },
            voice: { value: "random" }
        },
        inputs: 1,
        outputs: 1,
        icon: "feed.png",
        label: function () {
            return this.name || "wavenet";
        }
    });
</script>

<script type="text/javascript">
    RED.nodes.registerType('wavenet-config', {
        category: 'config',
        defaults: {
            speech_api: { value: "", required: true }
        },
        // label: 'Google Speech API Key',
        label: function () {
            return 'Google Speech API Key - ' + this.speech_api.substr(0, 5);
        }
    });
</script>

<script type="text/x-red" data-template-name="wavenet">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i>Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-key"><i class="icon-tag"></i>API Key</label>
        <input type="text" id="node-input-key" placeholder="API Key">
        <h6><p>Sign in to <a href="https://cloud.google.com/text-to-speech/">Google Developer Console</a> to get a Speech API key.</p></h6>
    </div>
    <div class="form-row">
        <label for="node-input-voice"><i class="icon-tag"></i>Voice</label>
        <select id="node-input-voice">
            <option value='random' selected>Random</option>
            <option value='janjaap'>Janjaap (Dutch Male)</option>
            <option value='kees'>Kees (Dutch Male)</option>
            <option value='sjaan'>Sjaan (Dutch Female)</option>
            <option value='bep'>Bep (Dutch Female)</option>
            <option value='miep'>Miep (Dutch Female)</option>
            <option value='russel'>Russel (Australian Male)</option>
            <option value='thomas'>Thomas (Australian Male)</option>
            <option value='nicole'>Nicole (Australian Female)</option>
            <option value='mary'>Mary (Australian Female)</option>
            <option value='brian'>Brian (British Male)</option>
            <option value='thomas'>Paul (British Male)</option>
            <option value='emma'>Emma (British Female)</option>
            <option value='amy'>Amy (British Female)</option>
            <option value='mathew'>Mathew (American Male)</option>
            <option value='justin'>Justin (American Male)</option>
            <option value='joanna'>Joanna (American Female)</option>
            <option value='ivy'>Ivy (American Female)</option>
            <option value='kimberly'>Kimberly (American Female)</option>
            <option value='salli'>Salli (American Female)</option>
            <option value='germanFemale'>German1 (German Female)</option>
            <option value='germanMale'>German2 (German Female)</option>
        </select>
    </div>
</script>

<script type="text/x-red" data-template-name="wavenet-config">
    <div class="form-row">
        <label for="node-config-input-speech_api"><i class="icon-bookmark"></i> API Key</label>
        <input type="text" id="node-config-input-speech_api">
    </div>
</script>
<script type="text/x-red" data-help-name="wavenet">
    <h2>Convert text to speech using Google Wavenet voice.</h2>
    <br>
    <p>
        Wavenet voice represents a new way of creating synthetic speech, using a <strong>WaveNet</strong> model, the same technology used to produce speech for Google Assistant, Google Search, and Google Translate.
    </p>
    <br>
    Takes a <code>string</code> as an input. Returns a <code>base64</code> encoded array buffer. Attach a file node to save it as an MP3 on your disk.
    <img src="https://imgur.com/WyF9hBt.png" alt="main flow">
    <br>    
</script>