<!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">
  <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;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .matrix {
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      grid-template-rows: auto 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .corner-label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .col-header {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 4px;
      background: #f1f5f9;
      border-radius: 8px;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .row-header {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 6px;
      background: #f1f5f9;
      border-radius: 8px;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      letter-spacing: 0.5px;
    }

    .sound-card {
      border: 1.5px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      background: #ffffff;
      transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      position: relative;
      overflow: hidden;
      min-height: 120px;
    }

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

    .sound-card.playing {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.4);
    }

    /* Quadrant color hints */
    .card-tl { background: #fefcf0; }
    .card-tr { background: #fff5f5; }
    .card-bl { background: #f0fdf4; }
    .card-br { background: #f5f3ff; }

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

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

    .wave-badge {
      margin-top: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .wave-svg {
      width: 48px;
      height: 16px;
      stroke-width: 2;
      fill: none;
    }

    .hint {
      margin-top: 10px;
      font-size: 12px;
      color: #6b7280;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    @media (max-width: 360px) {
      .card-icon { font-size: 26px; }
      .card-title { font-size: 13px; }
      .sound-card { padding: 8px 4px; min-height: 105px; }
      .col-header, .row-header { font-size: 12px; }
    }
  </style>
</head>
<body>

  <div class="matrix">
    <div class="corner-label">Pitch ⤹</div>
    <div class="col-header">Quiet 🔈</div>
    <div class="col-header">Loud 🔊</div>

    <div class="row-header">High Pitch 🔺</div>
    
    
    <div class="sound-card card-tl" onclick="playSound('mosquito', this)">
      <div class="card-icon">🦟</div>
      <div class="card-title">Mosquito</div>
      <div class="wave-badge">
        <svg class="wave-svg" viewBox="0 0 50 16">
          <path d="M 0,8 Q 3.125,2 6.25,8 T 12.5,8 T 18.75,8 T 25,8 T 31.25,8 T 37.5,8 T 43.75,8 T 50,8" stroke="#d97706" />
        </svg>
      </div>
    </div>

    
    <div class="sound-card card-tr" onclick="playSound('whistle', this)">
      <div class="card-icon">📢</div>
      <div class="card-title">Whistle</div>
      <div class="wave-badge">
        <svg class="wave-svg" viewBox="0 0 50 16">
          <path d="M 0,8 Q 3.125,-2 6.25,8 T 12.5,8 T 18.75,8 T 25,8 T 31.25,8 T 37.5,8 T 43.75,8 T 50,8" stroke="#ef4444" />
        </svg>
      </div>
    </div>

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

    
    <div class="sound-card card-bl" onclick="playSound('purr', this)">
      <div class="card-icon">🐱</div>
      <div class="card-title">Cat Purr</div>
      <div class="wave-badge">
        <svg class="wave-svg" viewBox="0 0 50 16">
          <path d="M 0,8 Q 12.5,4 25,8 T 50,8" stroke="#16a34a" />
        </svg>
      </div>
    </div>

    
    <div class="sound-card card-br" onclick="playSound('thunder', this)">
      <div class="card-icon">⚡</div>
      <div class="card-title">Thunder</div>
      <div class="wave-badge">
        <svg class="wave-svg" viewBox="0 0 50 16">
          <path d="M 0,8 Q 12.5,-3 25,8 T 50,8" stroke="#7c3aed" />
        </svg>
      </div>
    </div>
  </div>

  <div class="hint">
    <span>Tap any sound to listen 🎵</span>
  </div>

  <script>
    let ctx = null;

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

    function playSound(type, el) {
      document.querySelectorAll('.sound-card').forEach(c => c.classList.remove('playing'));
      el.classList.add('playing');
      setTimeout(() => el.classList.remove('playing'), 650);

      const ac = getAudioContext();
      const t = ac.currentTime;

      if (type === 'mosquito') {
        // High frequency, low volume
        const osc = ac.createOscillator();
        const gain = ac.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(750, t);
        osc.frequency.linearRampToValueAtTime(780, t + 0.3);
        osc.frequency.linearRampToValueAtTime(740, t + 0.6);

        gain.gain.setValueAtTime(0.02, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t + 0.6);

        osc.connect(gain);
        gain.connect(ac.destination);
        osc.start(t);
        osc.stop(t + 0.6);

      } else if (type === 'whistle') {
        // High frequency, loud volume
        const osc1 = ac.createOscillator();
        const osc2 = ac.createOscillator();
        const gain = ac.createGain();

        osc1.type = 'sine';
        osc2.type = 'sine';
        osc1.frequency.setValueAtTime(1400, t);
        osc2.frequency.setValueAtTime(1430, t); // beat effect

        gain.gain.setValueAtTime(0.25, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t + 0.5);

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

        osc1.start(t);
        osc2.start(t);
        osc1.stop(t + 0.5);
        osc2.stop(t + 0.5);

      } else if (type === 'purr') {
        // Low frequency, low volume with pulse modulation
        const osc = ac.createOscillator();
        const mod = ac.createOscillator();
        const modGain = ac.createGain();
        const mainGain = ac.createGain();

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(75, t);

        mod.frequency.setValueAtTime(22, t);
        modGain.gain.setValueAtTime(0.03, t);

        mainGain.gain.setValueAtTime(0.05, t);
        mainGain.gain.exponentialRampToValueAtTime(0.001, t + 0.7);

        mod.connect(modGain.gain);
        osc.connect(mainGain);
        mainGain.connect(ac.destination);

        mod.start(t);
        osc.start(t);
        mod.stop(t + 0.7);
        osc.stop(t + 0.7);

      } else if (type === 'thunder') {
        // Low frequency boom, loud volume
        const osc = ac.createOscillator();
        const gain = ac.createGain();

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(110, t);
        osc.frequency.exponentialRampToValueAtTime(35, t + 0.65);

        gain.gain.setValueAtTime(0.4, t);
        gain.gain.exponentialRampToValueAtTime(0.001, t + 0.7);

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

        osc.start(t);
        osc.stop(t + 0.7);
      }
    }
  </script>
</body>
</html>

What Is Pitch? High Sounds and Low 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="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: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }
    .pitch-card {
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
      border: 2px solid transparent;
    }
    .pitch-card:active {
      transform: scale(0.98);
    }
    .card-high {
      background: #e0f2fe;
    }
    .card-high.active {
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
    }
    .card-low {
      background: #fef3c7;
    }
    .card-low.active {
      border-color: #d97706;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
    }
    .card-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .icon-row {
      font-size: 28px;
      line-height: 1;
      margin: 6px 0 10px;
      display: flex;
      gap: 12px;
    }
    .wave-box {
      width: 100%;
      height: 48px;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .wave-svg {
      width: 100%;
      height: 100%;
    }
    .card-desc {
      font-size: 13px;
      font-weight: 600;
      opacity: 0.9;
    }
    .meter-container {
      width: 100%;
      max-width: 580px;
      margin-top: 12px;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .meter-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }
    .meter-track {
      position: relative;
      width: 100%;
      height: 10px;
      background: #e2e8f0;
      border-radius: 999px;
      overflow: visible;
    }
    .meter-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      border: 3px solid #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      transition: left 0.35s ease, background 0.35s ease;
    }
    .prompt {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin-top: 8px;
    }
    @media (max-width: 380px) {
      .card-title { font-size: 15px; }
      .icon-row { font-size: 24px; }
      .card-desc { font-size: 12px; }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div id="highCard" class="pitch-card card-high active" onclick="selectPitch('high')">
      <div class="card-title">High Pitch 🔊</div>
      <div class="icon-row">
        <span>🐭</span>
        <span>🪈</span>
      </div>
      <div class="wave-box">
        <svg class="wave-svg" viewBox="0 0 200 40" preserveAspectRatio="none">
          <path id="highWave" d="M 0 20 Q 5 2, 10 20 T 20 20 T 30 20 T 40 20 T 50 20 T 60 20 T 70 20 T 80 20 T 90 20 T 100 20 T 110 20 T 120 20 T 130 20 T 140 20 T 150 20 T 160 20 T 170 20 T 180 20 T 190 20 T 200 20" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="card-desc">Fast, tight squeak</div>
    </div>

    
    <div id="lowCard" class="pitch-card card-low" onclick="selectPitch('low')">
      <div class="card-title">Low Pitch 🔊</div>
      <div class="icon-row">
        <span>🐘</span>
        <span>🥁</span>
      </div>
      <div class="wave-box">
        <svg class="wave-svg" viewBox="0 0 200 40" preserveAspectRatio="none">
          <path id="lowWave" d="M 0 20 Q 25 2, 50 20 T 100 20 T 150 20 T 200 20" fill="none" stroke="#d97706" stroke-width="3" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="card-desc">Deep, slow rumble</div>
    </div>
  </div>

  
  <div class="meter-container">
    <div class="meter-labels">
      <span>High Pitch</span>
      <span>Low Pitch</span>
    </div>
    <div class="meter-track">
      <div id="indicator" class="meter-indicator" style="left: 15%;"></div>
    </div>
  </div>

  <div class="prompt">Tap a card to hear and compare pitch</div>

  <script>
    var audioCtx = null;

    function playTone(frequency) {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        var osc = audioCtx.createOscillator();
        var gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(frequency, audioCtx.currentTime);
        
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        gain.gain.setValueAtTime(0.25, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.45);
        
        osc.start();
        osc.stop(audioCtx.currentTime + 0.45);
      } catch (e) {}
    }

    function selectPitch(type) {
      var highCard = document.getElementById('highCard');
      var lowCard = document.getElementById('lowCard');
      var indicator = document.getElementById('indicator');

      if (type === 'high') {
        highCard.classList.add('active');
        lowCard.classList.remove('active');
        indicator.style.left = '15%';
        indicator.style.background = '#0284c7';
        playTone(1100);
      } else {
        lowCard.classList.add('active');
        highCard.classList.remove('active');
        indicator.style.left = '85%';
        indicator.style.background = '#d97706';
        playTone(130);
      }
    }
  </script>
</body>
</html>

science.ks2.y2.t4.s3

Aligned learning resources

Related diagrams