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

Can you make a tiny, squeaky mouse squeak, and then switch to a deep, booming monster growl?

The difference you hear between that squeak and that rumble is called **pitch**.

**Pitch** is a description of how high or low a sound seems to your ears.

<!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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .scale-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Gradient pitch track */
    .pitch-track {
      position: relative;
      height: 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
      margin: 6px 12px;
    }

    .pitch-pointer {
      position: absolute;
      top: 50%;
      width: 22px;
      height: 22px;
      background: #ffffff;
      border: 3px solid #4f46e5;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      pointer-events: none;
    }

    /* Pitch Cards */
    .cards-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .pitch-card {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .pitch-card.active-low {
      border-color: #4f46e5;
      box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18);
      background: #f5f3ff;
    }

    .pitch-card.active-high {
      border-color: #06b6d4;
      box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2);
      background: #ecfeff;
    }

    .icon-group {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 6px;
      display: flex;
      gap: 6px;
    }

    .pitch-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .pitch-desc {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

    .active-low .pitch-desc {
      color: #4f46e5;
    }

    .active-high .pitch-desc {
      color: #0891b2;
    }

    /* Wave visualizer */
    .visualizer-box {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .wave-meta {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

    .wave-meta span.active {
      color: #1e2945;
      font-weight: 700;
    }

    svg.wave-canvas {
      width: 100%;
      height: 72px;
      overflow: visible;
    }

    .wave-path {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease;
    }

    .tap-hint {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="scale-container">
    
    <div class="cards-row">
      
      <div id="lowCard" class="pitch-card active-low" onclick="setPitch('low')">
        <div class="icon-group">🥁 🐸</div>
        <div class="pitch-title">Low Pitch</div>
        <div class="pitch-desc">Deep / Low</div>
      </div>

      
      <div id="highCard" class="pitch-card" onclick="setPitch('high')">
        <div class="icon-group">🐦 🪈</div>
        <div class="pitch-title">High Pitch</div>
        <div class="pitch-desc">Squeaky / High</div>
      </div>
    </div>

    
    <div class="pitch-track">
      <div id="pointer" class="pitch-pointer" style="left: 15%;"></div>
    </div>

    
    <div class="visualizer-box">
      <div class="wave-meta">
        <span id="lowLabel" class="active">Slow Wave ∿</span>
        <span id="highLabel">Fast Ripple 〰️</span>
      </div>
      <svg class="wave-canvas" viewBox="0 0 320 60">
        <path id="wavePath" class="wave-path" stroke="#4f46e5" d="" />
      </svg>
    </div>

    <div class="tap-hint">🔊 Tap an icon to play sound & wave</div>
  </div>

  <script>
    let currentPitch = 'low';
    let phase = 0;
    let animId = null;

    function playTone(freq, duration = 0.35) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        
        osc.type = currentPitch === 'low' ? 'triangle' : 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function setPitch(type) {
      currentPitch = type;
      const lowCard = document.getElementById('lowCard');
      const highCard = document.getElementById('highCard');
      const pointer = document.getElementById('pointer');
      const lowLabel = document.getElementById('lowLabel');
      const highLabel = document.getElementById('highLabel');
      const wavePath = document.getElementById('wavePath');

      if (type === 'low') {
        lowCard.className = 'pitch-card active-low';
        highCard.className = 'pitch-card';
        pointer.style.left = '15%';
        pointer.style.borderColor = '#4f46e5';
        wavePath.setAttribute('stroke', '#4f46e5');
        lowLabel.className = 'active';
        highLabel.className = '';
        playTone(130, 0.45);
      } else {
        highCard.className = 'pitch-card active-high';
        lowCard.className = 'pitch-card';
        pointer.style.left = '85%';
        pointer.style.borderColor = '#06b6d4';
        wavePath.setAttribute('stroke', '#06b6d4');
        highLabel.className = 'active';
        lowLabel.className = '';
        playTone(784, 0.35);
      }
    }

    function drawWave() {
      const isLow = currentPitch === 'low';
      const freq = isLow ? 0.035 : 0.14; 
      const speed = isLow ? 0.05 : 0.16; 
      const amp = isLow ? 20 : 16;
      const midY = 30;

      phase += speed;
      let d = 'M 0 ' + (midY + Math.sin(phase) * amp);

      for (let x = 4; x <= 320; x += 4) {
        const y = midY + Math.sin(x * freq + phase) * amp;
        d += ` L ${x} ${y.toFixed(2)}`;
      }

      document.getElementById('wavePath').setAttribute('d', d);
      animId = requestAnimationFrame(drawWave);
    }

    // Initialize
    drawWave();
  </script>
</body>
</html>

What is actually happening inside an instrument to make a sound high or low?

Every sound begins with a **vibration**, which is a rapid back-and-forth shaking movement.

The speed of these vibrations is called **frequency**, which measures how many back-and-forth vibrations happen in one second.

When an object shakes back and forth super fast, it has a high frequency and creates a **high pitch**.

When an object shakes back and forth slowly, it has a low frequency and creates a **low pitch**.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }
    .panel {
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #ffffff;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
    }
    .high-title { color: #0284c7; }
    .low-title { color: #7c3aed; }
    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      letter-spacing: 0.2px;
    }
    .high-badge { background: #e0f2fe; color: #0369a1; }
    .low-badge { background: #f3e8ff; color: #6b21a8; }
    .wave-box {
      width: 100%;
      height: 64px;
      background: #f8fafc;
      border-radius: 6px;
      display: block;
    }
    .panel-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }
    .sound-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }
    .sound-btn:active {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  
  <div class="panel">
    <div class="panel-header">
      <span class="high-title">Fast Vibrations = High Pitch</span>
      <span class="badge high-badge">High Frequency</span>
    </div>
    <canvas id="highWave" class="wave-box"></canvas>
    <div class="panel-footer">
      <span>Many vibrations per second</span>
      <button class="sound-btn" onclick="playTone(784, 0.45)">Play 🔊</button>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span class="low-title">Slow Vibrations = Low Pitch</span>
      <span class="badge low-badge">Low Frequency</span>
    </div>
    <canvas id="lowWave" class="wave-box"></canvas>
    <div class="panel-footer">
      <span>Fewer vibrations per second</span>
      <button class="sound-btn" onclick="playTone(131, 0.55)">Play 🔊</button>
    </div>
  </div>

  <script>
    let audioCtx = null;
    function playTone(freq, dur) {
      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);
      gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + dur);
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start();
      osc.stop(audioCtx.currentTime + dur);
    }

    const cHigh = document.getElementById('highWave');
    const cLow = document.getElementById('lowWave');
    const ctxHigh = cHigh.getContext('2d');
    const ctxLow = cLow.getContext('2d');

    function resize() {
      const dpr = window.devicePixelRatio || 1;
      [cHigh, cLow].forEach(c => {
        const rect = c.getBoundingClientRect();
        c.width = rect.width * dpr;
        c.height = rect.height * dpr;
      });
    }
    window.addEventListener('resize', resize);
    resize();

    let offset = 0;

    function drawWave(ctx, canvas, freq, speed, color, amp) {
      const dpr = window.devicePixelRatio || 1;
      const w = canvas.width;
      const h = canvas.height;
      ctx.clearRect(0, 0, w, h);

      // Baseline reference
      ctx.beginPath();
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 1 * dpr;
      ctx.setLineDash([4 * dpr, 4 * dpr]);
      ctx.moveTo(0, h / 2);
      ctx.lineTo(w, h / 2);
      ctx.stroke();
      ctx.setLineDash([]);

      // Sine Wave
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineWidth = 2.5 * dpr;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      const amplitude = (h / 2.6) * amp;
      const midY = h / 2;

      for (let x = 0; x <= w; x += 2) {
        const nx = x / w;
        const y = midY + Math.sin(nx * freq * Math.PI * 2 - offset * speed) * amplitude;
        if (x === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();
    }

    function animate() {
      offset += 0.05;
      drawWave(ctxHigh, cHigh, 9, 3.2, '#0284c7', 0.85);
      drawWave(ctxLow, cLow, 2.5, 0.9, '#7c3aed', 0.85);
      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
  </script>
</body>
</html>

Does a high-pitched sound always have to be loud, or can it be quiet too?

People often mix up pitch and volume, but they are two completely different features of sound.

**Volume** tells you how loud or quiet a sound is, while pitch only tells you how high or low the note sounds.

<!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="1:1">
  <title>Pitch vs Volume Matrix</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      background: transparent;
      color: #1e2945;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .matrix-layout {
      width: 100%;
      max-width: 460px;
      display: grid;
      grid-template-columns: 36px 1fr 1fr;
      grid-template-rows: 28px 1fr 1fr;
      gap: 6px;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
    }

    .row-header {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    .sound-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      min-height: 140px;
    }

    .sound-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .sound-card.active {
      box-shadow: 0 0 0 2px #22b7ff;
    }

    /* Pastel themes */
    .card-high-loud { background: #fff7ed; border-color: #fed7aa; }
    .card-high-quiet { background: #faf5ff; border-color: #e9d5ff; }
    .card-low-loud { background: #fef2f2; border-color: #fecaca; }
    .card-low-quiet { background: #f0fdf4; border-color: #bbf7d0; }

    .card-icon {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 2px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .card-wave {
      width: 100%;
      height: 28px;
      margin: 4px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-wave svg {
      width: 90%;
      height: 100%;
    }

    .play-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #1e2945;
    }

    .sound-card.active .play-pill {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="matrix-layout">
    
    <div></div>

    
    <div class="col-header">Loud 📢</div>
    <div class="col-header">Quiet 🤫</div>

    
    <div class="row-header">High Pitch ⬆️</div>
    
    
    <div class="sound-card card-high-loud" id="card-hl" onclick="playSound('hl')">
      <div class="card-icon">📢</div>
      <div class="card-title">Whistle Blast</div>
      <div class="card-wave">
        <svg viewBox="0 0 100 24">
          
          <path d="M0,12 Q5,-4 10,12 T20,12 T30,12 T40,12 T50,12 T60,12 T70,12 T80,12 T90,12 T100,12" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="play-pill"><span class="btn-icon">▶</span> Tap Sound</div>
    </div>

    
    <div class="sound-card card-high-quiet" id="card-hq" onclick="playSound('hq')">
      <div class="card-icon">🦟</div>
      <div class="card-title">Mosquito Buzz</div>
      <div class="card-wave">
        <svg viewBox="0 0 100 24">
          
          <path d="M0,12 Q5,7 10,12 T20,12 T30,12 T40,12 T50,12 T60,12 T70,12 T80,12 T90,12 T100,12" fill="none" stroke="#9333ea" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="play-pill"><span class="btn-icon">▶</span> Tap Sound</div>
    </div>

    
    <div class="row-header">Low Pitch ⬇️</div>

    
    <div class="sound-card card-low-loud" id="card-ll" onclick="playSound('ll')">
      <div class="card-icon">⚡</div>
      <div class="card-title">Thunder Crack</div>
      <div class="card-wave">
        <svg viewBox="0 0 100 24">
          
          <path d="M0,12 Q12.5,-3 25,12 T50,12 T75,12 T100,12" fill="none" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="play-pill"><span class="btn-icon">▶</span> Tap Sound</div>
    </div>

    
    <div class="sound-card card-low-quiet" id="card-lq" onclick="playSound('lq')">
      <div class="card-icon">🐱</div>
      <div class="card-title">Cat Purr</div>
      <div class="card-wave">
        <svg viewBox="0 0 100 24">
          
          <path d="M0,12 Q12.5,8 25,12 T50,12 T75,12 T100,12" fill="none" stroke="#16a34a" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="play-pill"><span class="btn-icon">▶</span> Tap Sound</div>
    </div>
  </div>

  <script>
    let audioCtx = null;
    let activeTimer = null;

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

    function setActiveCard(type) {
      document.querySelectorAll('.sound-card').forEach(c => {
        c.classList.remove('active');
        const icon = c.querySelector('.btn-icon');
        if (icon) icon.textContent = '▶';
      });

      const activeEl = document.getElementById('card-' + type);
      if (activeEl) {
        activeEl.classList.add('active');
        const icon = activeEl.querySelector('.btn-icon');
        if (icon) icon.textContent = '🔊';
      }

      clearTimeout(activeTimer);
      activeTimer = setTimeout(() => {
        if (activeEl) {
          activeEl.classList.remove('active');
          const icon = activeEl.querySelector('.btn-icon');
          if (icon) icon.textContent = '▶';
        }
      }, 700);
    }

    function playSound(type) {
      const ctx = getAudioContext();
      const now = ctx.currentTime;
      setActiveCard(type);

      if (type === 'hl') {
        // High Pitch + Loud (Whistle blast: dual high frequencies, high volume)
        const osc1 = ctx.createOscillator();
        const osc2 = ctx.createOscillator();
        const gain = ctx.createGain();

        osc1.type = 'sine';
        osc1.frequency.setValueAtTime(2200, now);
        osc1.frequency.exponentialRampToValueAtTime(2400, now + 0.1);
        osc1.frequency.exponentialRampToValueAtTime(2100, now + 0.4);

        osc2.type = 'triangle';
        osc2.frequency.setValueAtTime(2210, now);

        gain.gain.setValueAtTime(0.28, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);

        osc1.connect(gain);
        osc2.connect(gain);
        gain.connect(ctx.destination);

        osc1.start(now);
        osc2.start(now);
        osc1.stop(now + 0.45);
        osc2.stop(now + 0.45);

      } else if (type === 'hq') {
        // High Pitch + Quiet (Mosquito: high frequency, low volume buzz)
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(750, now);
        osc.frequency.linearRampToValueAtTime(800, now + 0.2);
        osc.frequency.linearRampToValueAtTime(730, now + 0.5);

        gain.gain.setValueAtTime(0.03, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.55);

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

        osc.start(now);
        osc.stop(now + 0.55);

      } else if (type === 'll') {
        // Low Pitch + Loud (Thunder: deep rumble, high volume)
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(110, now);
        osc.frequency.exponentialRampToValueAtTime(45, now + 0.6);

        gain.gain.setValueAtTime(0.35, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.65);

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

        osc.start(now);
        osc.stop(now + 0.65);

      } else if (type === 'lq') {
        // Low Pitch + Quiet (Cat Purr: deep low tone, rhythmic soft volume)
        const osc = ctx.createOscillator();
        const lfo = ctx.createOscillator();
        const lfoGain = ctx.createGain();
        const mainGain = ctx.createGain();

        osc.type = 'sine';
        osc.frequency.setValueAtTime(65, now);

        lfo.type = 'sine';
        lfo.frequency.setValueAtTime(24, now); // Purring flutter rate

        lfoGain.gain.setValueAtTime(0.02, now);
        mainGain.gain.setValueAtTime(0.035, now);
        mainGain.gain.exponentialRampToValueAtTime(0.001, now + 0.65);

        lfo.connect(mainGain.gain);
        osc.connect(mainGain);
        mainGain.connect(ctx.destination);

        lfo.start(now);
        osc.start(now);
        lfo.stop(now + 0.65);
        osc.stop(now + 0.65);
      }
    }
  </script>
</body>
</html>

Place two fingers gently against the front of your throat and hum a high squeaky note, then switch to your lowest rumble.

Your fingers can feel your vocal cords shaking much faster for the high note than for the low note!

science

Understanding Pitch: High Notes and Low Notes. Define pitch as how high or low a sound is, relating it to the frequency of sound vibrations.

Changing the Pitch of Sounds - KS2 Science (Year 4)

What is Pitch? - KS2 Science & Music

Musical Instruments and Pitch - KS2 Science (Year 4)

To ensure student mastery across KS1-KS2, employ multi-sensory and concrete-to-representational approaches. Begin with physical tactile experiences (feeling throat vocal cords when humming high vs. low notes, plucking varying elastic bands, or twanging rulers of different lengths). Explicitly contrast pitch (frequency: speed of vibration) against volume (amplitude: strength/size of vibration) through a $2\times2$ matrix activity (Loud/High, Quiet/High, Loud/Low, Quiet/Low) to eliminate the primary misconception. Finally, bridge physical instruments to visual representations (oscilloscope waveform cycles per second in $\text{Hz}$).

Understanding Pitch: High Notes and Low Notes

Vibrations and Frequency

Pitch is Not Volume