如何在按鍵輸入字段中播放聲音而不延遲？

Question

我的目標是播放一個類似於手機鍵盤工作方式的點擊聲音文件，但是我在這裏找到的每種方法似乎都是從聲音文件重疊延遲，即當我在搜索字段中輸入時，聲音有時會播放，具體取決於我輸入的速度有多快。

我使用下面的代碼：

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

但這種方法會導致有時點擊，有時沒有。

Answer 1

如果你的嘟嘟聲很短，如果你pause()和currentTime重新定位爲零...它似乎工作得很好。

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

CodePen

暫停和在音頻文件的開頭替換爲的伎倆。否則，如果和事件發生在文件結束之前，文件已經在播放......這給人一種「跳過」事件的印象。