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']
            })

然后，当我执行我的事件（在我的情况下是按键）时，我打电话给嚎叫。

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

我在项目中使用了一些额外的部分，因为我也使用了Paper.js库，但我只是想让你大致了解howler.js如何工作离你的问题范围太远了。

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

Answer 2

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

当一次播放两个以上不同的声音时，声音会被削减

2 个答案: