0

viendo tutoriales para practicar realice xilófono (instrumento musical) y cree un par de botones que reproducen un ritmo con determinadas de notas.

Mi problema es que si doy click a uno de los btn para reproducir un ritmo e inmediatamente le doy a otro btn los dos ritmos se solapan... Como haría para hacer de se detuviera el primer ritmo si le doy click a otro?

Dejo el código a continuación:

// do 0
// re 1
// mi 2
// fa 3
// sol 4
// la 5
// si 6
// do+ 7

var notes = $('.sound');

var note1 = [0,0,0,3,5,  0,0,0,3,5,  3,3,2,2,1,1,0,  0,0,0,2,4,  0,0,0,2,4,  7,7,6,5,4,3,1,0];
var tempo1 = [1,1,1,2,3,  1,1,1,2,3,  1,1,1,1,1,1,3,  1,1,1,2,3,  1,1,1,2,3,  2,1,1,1,1,1,1,1];

var note2 = [2,2,2,  2,2,2,  2,4,0,1,2,  3,3,3,  3,2,2,  2,1,1,2,1,4,  2,2,2,  2,2,2,  2,4,0,1,2,  3,3,3,  3,2,2,  4,4,3,1,0];
var tempo2 = [1,1,2,  1,1,2,  1,1,1,1,4,  1,1,2,  1,1,2,  1,1,1,1,2,2,  1,1,2,  1,1,2,  1,1,1,1,4,  1,1,2,  1,1,2,  1,1,1,1,4];

var note3 = [0,0,1,0,3,2,  0,0,1,0,4,3,  0,0,7,5,3,3,2,1,  6,6,5,3,4,3];
var tempo3 = [2,1,2,2,2,3,  2,1,2,2,2,3,  2,1,2,2,2,2,2,3,  2,1,2,2,2,3];

var note4 = [0,0,4,4,5,5,4,5,5,2,2,1,1,0,  4,4,3,3,2,2,1,4,4,3,3,2,2,1,  0,0,4,4,5,5,4,3,3,2,2,1,1,0];
var tempo4 = [2,2,2,2,2,2,4,2,2,2,2,2,2,3,  2,2,2,2,2,2,4,2,2,2,2,2,2,3,  2,2,2,2,2,2,4,2,2,2,2,2,2,3];

var note5 = [7,7,5,6,4,7,7,5,6,4,7,7,6,5,4,3,1,  6,6,5,4,3,1,1,2,3,4,4,3,2,1,0];
var tempo5 =[1,2,1,1,1,1,2,1,1,1,1,2,1,1,1,1,2,  1,2,1,1,1,1,2,1,1,1,2,1,1,1,2];

$('.note').click(function() {
  var num = parseInt(this.id);
  play(num);
});

$('#btn1').click(function() {
  var count = 0;
  for(var i= 0; i < note1.length; i++) {
    setTimeout(function(sound) {
      play(note1[sound]);
    }, rhythm1(i) * 350, i);
  }
});

$('#btn2').click(function() {
  var count = 0;
  for(var i= 0; i < note2.length; i++) {
    setTimeout(function(sound) {
      play(note2[sound]);
    }, rhythm2(i) * 350, i);
  }
});

$('#btn3').click(function() {
  var count = 0;
  for(var i= 0; i < note3.length; i++) {
    setTimeout(function(sound) {
      play(note3[sound]);
    }, rhythm3(i) * 350, i);
  }
});

$('#btn4').click(function() {
  var count = 0;
  for(var i= 0; i < note4.length; i++) {
    setTimeout(function(sound) {
      play(note4[sound]);
    }, rhythm4(i) * 350, i);
  }
});

$('#btn5').click(function() {
  var count = 0;
  for(var i= 0; i < note5.length; i++) {
    setTimeout(function(sound) {
      play(note5[sound]);
    }, rhythm5(i) * 350, i);
  }
});

function play(num) {
  notes[num].pause();
  notes[num].currentTime = 0;
  notes[num].play();
  $("#" + num).css({
    "font-weight": "bold",
    "color": "#FCFBE3"
  });
  setTimeout(function() {
    $("#" + num).css({
      "font-weight": "normal",
      "color": "#3a2f21"
    });
  }, 300);
}

function rhythm1(num) {
  var count = 0;
  for (var i = 0; i < num ; i++) {
    count = count + tempo1[i];
  }
  return count;
}

function rhythm2(num) {
  var count = 0;
  for (var i = 0; i < num ; i++) {
    count = count + tempo2[i];
  }
  return count;
}

function rhythm3(num) {
  var count = 0;
  for (var i = 0; i < num ; i++) {
    count = count + tempo3[i];
  }
  return count;
}

function rhythm4(num) {
  var count = 0;
  for (var i = 0; i < num ; i++) {
    count = count + tempo4[i];
  }
  return count;
}

function rhythm5(num) {
  var count = 0;
  for (var i = 0; i < num ; i++) {
    count = count + tempo5[i];
  }
  return count;
}

Si le doy click al boton#btn1 y luego hago click en el boton#btn2 como podría hacer para detener con el evento pause() el ritmo del boton#btn1?

un estoy aprendiendo y pues lo que hice fue replicar el mismo método del boton#bn1 para los otros botones. No se si esta bien tener una function para cada botón o es mejor detectarlos todos por medio de una clase y dependiendo luego de ID de cada botón ejecutar la función o guardar los botones en un array...

Espero me haya explicado bien, igual dejo el link donde esta funcionando, saludos. http://codepen.io/cartalan/pen/NjPJjj

1 respuesta 1

0

Creo que deberías Matar los Timeouts con la Funcion clearTimeout

clearTimeout(timer1)

Deberías asignar los timeouts a una Variable (timer1) para poder matarlos de ésta manera.

1
  • Oye gracias lo tendre en cuenta! Commented el 28 abr. 2017 a las 15:49

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.