キーの押下と同期してオーディオ要素を再生するにはどうすればよいですか？

Question

HTML

<textarea id="words" name="words"></textarea> 
<audio id="type" src="type.mp3"></audio> 

JS

document.getElementById('words').onkeydown = function(){ 
    document.getElementById('type').play(); 
} 

は、私はいつでも私は、任意のキーを押して再生するためにtype.mp3を作りたいです。

しかし、キーと同期して再生されません。

純粋なJSソリューションを探しています。

Answer 1

オーディオメディア要素は、ブラウザのバッファリングメカニズムに依存し、再生が呼び出されるとすぐには再生されません。

キープレスと同期してサウンドを再生するには、代わりにWebオーディオAPIを使用して、インメモリバッファを再生する必要があります。ここで

はサウンドをロードしてトリガすることができます方法の例です：

window.AudioContext = window.AudioContext || window.webkitAudioContext; 
 

 
var request = new XMLHttpRequest(), 
 
    url = "https://dl.dropboxusercontent.com/s/8fp1hnkwp215gfs/chirp.wav", 
 
    actx = new AudioContext(), 
 
    abuffer; 
 

 
// load file via XHR 
 
request.open("GET", url, true); 
 
request.responseType = "arraybuffer"; 
 
request.onload = function() { 
 
    // Asynchronously decode the audio file data in request.response 
 
    actx.decodeAudioData(request.response, 
 
    function(buffer) { 
 
     if (buffer) { 
 
     abuffer = buffer; // keep a reference to decoded buffer 
 
     setup();   // setup handler 
 
     } 
 
    } 
 
) 
 
}; 
 
request.send(); 
 

 
    // setup key handler 
 
function setup() { 
 
    document.getElementById("txt").onkeydown = play; 
 
} 
 

 
    // play sample - a new buffer source must be created each time 
 
function play() { 
 
    var src = actx.createBufferSource(); 
 
    src.buffer = abuffer; 
 
    src.connect(actx.destination); 
 
    src.start(0); 
 
}

<textarea id=txt></textarea>

（注意：この記事の執筆時点でのFirefoxのバグがあるように思われますsend（）呼び出しでコードに存在しない列を報告します（問題がある場合はChromeでコードを試してください）。

Answer 2

JavaScriptは非同期でイベント駆動型の言語なので、同期機能は使用できません。