如何在输入区域的按键上无延迟地播放声音?

时间:2017-08-16 16:47:39

标签: javascript jquery keydown onkeydown

我的目标是播放类似于手机键盘工作方式的点击声音文件,但我在这里找到的每种方法似乎都会从声音文件重叠延迟,即当我在搜索字段中键入时,声音有时会依赖于我输入的速度有多快

我使用以下代码:

$("#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

但是这种方法有时会导致点击,有时不会。

1 个答案:

答案 0 :(得分:2)

如果您的哔声很短,如果您pause()并将currentTime重新定位为零...它似乎工作得很好。

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

CodePen

在音频文件的开头暂停和替换是绝招。否则,如果和事件发生在文件结束之前,则该文件已经在播放...这给人一种“跳过”事件的印象。