javascript - JavaScript/HTML5 吉他，为每个字符串播放不同的声音

Question

这是我的代码的链接：http: //jsbin.com/ebadic/9/edit

它来自我在这里找到的一个演示（这个链接解释了它是如何工作的，我正在使用的部分在底部）：

它创建了 6 个吉他弦。我想要做的是在 6 个字符串中的一个被鼠标悬停时播放声音 - 每个字符串都有不同的声音，或者每个字符串都向上/向下倾斜的单个声音（可能使用 PlaybackRate 属性）

当我将鼠标悬停在单个字符串上时，我的代码已经播放了声音，但问题是它为每个字符串播放相同的声音。如何让它为每个字符串播放不同的声音？

score 0 · Accepted Answer

你在这里打电话strum()：

Stage.prototype.checkPoint = function(x, y, zone) {
    if(zone.inside(x, y)) {
        zone.string.strum();
    }
};

为什么不在此处添加<audio>标识符？我想你想播放的声音取决于 x 和 y 坐标？

Stage.prototype.checkPoint = function(x, y, zone) {
    if(zone.inside(x, y)) {
        zone.string.strum(getAudioID(x, y));
    }
};

你如何填写getAudioID(x, y)取决于你（我不是音乐家，所以我真的不知道:)）

当然，您还需要将strum()方法更改为如下所示：

GuitarString.prototype.strum = function(audioID) {
    this._strumForce = 5;
    document.getElementById(audioID).play();
};

（到这里为止非常适合您当前的设计。）

更好的方法是在实例化吉他弦对象时添加audioID到您的类中。GuitarString所以每个吉他弦（对象）都使用自己的音轨。

尽管这需要对您的代码进行一些更大的修改，但我建议您这样做，因为它会产生非常清晰易懂的代码！

还可以查看JavaScript / HTML5 中的音效，<audio>它展示了如何在不使用-tag的情况下播放音轨。当您有许多音频片段时，这特别有用！

1 回答 1