1

Hola que tal? Estoy tratando de crear una especie de sintetizador y me gustaría saber si se puede tocar dos o mas notas al mismo tiempo al presionar varias teclas, ya que al hacerlo , solo me ejecuta una sola función. Codigo:

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

Con esta función y dos addEvent, uno con keydown y otro keyup. Se presionan las notas según la letra que se le asignó, pero solo una a la vez. Desde ya muchas gracias!

AddEvent de Key Down resumido:

addEvent(document, "keydown", function (e) {
    

     if(!teclaPresionada  ){
    
        if(event.keyCode == 68){
          console.log("Tecla Presionada");
          document.getElementById("notado").style.background="red"
         document.getElementById("suenado").play();
        
        }

    if(event.keyCode == 70){
          console.log("Tecla Presionada");
          document.getElementById("notare").style.background="blue"
          document.getElementById("suenare").play();
        }
    }

AddEvent de Key Up:

 addEvent(document, "keyup", function (e) {
    
      if(teclaPresionada){
        
        var todo = document.getElementsByClassName("nota")
        console.log("Tecla Liberada");
        for(var i = 0; i < todo.length; i++){
        todo[i].style.background = null;
    }
        
        teclaPresionada = false;
      }
      
    });
2
  • En principio no habría problema para hacer lo que quieres, el problema no está en esta parte del código. Si crearas un ejemplo mínimo verificable quizá podríamos ayudarte a resolverlo el 11 ene. 2021 a las 14:37
  • Hola! Ahi edite mi pregunta, no agregue todos los keycode para no usar tanto codigo, pero es uno por cada nota.
    – Fede B
    el 11 ene. 2021 a las 15:06

1 respuesta 1

1

Creo que la causa es que tienes una variable global (teclaPresionada) que no permite más de una tecla presionada a la vez. Yo he podido reproducir dos audios a la vez usando botones o las teclas A y B, por ejemplo:

const audio0 = document.getElementById('sound0');
const audio1 = document.getElementById('sound1');

const A = document.getElementById('ab');
const B = document.getElementById('bb');

A.addEventListener('click',() => audio0.play());
B.addEventListener('click',() => audio1.play());

document.addEventListener("keydown", event => {
  console.log(event.code);
  if (event.code == 'KeyA'){
    console.log("Tecla A Presionada");
    audio0.play();
  }

  if (event.code == 'KeyB'){
    console.log("Tecla B Presionada");
    audio1.play();
  }
});
<audio id="sound0">
  <source crossorigin="anonymous" src="https://freesound.org/data/previews/95/95332_1579599-lq.mp3"/>
</audio>
<audio id="sound1">
  <source crossorigin="anonymous" src="https://freesound.org/data/previews/95/95332_1579599-lq.mp3"/>
</audio>
<button id="ab">A</button>
<button id="bb">B</button>

3
  • Perfecto, use el metodo de addEventListener y me funciono! Muchas gracias
    – Fede B
    el 11 ene. 2021 a las 16:38
  • Tu código parece sacado de un tutorial antiguo, con código que funciona en versiones antiguas de IE. Por ejemplo, usar event.keyCode está desaconsejado desde hace años. Y addEventListener está ya soportado por todos los navegadores el 11 ene. 2021 a las 17:43
  • Estuve buscando alternativas a event.keyCode pero no encontré ninguna que funcione como tal
    – Fede B
    el 12 ene. 2021 a las 10:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.