Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Put your hand on your chest and stay very quiet. Can you feel your heart thumping with a regular *thump... thump... thump*?

That never-ending tick of a clock or gentle thump of your heart is just like music.

In music, a **steady beat** is an even, repeating pulse that stays at the exact same speed from start to finish.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 20px;
    }

    /* Track & Beat Grid */
    .beat-container {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .beats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      position: relative;
    }

    .beat-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 18px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
      position: relative;
    }

    .beat-card.active {
      border-color: #ff4757;
      background: #fff5f6;
      box-shadow: 0 6px 18px rgba(255, 71, 87, 0.25);
    }

    .beat-num {
      font-size: 28px;
      font-weight: 800;
      color: #1e90ff;
      line-height: 1;
      transition: color 0.15s ease;
    }

    .beat-card.active .beat-num {
      color: #ff4757;
    }

    .beat-icon {
      font-size: 24px;
      line-height: 1;
      opacity: 0.35;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .beat-card.active .beat-icon {
      opacity: 1;
      transform: translateY(-2px);
    }

    /* Interval Brackets (Equal Spacing Indicator) */
    .spacing-ruler {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding: 0 10%;
    }

    .interval-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .bracket-line {
      width: 100%;
      height: 4px;
      background: #1e90ff;
      border-radius: 2px;
      position: relative;
    }

    .bracket-line::before,
    .bracket-line::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 2px;
      height: 12px;
      background: #1e90ff;
      border-radius: 1px;
    }
    .bracket-line::before { left: 0; }
    .bracket-line::after { right: 0; }

    .interval-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e90ff;
      letter-spacing: 0.5px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 540px;
    }

    .btn {
      appearance: none;
      border: none;
      outline: none;
      background: #ffffff;
      color: #1e2945;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #ff4757;
      border-color: #ff4757;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    }

    .btn-primary:active {
      background: #e03b4a;
      border-color: #e03b4a;
    }

    .tempo-group {
      display: flex;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 3px;
      gap: 4px;
    }

    .tempo-btn {
      border: none;
      background: transparent;
      padding: 7px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s;
    }

    .tempo-btn.active {
      background: #1e90ff;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="beat-container">
    <div class="beats-row">
      <div class="beat-card" id="card-0">
        <span class="beat-num">1</span>
        <span class="beat-icon">👣</span>
      </div>
      <div class="beat-card" id="card-1">
        <span class="beat-num">2</span>
        <span class="beat-icon">👣</span>
      </div>
      <div class="beat-card" id="card-2">
        <span class="beat-num">3</span>
        <span class="beat-icon">👣</span>
      </div>
      <div class="beat-card" id="card-3">
        <span class="beat-num">4</span>
        <span class="beat-icon">👣</span>
      </div>
    </div>

    <div class="spacing-ruler">
      <div class="interval-bar">
        <div class="bracket-line"></div>
        <span class="interval-label">EQUAL</span>
      </div>
      <div class="interval-bar">
        <div class="bracket-line"></div>
        <span class="interval-label">EQUAL</span>
      </div>
      <div class="interval-bar">
        <div class="bracket-line"></div>
        <span class="interval-label">EQUAL</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn btn-primary" id="toggleBtn">
      <span id="btnIcon">▶</span>
      <span id="btnText">Play Beat</span>
    </button>

    <div class="tempo-group">
      <button class="tempo-btn active" id="slowBtn">🐢 Slow</button>
      <button class="tempo-btn" id="fastBtn">🐇 Fast</button>
    </div>
  </div>

  <script>
    let audioCtx = null;
    let isPlaying = false;
    let currentBeat = 0;
    let tempoInterval = 750; // ms per beat (80 BPM)
    let timerId = null;

    const cards = [
      document.getElementById('card-0'),
      document.getElementById('card-1'),
      document.getElementById('card-2'),
      document.getElementById('card-3')
    ];
    const toggleBtn = document.getElementById('toggleBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');
    const slowBtn = document.getElementById('slowBtn');
    const fastBtn = document.getElementById('fastBtn');

    function playTone(freq, isAccent) {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'sine';
      osc.frequency.setValueAtTime(freq, audioCtx.currentTime);

      const volume = isAccent ? 0.35 : 0.22;
      gain.gain.setValueAtTime(volume, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.12);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start();
      osc.stop(audioCtx.currentTime + 0.12);
    }

    function triggerBeat() {
      cards.forEach((c, idx) => {
        if (idx === currentBeat) {
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });

      // Accent on beat 1 (880Hz), other beats (660Hz)
      const freq = (currentBeat === 0) ? 880 : 660;
      playTone(freq, currentBeat === 0);

      currentBeat = (currentBeat + 1) % 4;
    }

    function startLoop() {
      if (isPlaying) return;
      isPlaying = true;
      btnIcon.textContent = '⏸';
      btnText.textContent = 'Pause';
      triggerBeat();
      timerId = setInterval(triggerBeat, tempoInterval);
    }

    function stopLoop() {
      isPlaying = false;
      clearInterval(timerId);
      timerId = null;
      btnIcon.textContent = '▶';
      btnText.textContent = 'Play Beat';
      cards.forEach(c => c.classList.remove('active'));
      currentBeat = 0;
    }

    toggleBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopLoop();
      } else {
        startLoop();
      }
    });

    slowBtn.addEventListener('click', () => {
      slowBtn.classList.add('active');
      fastBtn.classList.remove('active');
      tempoInterval = 750;
      if (isPlaying) {
        clearInterval(timerId);
        timerId = setInterval(triggerBeat, tempoInterval);
      }
    });

    fastBtn.addEventListener('click', () => {
      fastBtn.classList.add('active');
      slowBtn.classList.remove('active');
      tempoInterval = 480;
      if (isPlaying) {
        clearInterval(timerId);
        timerId = setInterval(triggerBeat, tempoInterval);
      }
    });

    // Tap on individual cards to preview sound & select beat
    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        if (!isPlaying) {
          currentBeat = idx;
          triggerBeat();
          currentBeat = (idx + 1) % 4;
        }
      });
    });
  </script>
