How to play a sound on key press in input field without delay?

Question

My objective is to play a clicking sound file similar to how mobile phone keypads work , but every method I find on here seems to delay from the sound file overlapping, ie When I type in the search field the sound will sometimes play depending on how fast I type.

I am using the following code:

$("#search") // loop each menu item
  .each(function(i) {
    if (i != 0) { // only clone if more than one needed
      $("#beep")
        .clone()
        .attr("id", "beep-" + i)
        .appendTo($(this).parent()); 
    }
    $(this).data("beeper", i); // save reference 
  })
  .keydown(function() {
    $("#beep-" + $(this).data("beeper"))[0].play();
  });
$("#beep").attr("id", "beep-0"); // get first one into naming convention

But this method results in sometimes clicking , sometimes not.

Answer 1

If your beep sound is short and if you pause() and reposition the currentTime to zero... It seems to work quite fine.

$("#search").on("keyup",function(){
  //console.log("ok");
  $("#beep")[0].pause();
  $("#beep")[0].currentTime=0;
  $("#beep")[0].play();
});

CodePen

Pausing and replacing at the beginning of the audio file is the trick. Else, if and event occurs before the file has ended, the file is already playing... Which gives the impression of a "skipped" event.