如何将同一个声音文件与 Audio API 分层？

Question

我有一个 2 秒长的声音。它绑定到回车键。我希望能够每秒多次按下回车键，从而启用相同声音的多层。

目前我可以启动声音，但是下一个要等到第一个结束后才会播放。

这是我拥有的有效代码，但不会在多次按键时分层声音：

         var fart = new Audio('http://www.soundjay.com/human/fart-01.wav');

         $(document).keydown(function(e) {
             if(e.keyCode == 13)
             {
              fart.play();
             }
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click here then press enter.

这看起来可能包含答案，但我无法获得任何对我有用的可执行代码：Sound effects in JavaScript / HTML5

Answer 1

Audio.play 方法不是异步的。因此你的 play() 方法 'waits'（块是正确的术语）直到它在返回主循环之前完成。

大多数 JavaScript 调用都是阻塞的（并且是单线程的），因此您的应用程序通常会等待某些事情完成，然后再转到下一行。要在 JavaScript 中执行异步操作，您需要使用 setTimeout 或 setInterval 之类的方法调用您的函数。

Answer 2

添加此行不会创建新图层！但它会导致每次按下一个键时都会重复播放音频文件。不管是否过了2秒，每次都从头开始。

var fart = new Audio('http://www.soundjay.com/human/fart-01.wav');

$(document).keydown(function(e) {
    if(e.keyCode == 13)
    {
        fart.play();
        fart.currentTime=0; // <- add this line
    }
});

如何将同一个声音文件与 Audio API 分层？

How can I layer the same sound file with Audio API?

html

javascript

audio

jquery