文字をサウンドと同期させる方法は？

Question

Webページに入力されているものを印刷するときに、古い手動のタイプライターが行うことをエミュレートする必要があります。 JavaScript関数を開発して文字列を渡したいのですが、各文字を遅延で出力し、サウンドファイルを各文字と同期させて出力します。

JavaScriptを初めて使用しています。これを行うための好ましい方法は何ですか？これについてjQueryを調べるべきですか？あるいはこれは簡単なことですか？

いくつかのWebブラウザでサウンドファイルがこのようにトリガされているという問題がありました。オーディオファイル形式はこの種のものに最適ですか？

私はこれを見つけたが、問題がある、それはすべてのWebブラウザでは動作しません： https://rawgit.com/mehaase/js-typewriter/master/example3-typewriter/index.html

Answer 1

EDIT：今ではSafariで動作します。オーディオはユーザーイベント（例：onclick ..）によってトリガーされなければならないようですので、ボタンを追加して、タイプライターをonclickから開始させました。

PS：オーディオファイルをプリロードする方法がないという欠点があります。Safariはサーバーリクエストを行い、再生するたびにオーディオをダウンロードします。私はこれを克服するために考えることができる唯一の（汚い）の方法ではなくaudioURLのデータURIを提供することです..あなたは、再生速度が本当に重要ならばという試すことができます（これは参考にすることができ：https://www.ibm.com/developerworks/library/wa-ioshtml5/）

// The delay between each keystroke 
 
var delay = 300; 
 
    
 
// The typewriter sound file url 
 
var clickURL = "https://cdn.rawgit.com/halimb/res/6ffa798d/typewriter.wav"; 
 
    
 
// Get a reference to the container div 
 
var container = document.getElementById("container"); 
 
var sampleString = "Hello world!"; 
 
    
 
//get a reference to the start button and typewrite onclick 
 
var start = document.getElementById("btn"); 
 
start.onclick = function() { typewrite(sampleString); }; 
 
    
 
function typewrite(str) { 
 
    var i = 0; 
 
    container.innerHTML = ""; 
 
    type(); 
 
    
 
    function type() { 
 
     var click = new Audio(clickURL); 
 
     // This is triggered when the browser has enough of the file to play through 
 
     click.oncanplaythrough = function() { 
 
      click.play(); 
 
      // Add the character to the container div 
 
      container.innerHTML += str[i]; 
 
      i++; 
 
      if(i < str.length) { 
 
       window.setTimeout(type, delay); 
 
      } 
 
     } 
 
    } 
 
}

* { 
 
\t font-family: Courier; 
 
\t font-size: 32px; 
 
} 
 

 
.btn { 
 
\t display: inline-block; 
 
\t border: 1px solid black; 
 
\t border-radius: 5px; 
 
\t padding: 10px; 
 
\t cursor: pointer; 
 
\t margin: 10px; 
 
}

<div class="btn" id="btn">Start</div> 
 
<div id="container"></div>