Veran estoy intentando hacer una especie de piano donde tu le pasas las notas en un arreglo y el piano las ira tocando conforme lo indique, la idea es que se cuche la melodía al mismo tiempo que se van coloreando las teclas que se tocan, ya casi tengo la parte de colorear las teclas pero hay un pequeño detalle, estoy usando classList.add y classList.remove para agregar y remover el color respectivamente por medio de una clase css, les pongo el ejemplo de lo que me pasa: Primero se tocan 2 teclas fa en diferente frecuencia, despues se debe tocar una tecla fa de las anteriores con otra distinta, en las 2 primeras teclas fa todo va bien, se añade y desaparece la clase correctamente, pero cuando quiero pasar a la segunda ronda de notas la clase 'active' no se añade a mi tecla fa y en la tercera ronda de teclas pasa algo parecido, les dejo mi codigo:
const reproducirRola = document.getElementById('comenzar');
class teclas {
constructor(nota) {
this.tecla = document.getElementById(`${nota}`);
}
}
class cancion {
constructor() {
this.empezar();
}
empezar() {
let comenzar = document.getElementById('comenzar');
comenzar.addEventListener('click', this.tocarIntro());
}
tocarIntro() {
let contador = 0;
for (let elemento in intro) {
contador++;
setTimeout(() => {
this.iluminarTeclas(intro[elemento][0], intro[elemento][1])
console.log(intro[elemento][0]);
console.log(intro[elemento][1])
}, 1000 * contador);
}
}
iluminarTeclas(nota1, nota2) {
const tecla1 = nota1;
const tecla2 = nota2;
tecla1.classList.add('active');
tecla2.classList.add('active');
setTimeout(() => {
tecla1.classList.remove('active')
tecla2.classList.remove('active')
console.log(tecla1)
console.log(tecla2)
}, 1000)
}
}
escala2 = {
do: new teclas("do1"),
re: new teclas("re1"),
mi: new teclas("mi1"),
fa: new teclas("fa1"),
sol: new teclas("sol1"),
la: new teclas("la1"),
si: new teclas("si1"),
}
escala3 = {
do: new teclas("do2"),
re: new teclas("re2"),
mi: new teclas("mi2"),
fa: new teclas("fa2"),
sol: new teclas("sol2"),
la: new teclas("la2"),
si: new teclas("si2"),
}
escala4 = {
do: new teclas("do3"),
re: new teclas("re3"),
mi: new teclas("mi3"),
fa: new teclas("fa3"),
sol: new teclas("sol3"),
la: new teclas("la3"),
si: new teclas("si3"),
}
escala5 = {
do: new teclas("do4"),
re: new teclas("re4"),
mi: new teclas("mi4"),
fa: new teclas("fa4"),
}
Bemoles1 = {
do: new teclas("doB1"),
re: new teclas("reB1"),
fa: new teclas("faB1"),
sol: new teclas("solB1"),
la: new teclas("laB1")
}
Bemoles2 = {
do: new teclas("doB2"),
re: new teclas("reB2"),
fa: new teclas("faB2"),
sol: new teclas("solB2"),
la: new teclas("laB2")
}
Bemoles3 = {
do: new teclas("doB3"),
re: new teclas("reB3"),
fa: new teclas("faB3"),
sol: new teclas("solB3"),
la: new teclas("laB3")
}
Bemoles4 = {
do: new teclas("doB4"),
re: new teclas("reB4"),
fa: new teclas("faB4"),
}
intro = {
parte1: [escala2.fa.tecla, escala3.fa.tecla],
paerte2: [Bemoles1.la.tecla, escala3.fa.tecla],
parte3: [Bemoles1.sol.tecla, escala3.fa.tecla],
parte4: [Bemoles1.re.tecla, Bemoles2.re.tecla]
}
reproducirRola.addEventListener('click', reproducirCancion);
function reproducirCancion() {
window.cancion = new cancion()
}
Como pueden ver en la imagen la tecla con id="fa2" se añade la clase active sin problemas, despues en el codigo se elemina, pero posteriormente se le indica que se añada otra vez y esto no sucede. ¿Alguien tiene alguna idea de porque sucede esto?