Oh MyUtils

Metrónomo - Detector de BPM por Toque & Pista de Clic en Línea

Detecte BPM tocando al ritmo de la música, reproduzca una pista de clic precisa con tempo ajustable, compases, subdivisiones e indicador visual de pulso — 100% del lado del cliente usando Web Audio API.

Proteja sus oídos. Comience con un nivel de volumen bajo.

Toque para comenzar...

100% del lado del cliente — Todo el audio se genera en su navegador, no se envían datos al servidor

Preguntas frecuentes

¿Qué es un metrónomo y para qué se utiliza?

Un metrónomo es un dispositivo o herramienta que produce clics o pulsos constantes a un tempo configurable, medido en pulsaciones por minuto (BPM). Los músicos utilizan metrónomos para desarrollar un timing consistente, practicar a tempos específicos y aumentar gradualmente la velocidad manteniendo la precisión rítmica. Este metrónomo en línea también incluye una función de tap tempo que permite detectar el BPM de cualquier canción tocando al ritmo del pulso.

¿Cómo uso la función de tap tempo?

Toca el botón grande TAP repetidamente al ritmo de la música que estás escuchando. Después de 2 o más toques, la herramienta calcula el intervalo promedio entre tus toques y muestra el BPM detectado. Para mayor precisión, toca durante 4-8 pulsos siguiendo el bombo o el pulso principal. El indicador de estabilidad muestra cuán consistentes son tus toques. Una vez que tengas una lectura de BPM, haz clic en Use this BPM para transferirlo directamente al metrónomo para practicar.

¿Cómo uso la pista de clic del metrónomo?

Cambia a la pestaña Metrónomo, establece el BPM deseado usando el deslizador o la entrada numérica, selecciona un compás (por ejemplo, 4/4 para compás común) y presiona Reproducir. El metrónomo produce clics audibles con un tiempo fuerte acentuado en el pulso 1. Observa el indicador visual de pulso para ver la posición actual dentro del compás. Ajusta el volumen, la subdivisión y el sonido del clic según tus necesidades de práctica.

¿Se envían mis datos a un servidor?

No. Esta herramienta es 100% del lado del cliente y utiliza la Web Audio API integrada en tu navegador. Toda la síntesis de audio, detección de tempo y programación de pulsos ocurren completamente en tu dispositivo. Ningún dato de audio, lectura de BPM ni configuración se transmite jamás a un servidor. La herramienta funciona completamente sin conexión después de la carga inicial de la página.

¿Por qué es importante la precisión del timing y cómo la logra este metrónomo?

La práctica musical requiere una precisión de timing de unos pocos milisegundos. Los métodos integrados setTimeout/setInterval de JavaScript no son lo suficientemente precisos por sí solos porque el hilo principal puede retrasarse por otras tareas. Este metrónomo utiliza el patrón estándar de la industria de programador anticipado (lookahead scheduler): un temporizador setInterval se activa frecuentemente y programa eventos de audio con anticipación utilizando el reloj de alta resolución AudioContext.currentTime de la Web Audio API. Esto garantiza que los clics sean precisos dentro de 1-2 milisegundos sin desfase, incluso durante sesiones de práctica prolongadas.

¿Qué son los compases y cuáles se admiten?

Un compás indica cuántos pulsos hay en cada medida y qué valor de nota recibe un pulso. Esta herramienta admite: 4/4 (compás común, usado en la mayoría del pop/rock), 3/4 (vals), 2/4 (marcha), 6/8 (compuesto binario, común en gigas), 5/4 (irregular, como en Take Five) y 7/8 (irregular, común en la música balcánica). Cada compás tiene patrones de acentuación apropiados para ayudarte a sentir la estructura rítmica.

¿Cuál es la diferencia entre las subdivisiones?

Las subdivisiones dividen cada pulso principal en unidades más pequeñas para una práctica rítmica más granular. Ninguna reproduce solo pulsos de negra. Corcheas agrega un clic entre cada pulso (2 por pulso). Tresillos divide cada pulso en 3 partes iguales. Semicorcheas divide cada pulso en 4 partes iguales. Los clics de subdivisión son más suaves que los pulsos principales para mantener la jerarquía del pulso.

Ejemplos de código

// Web Audio API Metronome with Lookahead Scheduler

class Metronome {
  constructor(bpm = 120, beatsPerMeasure = 4) {
    this.bpm = bpm;
    this.beatsPerMeasure = beatsPerMeasure;
    this.isPlaying = false;
    this.currentBeat = 0;
    this.nextNoteTime = 0;
    this.timerID = null;
    this.audioContext = null;
  }

  start() {
    if (this.isPlaying) return;
    this.audioContext = new AudioContext();
    this.isPlaying = true;
    this.currentBeat = 0;
    this.nextNoteTime = this.audioContext.currentTime;
    this.timerID = setInterval(() => this._scheduler(), 25);
  }

  stop() {
    this.isPlaying = false;
    if (this.timerID) clearInterval(this.timerID);
    if (this.audioContext) this.audioContext.close();
  }

  _scheduler() {
    while (this.nextNoteTime < this.audioContext.currentTime + 0.1) {
      this._playClick(this.nextNoteTime, this.currentBeat === 0);
      this.nextNoteTime += 60.0 / this.bpm;
      this.currentBeat = (this.currentBeat + 1) % this.beatsPerMeasure;
    }
  }

  _playClick(time, isAccent) {
    const osc = this.audioContext.createOscillator();
    const gain = this.audioContext.createGain();
    osc.frequency.value = isAccent ? 1000 : 800;
    gain.gain.setValueAtTime(isAccent ? 1.0 : 0.7, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.03);
    osc.connect(gain);
    gain.connect(this.audioContext.destination);
    osc.start(time);
    osc.stop(time + 0.03);
  }
}

// Tap Tempo Detector
function createTapDetector(maxTaps = 8, resetMs = 2000) {
  const taps = [];
  let resetTimer = null;

  return {
    tap() {
      const now = performance.now();
      if (resetTimer) clearTimeout(resetTimer);
      resetTimer = setTimeout(() => { taps.length = 0; }, resetMs);

      taps.push(now);
      if (taps.length > maxTaps) taps.shift();
      if (taps.length < 2) return null;

      const intervals = [];
      for (let i = 1; i < taps.length; i++) {
        intervals.push(taps[i] - taps[i - 1]);
      }
      const avg = intervals.reduce((a, b) => a + b) / intervals.length;
      return Math.round(60000 / avg);
    },
    reset() {
      taps.length = 0;
    },
  };
}

// Usage
const metronome = new Metronome(120, 4);
metronome.start();
setTimeout(() => metronome.stop(), 5000);

Herramientas relacionadas