如何将事件侦听器添加到在tone.js中播放的注释中

Question

我正在开发一个由Tone.js提供动力的小型网络应用程序，用来训练自己弹钢琴(或许还有其他一些练习)。到目前为止，您可以选择根注释和缩放类型，然后单击play，它将循环该缩放。还有一个键盘/合成器，我从其中一个tone.js例子中获得，你可以点击钢琴键，使用你的querty键盘上的键，或者选择一个midi键盘连接到你的电脑上来使用和播放声音。

下一步我要做的是创建一个条形，当播放音阶中的一个音符时，它会亮起绿色的颜色，而当一个音阶之外的音符被播放时，它会显示出红色的音符，也许还会记录连续播放多少个音符，或者类似的东西。我遇到的问题是，似乎没有办法让用户直接从tone.js上播放笔记。我可以把键盘上的按键转换成音符，但仅此而已。我不能从点击键盘的人那里捕捉到任何事件。我也无法从tone.js获得选定的midi输入设备，以便能够解释tone.js合成器旁边正在播放的钢琴键。

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

是否有人使用过tone.js和tonejs/ui，并且知道这是否可能，或者我是否必须在code.js之外对其进行编码？有什么解决办法吗？

编辑:我已经完成了v1.0.0。我能够和Tone.js一起听midi设备，并将它们转换成正在播放的音符。这是一个不错的解决方案，但正如我前面提到的，最好是直接从Tone.js synth播放音符，以简化代码，允许训练器条使用单击鼠标单击的音符，这样就可以在训练器栏上显示它们的八度音阶。

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

Answer 1

例如，您可以在主文档上侦听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' ) )
  }
} )

注意:在火狐上，你应该使用composedPath而不是path。