</body>
</html>

When you hear a song and naturally tap your foot or nod your head, you are feeling that steady beat!

What does a beat feel like when it is *not* steady?

A steady beat is like walking with even steps: step, step, step, step. If you run, freeze, and then hop, the beat becomes **uneven**.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<title>Steady Beat vs Uneven Beat</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .main-wrap {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.2s ease;
  }

  .btn.active {
    background: #22b7ff;
    color: #ffffff;
  }

  .stage {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .path-track {
    position: relative;
    height: 120px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
  }

  .ground-line {
    position: absolute;
    bottom: 24px;
    left: 4%;
    right: 4%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
  }

  .character {
    position: absolute;
    bottom: 30px;
    left: 8%;
    font-size: 38px;
    transform: translateX(-50%);
    transition: left 0.4s ease, transform 0.2s ease;
    z-index: 10;
  }

  .character.step-motion {
    transform: translateX(-50%) translateY(-10px);
  }

  .beat-nodes {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  .beat-spot {
    position: absolute;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
  }

  .marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s ease;
  }

  .beat-spot.active .marker {
    background: #2ed573;
    border-color: #2ed573;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(46, 213, 115, 0.2);
  }

  .uneven-mode .beat-spot.active .marker {
    background: #ffa502;
    border-color: #ffa502;
    box-shadow: 0 0 0 4px rgba(255, 165, 2, 0.2);
  }

  .tag {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .beat-spot.active .tag {
    color: #1e2945;
  }

  .spacing-bar {
    display: flex;
    justify-content: space-between;
    padding: 0 6%;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
  }

  .space-pill {
    padding: 2px 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .ctrl-btn {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1e2945;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ctrl-btn:hover {
    background: #f8fafc;
  }

  .sound-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
</head>
<body>

<div class="main-wrap">
  <div class="tabs">
    <button class="btn active" id="steadyBtn" onclick="setMode('steady')">Steady Beat</button>
    <button class="btn" id="unevenBtn" onclick="setMode('uneven')">Uneven Beat</button>
  </div>

  <div class="stage" id="stage">
    <div class="path-track">
      <div class="ground-line"></div>
      <div class="character" id="walker">🐻</div>
      <div class="beat-nodes" id="nodesWrap"></div>
    </div>

    <div class="spacing-bar" id="spacingGuide">
      <span class="space-pill">Equal Space</span>
      <span class="space-pill">Equal Space</span>
      <span class="space-pill">Equal Space</span>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="stepBeat()">Step →</button>
    <button class="ctrl-btn sound-btn" id="soundBtn" onclick="toggleSound()" title="Toggle Sound">🔊</button>
  </div>
</div>

<script>
  let mode = 'steady';
  let currentStep = 0;
  let isPlaying = true;
  let soundOn = false;
  let timer = null;
  let audioCtx = null;

  const configs = {
    steady: {
      steps: [
        { x: 12, label: '1', tag: 'Step', delay: 800, freq: 523 },
        { x: 37, label: '2', tag: 'Step', delay: 800, freq: 523 },
        { x: 62, label: '3', tag: 'Step', delay: 800, freq: 523 },
        { x: 88, label: '4', tag: 'Step', delay: 800, freq: 659 }
      ],
      guide: ['Equal Space', 'Equal Space', 'Equal Space']
    },
    uneven: {
      steps: [
        { x: 10, label: '1', tag: 'Run', delay: 400, freq: 587 },
        { x: 28, label: '2', tag: 'Run', delay: 400, freq: 587 },
        { x: 50, label: '3', tag: 'Freeze', delay: 1400, freq: 392 },
        { x: 88, label: '4', tag: 'Hop', delay: 900, freq: 659 }
      ],
      guide: ['Fast', 'Wait...', 'Long Jump']
    }
  };

  function playTone(freq) {
    if (!soundOn) return;
    try {
      if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      if (audioCtx.state === 'suspended') audioCtx.resume();
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
      gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.15);
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start();
      osc.stop(audioCtx.currentTime + 0.15);
    } catch(e){}
  }

  function renderNodes() {
    const wrap = document.getElementById('nodesWrap');
    wrap.innerHTML = '';
    const cfg = configs[mode];
    cfg.steps.forEach((s, i) => {
      const node = document.createElement('div');
      node.className = `beat-spot ${i === currentStep ? 'active' : ''}`;
      node.style.left = s.x + '%';
      node.innerHTML = `<div class="marker">${s.label}</div><div class="tag">${s.tag}</div>`;
      wrap.appendChild(node);
    });

    const guide = document.getElementById('spacingGuide');
    guide.innerHTML = cfg.guide.map(t => `<span class="space-pill">${t}</span>`).join('');
  }

  function updateVisuals() {
    const cfg = configs[mode];
    const stepData = cfg.steps[currentStep];
    const walker = document.getElementById('walker');
    walker.style.left = stepData.x + '%';
    walker.classList.add('step-motion');
    setTimeout(() => walker.classList.remove('step-motion'), 200);

    const spots = document.querySelectorAll('.beat-spot');
    spots.forEach((sp, idx) => {
      sp.classList.toggle('active', idx === currentStep);
    });

    playTone(stepData.freq);
  }

  function advance() {
    const cfg = configs[mode];
    currentStep = (currentStep + 1) % cfg.steps.length;
    updateVisuals();
    if (isPlaying) {
      clearTimeout(timer);
      timer = setTimeout(advance, cfg.steps[currentStep].delay);
    }
  }

  function setMode(newMode) {
    mode = newMode;
    currentStep = 0;
    document.getElementById('steadyBtn').classList.toggle('active', mode === 'steady');
    document.getElementById('unevenBtn').classList.toggle('active', mode === 'uneven');
    document.getElementById('stage').classList.toggle('uneven-mode', mode === 'uneven');
    renderNodes();
    updateVisuals();
    if (isPlaying) {
      clearTimeout(timer);
      timer = setTimeout(advance, configs[mode].steps[currentStep].delay);
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
    if (isPlaying) {
      timer = setTimeout(advance, configs[mode].steps[currentStep].delay);
    } else {
      clearTimeout(timer);
    }
  }

  function stepBeat() {
    if (isPlaying) togglePlay();
    advance();
  }

  function toggleSound() {
    soundOn = !soundOn;
    document.getElementById('soundBtn').textContent = soundOn ? '🔊' : '🔇';
    if (soundOn && !audioCtx) {
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
  }

  renderNodes();
  updateVisuals();
  timer = setTimeout(advance, configs[mode].steps[0].delay);
</script>

</body>
</html>

Notice how the marching bear never speeds up or slows down — the space between every step is always the same.

Ready to test your ears and find the beat yourself?

Clap your hands four times while counting out loud: **1, 2, 3, 4**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f1f2f6;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }
    .beat-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .beats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      width: 100%;
    }
    .beat-card {
      background: #ffffff;
      border-radius: 20px;
      border: 3px solid #e4e7eb;
      aspect-ratio: 1 / 1.15;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    .beat-num {
      font-size: 28px;
      font-weight: 800;
      color: #5352ed;
      line-height: 1;
    }
    .beat-icon {
      font-size: 32px;
      line-height: 1;
      transition: transform 0.2s ease;
    }
    .beat-card.active {
      border-color: #ffb142;
      background: #fff9e6;
      box-shadow: 0 6px 18px rgba(255, 177, 66, 0.35);
      transform: translateY(-4px);
    }
    .beat-card.active .beat-icon {
      transform: scale(1.2);
    }
    .timeline-bar {
      width: 100%;
      height: 10px;
      background: #e2e4e9;
      border-radius: 999px;
      position: relative;
      overflow: hidden;
    }
    .timeline-progress {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 25%;
      background: #5352ed;
      border-radius: 999px;
      transition: left 0.15s linear, width 0.15s linear;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      justify-content: center;
    }
    .play-btn {
      background: #5352ed;
      color: #ffffff;
      border: none;
      border-radius: 999px;
      padding: 14px 28px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 54px;
      box-shadow: 0 4px 12px rgba(83, 82, 237, 0.3);
      transition: opacity 0.2s ease, transform 0.1s ease;
    }
    .play-btn:active {
      transform: scale(0.97);
    }
    .tempo-btn {
      background: #ffffff;
      color: #5352ed;
      border: 2px solid #5352ed;
      border-radius: 999px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      min-height: 54px;
      transition: background 0.2s ease;
    }
    @media (max-width: 400px) {
      .beats-row {
        gap: 8px;
      }
      .beat-card {
        border-radius: 14px;
        border-width: 2px;
      }
      .beat-num {
        font-size: 22px;
      }
      .beat-icon {
        font-size: 24px;
      }
      .play-btn {
        padding: 12px 20px;
        font-size: 16px;
      }
      .tempo-btn {
        padding: 10px 14px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="beat-container">
    <div class="beats-row">
      <div class="beat-card active" data-beat="0">
        <span class="beat-num">1</span>
        <span class="beat-icon">👏</span>
      </div>
      <div class="beat-card" data-beat="1">
        <span class="beat-num">2</span>
        <span class="beat-icon">👏</span>
      </div>
      <div class="beat-card" data-beat="2">
        <span class="beat-num">3</span>
        <span class="beat-icon">👏</span>
      </div>
      <div class="beat-card" data-beat="3">
        <span class="beat-num">4</span>
        <span class="beat-icon">👏</span>
      </div>
    </div>

    <div class="timeline-bar">
      <div class="timeline-progress" id="progress"></div>
    </div>

    <div class="controls">
      <button class="play-btn" id="playBtn">
        <span id="playIcon">▶</span>
        <span id="playText">Play Beat</span>
      </button>
      <button class="tempo-btn" id="tempoBtn">Speed: Normal</button>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.beat-card');
    const progress = document.getElementById('progress');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');
    const tempoBtn = document.getElementById('tempoBtn');

    let currentBeat = 0;
    let isPlaying = false;
    let timer = null;
    let bpm = 90;
    let audioCtx = null;

    function getInterval() {
      return (60 / bpm) * 1000;
    }

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playWoodblock(isDownbeat) {
      if (!audioCtx) return;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      const freq = isDownbeat ? 600 : 440;
      
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
      osc.frequency.exponentialRampToValueAtTime(freq * 0.5, audioCtx.currentTime + 0.08);

      gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start();
      osc.stop(audioCtx.currentTime + 0.09);
    }

    function updateBeat(index, playSound = false) {
      currentBeat = index % 4;
      cards.forEach((card, idx) => {
        card.classList.toggle('active', idx === currentBeat);
      });
      progress.style.left = (currentBeat * 25) + '%';
      if (playSound) {
        playWoodblock(currentBeat === 0);
      }
    }

    function tick() {
      updateBeat((currentBeat + 1) % 4, true);
    }

    function start() {
      initAudio();
      isPlaying = true;
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
      playWoodblock(currentBeat === 0);
      clearInterval(timer);
      timer = setInterval(tick, getInterval());
    }

    function pause() {
      isPlaying = false;
      playIcon.textContent = '▶';
      playText.textContent = 'Play Beat';
      clearInterval(timer);
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pause();
      } else {
        start();
      }
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        initAudio();
        updateBeat(idx, true);
        if (isPlaying) {
          clearInterval(timer);
          timer = setInterval(tick, getInterval());
        }
      });
    });

    tempoBtn.addEventListener('click', () => {
      if (bpm === 90) {
        bpm = 60;
        tempoBtn.textContent = 'Speed: Slow';
      } else if (bpm === 60) {
        bpm = 120;
        tempoBtn.textContent = 'Speed: Fast';
      } else {
        bpm = 90;
        tempoBtn.textContent = 'Speed: Normal';
      }
      if (isPlaying) {
        clearInterval(timer);
        timer = setInterval(tick, getInterval());
      }
    });
  </script>
</body>
</html>

Next time you listen to your favorite song, try patting your knees to find its hidden heartbeat!

arts

What Is a Steady Beat?. Identify a steady beat as the steady, repeating pulse in music.

Finding and Feeling the Steady Beat | Music Arts Toolkit

What Is Rhythm and Pulse? KS1 Music

Keeping a Steady Beat as We Move, Sing and Play (Year 1 / Grade 1 Music)

For 1st graders (aligned to TEKS §117.106(b)(6)(B)), pedagogical best practice relies on the Kodály/Orff approach: first feel the pulse physically (macro-movement like marching, lap patting/'patching'), next distinguish it aurally from word rhythms, and finally represent it with visual icons (hearts/footprints) before formal notation.

What Is a Steady Beat?

The Heartbeat of Music

Steady vs. Uneven

Try It Together