Как добавить прослушиватель событий к нотам, воспроизводимым в tone.js - PullRequest
Новая
       95

Как добавить прослушиватель событий к нотам, воспроизводимым в tone.js

1 голос
/ 21 октября 2019

Я создаю небольшое веб-приложение на базе Tone.js, чтобы научиться играть на пианино в тональности (и, возможно, по ходу выполнения некоторых других упражнений). Пока что вы можете выбрать корневую ноту и тип шкалы и нажать кнопку воспроизведения, и она зациклит эту шкалу. Также есть клавиатура / синтезатор, которую я взял из одного из примеров tone.js, в котором вы можете нажимать клавиши пианино, использовать клавиши на своей клавиатуре или выбрать миди-клавиатуру, подключенную к вашему компьютеру, для использования и воспроизведения звука.

Следующий шаг, который я пытаюсь сделать, - это создать полосу, которая светится зеленым при воспроизведении ноты в шкале и красным при воспроизведении ноты вне шкалы, и, возможно, записывает, сколько нот встроки воспроизводятся правильно или что-то в этом роде. Проблема, с которой я сталкиваюсь, заключается в том, что, похоже, нет способа получить ноты, воспроизводимые пользователем напрямую из tone.js. Я могу преобразовать нажатия клавиш на клавиатуре в заметки, но это все. Я не могу запечатлеть ни одного события, когда кто-то нажимает на клавиатуру. Я также не могу получить выбранное миди-устройство ввода из tone.js, чтобы иметь возможность интерпретировать клавиши пианино, которые воспроизводятся вместе с синтезатором tone.js.

Я пытался подключить прослушиватели событий с помощью jquery, поскольку виртуальные клавиши пианиноэто просто кнопки, но они недоступны в теневом DOM.

Кто-нибудь работал с tone.js и tonejs / ui и знает, возможно ли это, или я должен как-то кодировать это вне code.js? Любые идеи для обходных путей?

Редактировать: я закончил мой v1.0.0. Я мог слушать MIDI-устройства вместе с Tone.js и конвертировать их в воспроизводимые ноты. Это достойное решение, но, как я уже упоминал, было бы лучше получить ноты, воспроизводимые непосредственно из синтезатора Tone.js, чтобы упростить код, позволить панели тренера работать с нотами, щелкаемыми мышью, и т. Д. воспроизводимые ноты могут отображаться с октавным числом на панели тренера.

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

1 Ответ

1 голос
/ 22 октября 2019

Вы можете прослушать событие 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.

...