如何将事件侦听器添加到 tone.js 中正在播放的音符

Question

我正在构建一个由 Tone.js 提供支持的小型网络应用程序来训练自己弹奏钢琴（可能还会进行一些其他练习）。到目前为止，您可以选择根音符和音阶类型并单击播放，它将循环播放该音阶。还有一个 keyboard/synth 是我从 tone.js 示例之一中提取的，您可以单击钢琴键，使用您的 querty 键盘上的键，或 select 连接到您的 midi 键盘计算机使用和播放声音。

下一步我要做的是创建一个条，当弹奏音阶中的音符时它会亮起绿色，而当弹奏音阶外的音符时它会亮起红色，并且可能会记录一个音阶中有多少个音符行被正确播放或类似的东西。我运行遇到的问题是似乎无法直接从 tone.js 获取用户正在演奏的音符。我可以将键盘上的按键转换为音符，仅此而已。我无法从单击键盘的人那里捕获任何事件。我也无法从 tone.js 获得 selected 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

Answer 1

您可以在主文档中收听 mousedown 事件。

然后检查 Event.path 数组属性（它公开了目标元素的路径）以检查它是否在键盘音符内单击（应该在索引 [=13 处） =]).您还可以在索引 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。

如何将事件侦听器添加到 tone.js 中正在播放的音符

How to add an event listener to the notes being played in tone.js

javascript

shadow-dom

web-midi

tone.js