如何向tone.js中播放的音符添加事件监听器

Question

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

我要做的下一步是创建一个条，当演奏音阶中的音符时亮绿色，演奏音阶外的音符时亮红色，并且可能记录一行中有多少音符播放正确或类似的东西。我遇到的问题是似乎没有办法直接从tone.js 获取用户正在播放的音符。我可以将键盘上的按键转换为音符，仅此而已。我无法捕捉到有人点击键盘的任何事件。我也无法从tone.js 获取选定的midi 输入设备，以便能够解释与tone.js 合成器一起演奏的钢琴键。

我尝试使用 jquery 附加事件侦听器，因为虚拟钢琴键只是按钮，但它们在 shadow 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 数组属性（它公开目标元素的路径）以检查它是否在键盘音符内单击（应该在索引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。