Un metrónomo web parece simple: reproducir un clic cada 500 milisegundos. Sin embargo, una versión hecha con setInterval o setTimeout a menudo se tambalea. La razón está en cómo funcionan los temporizadores de JavaScript.
Por qué se desvían los temporizadores
setTimeout y setInterval garantizan un retraso mínimo, no uno exacto. Las funciones de retorno se ejecutan en el hilo principal, así que si la página está ocupada dibujando o ejecutando otro código, la llamada se dispara tarde. Los navegadores también limitan los temporizadores en las pestañas en segundo plano a aproximadamente uno por segundo. Unos pocos milisegundos de variación son audibles en un ritmo.
El reloj de audio
La API Web Audio tiene su propio reloj, audioContext.currentTime, que avanza en segundos con una precisión muy alta y lo maneja el hardware de audio. Los sonidos se pueden programar para empezar en un momento exacto de ese reloj, por ejemplo oscillator.start(time). Una vez programados, el navegador los reproduce con precisión aunque el hilo principal esté ocupado.
El planificador anticipado
El diseño clásico combina ambos:
- Un temporizador se dispara con frecuencia, por ejemplo cada 25 ms.
- Cada vez, comprueba qué pulsos caen dentro de los próximos 100 ms aproximadamente del reloj de audio.
- Programa esos pulsos con precisión en el reloj de audio.
- Avanza un puntero al siguiente instante de pulso en un intervalo de pulso.
El temporizador solo tiene que ser más o menos puntual. La precisión viene del reloj de audio. Si el temporizador se retrasa unos milisegundos, los siguientes pulsos ya están en cola.
Cambiar el tempo
Como el siguiente instante de pulso se calcula a partir del anterior, un cambio de BPM surte efecto con suavidad en el pulso siguiente, sin reiniciar.
Retroalimentación visual
El indicador parpadeante debe sincronizarse con el tiempo de audio, no con el temporizador; de lo contrario se verá desfasado. Un método habitual es poner en cola el instante del pulso y actualizar lo visual en un fotograma de animación cuando el reloj llega a él.
Límites que quedan
Los auriculares Bluetooth añaden latencia, así que el clic puede sonar más tarde que la pantalla. Los navegadores también exigen una acción del usuario antes de iniciar el audio, por eso el metrónomo empieza con la pulsación de un botón.
Preguntas frecuentes
¿Mantiene el tiempo en una pestaña en segundo plano? El audio programado sigue sonando, pero las actualizaciones visuales y el temporizador del planificador pueden verse limitados.
¿Por qué algunos dispositivos suenan tarde? La latencia de salida depende del hardware y de los controladores de audio.