JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script  type="text/javascript">
function myFunction() {

  dtlarea=document.getElementById("details");
  //dtlarea.style.display="none";
  dtltxt="";

  var mytimer = setInterval(function() {
    
      var voices = speechSynthesis.getVoices();
      //console.log(voices);
      if (voices.length !== 0) {

        var msg = new SpeechSynthesisUtterance();

        msg.rate = document.getElementById("rate").value; // 0.1 to 10
        msg.pitch = document.getElementById("pitch").value; //0 to 2
        msg.volume = document.getElementById("volume").value; // 0 to 1
         
        msg.text = document.getElementById("sampletext").value; 
        msg.lang =  document.getElementById("lang").value; //'hi-IN';
         
        for(var i=0;i<voices.length;i++){

            dtltxt+=voices[i].lang+' '+voices[i].name+'\n';
           
            if(voices[i].lang==msg.lang) {
              msg.voice = voices[i]; // Note: some voices don't support altering params
              msg.voiceURI = voices[i].voiceURI;
              // break;
            }
        }
         
        msg.onend = function(e) {
          console.log('Finished in ' + event.elapsedTime + ' seconds.');
          dtlarea.value=dtltxt; 
        };
         
        speechSynthesis.speak(msg);

        clearInterval(mytimer);
        
      }
  }, 1000);

} 
</script>
</head>
<body>
  Language :<br/>
  <input type="text" id="lang" value="hi-IN">
  <br/>
  Sample Text:<br/>
  <input type="text" id="sampletext" size="60" value="Hello Akash Pankaj How are you">
  <br/>
  Rate 0-10 :<br/>
  <input type="text" id="rate" value="0.7">
  <br/>
  Pitch 0-2 :<br/>
  <input type="text" id="pitch" value="1">
  <br/>
  Volume 0-1 :<br/>
  <input type="text" id="volume" value="1">
  <br/><br/>
  <input type="Button" value="Click Me!" onclick="myFunction()">
  <br/><br/>
  <!--<div id="details" style="display:block;">Language List</div>-->
  <textarea id="details" rows="12" cols="50"...