JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /></head>
<body>
<script>
  function playAudio(id, lang, text) {
    var d1 = new Date();
    var n1 = d1.getTime();
	document.getElementById("showtime").innerHTML = ""; //清空時間
    var audio = document.getElementById(id); // 取得 audio 控制項
    audio.src = "http://translate.google.com/translate_tts?ie=utf-8&tl="+lang+"&q="+text; // 設定語音為 google TTS。
    audio.addEventListener('ended', function(){ this.currentTime = 0; d2 = new Date(); n2 = d2.getTime();  document.getElementById("showtime").innerHTML = Math.round((n2-n1)/1000)*1000;}, false); // 當播放完畢，強制回到開頭。
    // => (這在 Firefox 不需要，但在 Chrome 就需要，否則第二次播放時就會因為已到最後而播不出聲音。
    audio.play(); // 播放語音。
  }
</script>
  <audio id="audio1"></audio> 
  <textarea id="text" rows=1 cols=100>
  測試一句文字播放語音的時間
  </textarea><BR/>
  <button onclick="playAudio('audio1', 'zh', document.getElementById('text').value);">播放</button>
  <div id="showtime"></div>
</body>
</html>