JSFiddle - React, Tailwind, and code Playground

TTS with responsivevoice.com: anchetaWern/responsive-voice.js GIST

by abubelinha

HTML

TTS taken from this <a href="https://gist.github.com/anchetaWern/ed6e841555602656e6ae" target=_blank>gist</a><br>
<textarea id=texto rows=10 cols=30>
HEI! : Mete aquí o teu texto
</textarea><button onclick="parla();">
Escoitar
</button>

CSS

body {background:white;}

JavaScript

//Look for other responsivevoice instances
/*if (window.parent != null) {
    var iframes = window.parent.document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
        //iframes[i].style.width = "300px"
    }
}*/

if (typeof responsiveVoice != 'undefined') {
    console.log('ResponsiveVoice already loaded');
    console.log(responsiveVoice);
} else {

    var ResponsiveVoice = function () {

        var self = this;

        self.version = 3;
        console.log("ResponsiveVoice r" + self.version);

        // Our own collection of voices
        var responsivevoices = [
            {name: 'UK English Female', voiceIDs: [3, 5, 1, 6, 7, 8]},
            {name: 'UK English Male', voiceIDs: [0, 4, 2, 6, 7, 8]},
            {name: 'US English Female', voiceIDs: [39, 40, 41, 42, 43, 44]},
            {name: 'Spanish Female', voiceIDs: [19, 16, 17, 18, 20, 15]},
            {name: 'French Female', voiceIDs: [21, 22, 23, 26]},
            {name: 'Deutsch Female', voiceIDs: [27, 28, 29, 30, 31, 32]},
            {name: 'Italian Female', voiceIDs: [33, 34, 35, 36, 37, 38]},
            {name: 'Greek Female', voiceIDs: [62, 63, 64]},
            {name: 'Hungarian Female', voiceIDs: [9, 10, 11]},
            {name: 'Russian Female', voiceIDs: [47,48,49]},
            {name: 'Dutch Female', voiceIDs: [45]},
            {name: 'Swedish Female', voiceIDs: [65]},
            {name: 'Japanese Female', voiceIDs: [50,51,52,53]},
            {name: 'Korean Female', voiceIDs: [54,55,56,57]},
            {name: 'Chinese Female', voiceIDs: [58,59,60,61]},
            {name: 'Hindi Female', voiceIDs: [66,67]},
            {name: 'Serbian Male', voiceIDs: [12]},
            {name: 'Croatian Male', voiceIDs: [13]},
            {name: 'Bosnian Male', voiceIDs: [14]},
            {name: 'Romanian Male', voiceIDs: [46]},
            {name: 'Fallback UK Female', voiceIDs: [8]}

        ];

        //All voices available on every system and device
        var...