JSFiddle - React, Tailwind, and code Playground

Messing with Text-to-Speech UI.

by MegaScience

HTML

<div id="mainContainer">
    <div id="inputBlock">
        <input type="text" id="textToSpeak" class="fullWidth" placeholder="Text to speak...">
        <button class="fullWidth" onclick='submitTranslation()'>Submit</button>
    </div>
    <div id="audioBlock">
        <iframe id="audioElement" class="fullWidth" src="https://translate.google.com/translate_tts?ie=UTF-8&q=You%20came%20on%20my%20face,%20now%20watch%20and%20see%20me%20dance.%20Girls%20like%20me%20don%27t%20get%20laid%20while%20wearing%20underpants.&tl=en&ttsspeed=2"/>
        <span id="debugText"></span>
    </div>
</div>

CSS

html, body {
    width: 100%;
}
#mainContainer {
    margin: 0 auto;
    width: 35%;
}
.fullWidth, #debugText {
    width: 100%;
    box-sizing: border-box;
}

JavaScript

function submitTranslation() {

    var audioElement = document.getElementById('audioElement');
    var textToSpeak = document.getElementById('textToSpeak');
    var debugText = document.getElementById('debugText');

    audioElement.setAttribute("src", 'https://translate.google.com/translate_tts?ie=UTF-8&q=' + encodeURIComponent(textToSpeak.value) + '&tl=it&ttsspeed=2');// + '&total=1&idx=0&textlen=25&tk=848754&client=t';
    //audioElement.src = 'https://translate.google.com/translate_tts?ie=UTF-8&q=You%20came%20on%20my%20face,%20now%20watch%20and%20see%20me%20dance.%20Girls%20like%20me%20don%27t%20get%20laid%20while%20wearing%20underpants.&tl=it&ttsspeed=2';
/*
    audioElement.pause();
    audioElement.load();
    audioElement.play();*/
}