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

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

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

要与按键同步播放声音，您必须使用 Web Audio 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 中的代码)。