music_note Metrónomo en Línea (Tap Tempo) star

Por Qué la Mayoría de los Metrónomos de Navegador se Desincronizan

La forma obvia de construir un metrónomo en JavaScript es setInterval(playClick, 60000 / bpm). Funciona durante unos segundos — y luego deja de hacerlo. setInterval solo garantiza que una función de retorno se dispare no antes del retraso solicitado, nunca cuánto más tarde podría realmente ejecutarse. El hilo principal de JS se comparte con todo lo que hace la página — actualizaciones del DOM, cálculos de diseño, recolección de basura — y cualquiera de ellos puede retrasar un temporizador pendiente decenas de milisegundos. Para la mayoría del código de interfaz eso es invisible; para un metrónomo es fatal, ya que un clic con 40 ms de retraso en este pulso y 10 ms en el siguiente se percibe como una deriva audible en lugar de sonar simplemente «un poco desfasado», engañando activamente a un músico que practica con él.

Los músicos confían en un metrónomo precisamente porque la percepción humana del tiempo constante es poco fiable sin una referencia externa — todo el propósito del dispositivo desde que Johann Maelzel patentó la versión de cuerda en 1815. Un metrónomo de software que él mismo se desincroniza frustra ese propósito, y la solución no es un temporizador más ingenioso: todo temporizador de JS, incluido requestAnimationFrame, comparte el mismo cuello de botella del hilo principal. La verdadera solución es dejar de pedirle a JavaScript que produzca el sonido en el momento exacto.

Programación Anticipada (Look-Ahead Scheduling): Cómo Este Metrónomo se Mantiene Preciso

Esta herramienta utiliza el patrón popularizado por Chris Wilson, antiguo miembro del equipo de Web Audio de Google Chrome, en su artículo ampliamente citado «A Tale of Two Clocks»: separar por completo la lógica de programación del temporizado del sonido. El AudioContext de la Web Audio API se ejecuta en su propio hilo de audio con un reloj de precisión de muestra, expuesto a JavaScript como AudioContext.currentTime. Llamar a osc.start(t) con una marca de tiempo futura de ese reloj hace que el motor de audio lo reproduzca exactamente en t, sin importar qué esté haciendo el hilo principal en ese instante — nunca tuvo que «despertarse» justo en el pulso para que ocurriera.

El único trabajo del hilo principal es llevar la contabilidad: aproximadamente cada 25 ms, un planificador comprueba si hay pulsos dentro de los siguientes 100 ms y llama a osc.start() para cada uno con su exacto currentTime futuro. Como ese bucle solo necesita ser aproximadamente puntual, el jitter habitual no causa ningún problema audible — el sonido sigue programado con precisión de muestra. Cada clic es una ráfaga de oscilador de ~30 ms, más agudo en el primer pulso de cada compás para marcar un acento audible, sincronizado con un pulso visual correspondiente.

Tap Tempo resuelve un problema distinto: encontrar el BPM de una música sin ninguna partitura de la que leerlo. Da toques al ritmo del pulso; la herramienta mide el intervalo entre toques y lo convierte con 60000 / intervaloPromedioMs. Se requieren al menos dos toques, y promediar los toques recientes suaviza los pequeños errores de temporización. Una pausa de más de dos segundos reinicia la secuencia, ya que normalmente eso significa que se perdió el pulso en lugar de que este se haya ralentizado drásticamente.