Estoy creando una pequeña aplicación web impulsada por Tone.js para entrenarse a tocar el piano en clave (y tal vez algunos otros ejercicios en el camino). Hasta ahora, puede elegir la nota fundamental y el tipo de escala y hacer clic en reproducir y se repetirá esa escala. También hay un teclado / sintetizador que tomé de uno de los ejemplos de tone.js en el que puedes hacer clic en las teclas del piano, usar las teclas de tu teclado querty o seleccionar un teclado midi conectado a tu computadora para usar y reproducir sonido.

El siguiente paso que estoy tratando de hacer es crear una barra que se ilumina en verde cuando se toca una nota en la escala y en rojo cuando se toca una nota fuera de la escala, y tal vez registrar cuántas notas seguidas se reproducen correctamente o algo como eso. El problema con el que me estoy encontrando es que parece que no hay forma de que el usuario toque las notas directamente desde tone.js. Puedo convertir las pulsaciones de teclas del teclado en notas, pero eso es todo. No puedo capturar ningún evento de alguien haciendo clic en el teclado. Tampoco puedo obtener el dispositivo de entrada midi seleccionado de tone.js para poder interpretar las teclas del piano que se tocan junto con el sintetizador tone.js.

Intenté adjuntar oyentes de eventos usando jquery, ya que las teclas del piano virtual son solo botones, pero son inaccesibles en la sombra DOM.

¿Alguien ha trabajado con tone.js y tonejs / ui y sabe si esto es posible o tengo que codificarlo fuera de code.js de alguna manera? ¿Alguna idea de soluciones alternativas?

Editar: he completado mi v1.0.0. Pude escuchar dispositivos midi junto con Tone.js y convertirlos a las notas que se están reproduciendo. Esta es una solución decente, pero como mencioné, sería mejor hacer que las notas se reproduzcan directamente desde el sintetizador Tone.js para simplificar el código, permitir que la barra de entrenamiento funcione con las notas en las que se hace clic con el mouse, y así que las notas que se están reproduciendo se pueden mostrar con su número de octava en la barra de entrenamiento.

Repositorio de git: https://github.com/erikstagg/music-theory

1
erikstagg 21 oct. 2019 a las 20:55

1 respuesta

La mejor respuesta

Puede escuchar el evento mousedown, por ejemplo, en el documento principal.

Luego verifique la propiedad de la matriz Event.path (expone la ruta del elemento de destino) para verificar si es un clic dentro de la nota del teclado (que debería estar en el índice 3). También puede encontrar la octava en el índice 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' ) )
  }
} )

NB: en Firefox debe usar composedPath en lugar de path.

1
Supersharp 23 oct. 2019 a las 15:38