一次播放两个以上不同的声音时，声音会被削波答案

【问题标题】：sounds getting clipped when playing more then two different sounds at once一次播放两个以上不同的声音时，声音会被削波
【发布时间】：2018-03-13 19:31:15
【问题描述】：

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

当我尝试播放第三个声音而前两个声音尚未完成时，它只是将它们全部打乱，没有一个声音听起来应该是。

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();
    }
}

【问题讨论】：

标签： javascript audio

【解决方案1】：

默认情况下，Javascript 将只允许您一次播放一个声音，并且在注册为完成之前不会播放下一个声音。为了省去一些麻烦，howler.js 库可以很容易地解决您所描述的确切问题。

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

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

那么，你的声音就可以这样播放了。

sound.play();

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

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

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

然后，当我执行我的事件（在我的情况下是按键）时，我会发出嚎叫声。

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

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

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

【讨论】：

【解决方案2】：

您可以使用 howler.js，它是一个强大的音频工具。或者，如果您的项目是基于 React 的，您可以使用 useSound Hook。 useSound 钩子在底层使用 howler.js 并具有避免重叠等额外功能

【讨论】：