How can I get a (very) short .mp3 sound file to play with every keystroke?

Question

I am creating a web application that includes form and (like progressive enhancement / UX effect). I would like a keystroke to click on the sound effect of a keystroke.

I cut off the sound effect .mp3 (0.18s) very much.

However, there seems to be an audible delay when I test my setup on Firefox on my laptop (and not every keypress causes a sound effect).

In Firefox Mobile on my Android, very few keystrokes produce a sound effect - perhaps one keystroke every eight.

Am I trying to achieve something that cannot be done with the help of modern web technologies, or am I just approaching it wrong?

Here is my setup:

var myInput = document.getElementsByTagName('input')[0];
var keypress = document.getElementsByClassName('keypress')[0];

function playSoundEffect() {
    keypress.play();
}

myInput.addEventListener('keydown', playSoundEffect, false);

/* I've also tried...
myInput.addEventListener('keyup', playSoundEffect, false);
myInput.addEventListener('keypress', playSoundEffect, false);
*/

input {
width: 90vw;
}

<input type="text" placeholder="Type to hear the sound effect..." />

<audio class="keypress">
<source src="http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3" type="audio/mpeg">
</audio>

Run codeHide result

---

Second attempt:

@StackingForHeap @zero298, :

var myInput = document.getElementsByTagName('input')[0];

function playSoundEffect() {
    var jsKeypress = new Audio('http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3');
    jsKeypress.play();
}

myInput.addEventListener('input', playSoundEffect, false);

input {
width: 90vw;
}

<input type="text" placeholder="Type to hear the sound effect..." />

Hide result

, , . Audio Audio.

Answer 1

, ( ). , , :

, Freesound.org: , C4.wav.

AudioContext Audio , . , .

, :

An AudioBufferSourceNode ; start(), node, . , , AudioBuffers . , " ": node, start(), , . , , .

/*jslint browser:true, esversion:6, devel:true*/
/*global AudioContext*/

(function() {
  "use strict";

  function main() {
    let ctx = new AudioContext();

    fetch("/res/audio/twinkle.wav")
      .then(res => res.arrayBuffer())
      .then((buffer) => {
        return new Promise((resolve, reject) => {
          ctx.decodeAudioData(buffer, (audioBuffer) => {
            resolve(audioBuffer);
          });
        });
      })
      .then((audioBuffer) => {
        document.addEventListener("keydown", (e) => {
          console.log(e.keyCode);
          if (e.keyCode === 37) { // The "left arrow" key
            let source = ctx.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(ctx.destination);
            source.start(0);
          }
        });
      });
  }
  document.addEventListener("DOMContentLoaded", main);
}());

Hide result

Answer 2

howler.js, , , .

 var myInput = document.getElementsByTagName('input')[0];
  var sound = new Howl({
    src:['http://handsoffhri.org/.assets/theme/elements/mp3/keypress.mp3']
  });

  sound.play();


  function playSoundEffect() {
    sound.play();
   }

  myInput.addEventListener('keydown', playSoundEffect, false);