如何与按键同步播放音频元素？

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

Javascript是异步和事件驱动的语言，所以不能做同步函数

Answer 2

音频媒体元素取决于浏览器的缓冲机制，调用播放时可能不会立即播放。

要播放与按键同步的声音，您必须使用网络音频 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() 调用的代码中不存在的列 - 如果有问题，请尝试 [=29 中的代码=]).

如何与按键同步播放音频元素？

How can I play audio elements in sync with key presses?

javascript

key-events

html5-audio