Как я могу сделать метроном с помощью jQuery?

Это не обязательно должен быть щелчок. Мне нужно что-то, чтобы визуализировать определенный темп/метроном

Как сделать так, чтобы звук или изображение появлялись в определенном темпе? Так что, возможно, с fade или toggle(), но затем с темпом, который вы можете настроить в поле ввода.

Любые идеи?


jquery performance tempo adjustable
person Opoe    schedule 16.02.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward 

function metronomeTick() {
   $("#metronome").toggle();
   setTimeout("metronomeTick()", 1000*60/$("#bpm").val());
}

metronomeTick();

Метод JavaScript setInterval() обычно не рекомендуется, поскольку он не учитывает "время выполнения" функции (сколько времени требуется, например, для фактической визуализации тика). Если подумать, setInterval в этом случае был бы еще лучше, поскольку он критичен по времени.

С setInterval() код будет выглядеть примерно так:

var intervalReference = setInterval("metronomeTick()", 1000*60/$("#bpm").val());

function metronomeTick() {
  // Do tick visualisation here, but make sure it takes only a reasonable amount of time
  // Less than 1000*60/bpm, that is
}

$("#bpm").change(function() {
  clearInterval(intervalReference);
  intervalReference = setInterval("metronomeTick()", 1000*60/$(this).val());
});
person sanderd    schedule 16.02.2011
comment
Хорошо, спасибо за этот ответ, я попробовал это в jsfiddle, как я могу позволить пользователю настроить удары в минуту / скорость? - person Opoe; 16.02.2011
comment
Мои примеры кода считывают значение текстового поля #bpm, поэтому просто добавьте на свою страницу ‹input type=text id=bpm val=120 /›. - person sanderd; 16.02.2011
comment
Конечно мой плохой! Теперь у меня есть это; jsfiddle.net/kN3rM/ что я делаю не так? - person Opoe; 16.02.2011
comment
как я могу добавить руку и анимировать то же самое - person madLokesh; 03.02.2014

arrow_upward
1
arrow_downward

Я думаю, вам следует взглянуть на некоторые расширения и параметры анимации для смягчения. вы можете начать здесь http://api.jquery.com/animate/ и, возможно, вы сможете код из этого примера: http://www.irengba.com/codewell/loop.html

person epeleg    schedule 16.02.2011