Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers