JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /></head>
<body>
  <audio id="audio1"></audio> 
  
  <div id="poem1"></div>
  
  <script>
  poem = [ [3000, "月落烏啼霜滿天"],
		   [3000, "江楓漁火對愁眠"],
		   [3000, "姑蘇城外寒山寺"],
		   [3000, "夜半鐘聲到客船"]
		 ];		 
	  
  function playAudio(lang, i) {   
    var audio = document.getElementById("audio1"); // 取得 audio 控制項 

	var para = document.createElement("p");
	var node = document.createTextNode(poem[i][1]);
	para.appendChild(node);
	document.getElementById("poem1").appendChild(para);

    audio.src = "http://translate.google.com/translate_tts?ie=utf-8&tl="+lang+"&q="+poem[i][1]; // 設定語音為 google TTS。
    audio.addEventListener('ended', function(){ this.currentTime = 0; }, false); // 當播放完畢，強制回到開頭。
    // => (這在 Firefox 不需要，但在 Chrome 就需要，否則第二次播放時就會因為已到最後而播不出聲音。
    audio.play(); // 播放語音。
  }		
  
  dt = 0;
  setTimeout(function(){playAudio('zh', 0)}, 0);
  dt = dt + poem[0][0];
  setTimeout(function(){playAudio('zh', 1)}, dt);
  dt = dt + poem[1][0]; 
  setTimeout(function(){playAudio('zh', 2)}, dt);
  dt = dt + poem[2][0]; 
  setTimeout(function(){playAudio('zh', 3)}, dt);
  dt = dt + poem[3][0]; 
 
  </script>
</body>
</html>