javascript - 同时播放两种以上不同的声音时，声音会被削波

Question

我正在尝试构建一个架子鼓 Web 应用程序，其中某个键是某个鼓。当我播放两个不同的声音而第一个声音还没有完成时，它工作正常，它只是完成了两个声音并按照它应该做的停止。

当我尝试播放第三个声音时，前两个声音还没有播放完，它只是打乱了所有声音，没有一个声音是应该的。

function playSound(event) {
    var keyPressed = event.keyCode;
    if (keyPressed === 65) {
        audio.hihat.currentTime = 0;
        audio.hihat.cloneNode(true).play();
    } else if (keyPressed === 83) {
        audio.snare.currentTime = 0;
        audio.snare.play();
    } else if (keyPressed === 81) {
        audio.crash.currentTime = 0;
        audio.crash.play();
    } else if (keyPressed === 87) {
        audio.tom01.currentTime = 0;
        audio.tom01.play();
    } else if (keyPressed === 69) {
        audio.tom02.currentTime = 0;
        audio.tom02.play();
    }
}

Answer 1

默认情况下，Javascript 一次只允许您播放一个声音，并且在注册完成之前不会播放下一个声音。为了节省一些步法，howler.js 库可以非常轻松地解决您所描述的确切问题。

声音可以用作howl 对象的来源。这是他们的 official documentation. 的片段

var sound = new Howl({
  src: ['sound.mp3']
});

然后，你的声音就可以这样播放了。

sound.play();

Here is an example我使用 howler.js 允许重叠声音的项目。我相信这就是您使用架子鼓寻找的效果。

这是我在应用中的布局方式:

sound: new Howl({
            src: ['Assets/bubbles.mp3']
            })

然后，当我执行我的事件(在我的例子中是按键)时，我调用 howl。

function onKeyDown(event) {
    sound.play();

我在我的项目中使用了一些额外的部分，因为我也使用了 Paper.js 库，但我只是想给你一个关于 howler.js 的一般概念 工作时不会偏离您的问题范围太远。

可以下载howler.js 的官方网站是here.