1

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

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

4

1 回答 1

1

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

然后检查Event.path数组属性（它公开目标元素的路径）以检查它是否在键盘音符内单击（应该在 index 处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.

于 2019-10-22T17:28:28.553 回答