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

Question

我正在构建一个由 Tone.js 提供支持的小型网络应用程序，用于训练自己弹奏钢琴的关键(可能还有其他一些练习)。到目前为止，您可以选择根音符和音阶类型并单击播放，它将循环播放该音阶。还有一个键盘/合成器，我从其中一个 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 合成器中播放音符以简化代码，允许训练栏处理用鼠标单击的音符，等等正在演奏的音符可以在训练条上显示其 Octave 音阶数。

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

Answer 1

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

然后检查 Event.path 数组属性(它公开了目标元素的路径)以检查它是否在键盘音符内单击(应该在索引 3 处) )。您还可以在索引 7 处找到 Octave 音阶。

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。