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 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中的代码。）

Answer 2

Javascript是一种异步和事件驱动的语言，因此您无法创建同步函数。

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

2 个答案: