javascript - 如何将事件监听器添加到tone.js中播放的音符

我正在构建一个由Tone.js驱动的小型Web应用程序，以训练自己弹奏键盘琴（可能还会进行一些其他练习）。到目前为止，您可以选择根音符和音阶类型，然后单击“播放”，它将循环播放该音阶。我还从其中一个tone.js示例中获取了一个键盘/合成器，您可以单击钢琴键，使用键盘上的键或选择连接到计算机的Midi键盘来使用和播放声音。

我要尝试做的下一步是创建一个条，该条会在弹奏音阶中的音符时亮绿灯，在弹奏音阶之外的音符时亮红灯，并记录下连续播放了多少音符或这样的事情。我遇到的问题是，似乎没有办法直接从tone.js获取用户正在演奏的音符。我可以将键盘上的按键转换为音符，仅此而已。我无法捕获任何人单击键盘的事件。我也无法从tone.js获取所选的midi输入设备，以能够解释与tone.js合成器一起演奏的钢琴键。

我尝试使用jquery附加事件监听器，因为虚拟钢琴键只是按钮，但是在影子DOM中无法访问它们。

是否有人使用tone.js和tonejs / ui知道是否可行，还是我必须以某种方式在code.js之外进行编码？有任何解决方法的想法吗？

编辑：我已经完成了我的v1.0.0。我能够与Tone.js一起收听Midi设备，并将它们转换为正在播放的音符。这是一个不错的解决方案，但是正如我已经提到的，最好直接从Tone.js合成器中播放音符以简化代码，允许训练器栏使用鼠标单击音符，等等。可以在教练栏上以八度数显示正在播放的音符。

git回购：https://github.com/erikstagg/music-theory

最佳答案

例如，您可以在主文档上收听mousedown事件。

然后检查Event.path数组属性（公开目标元素的路径），以检查其是否在键盘音符（应位于索引3）内单击。您还可以在索引7中找到八度。

document.addEventListener( 'mousedown', ev => {
  if ( ev.path[3].localName == 'tone-keyboard-note' ) {
    console.log( 'note #' + ev.path[3].getAttribute( 'note' ) )
    console.log( 'octave ', ev.path[7].getAttribute( 'octave' ) )
  }
} )

注意：在Firefox上，您应该使用composedPath而不是path。

关于javascript - 如何将事件监听器添加到tone.js中播放的音符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58491749/