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

Ever wonder why a mix that sounds huge and punchy in your headphones suddenly turns thin and weak when you turn the volume down?

The issue is not your monitors — it is the biological way your ears process the **audible frequency spectrum**, the range of sound frequencies humans can hear from $20\text{ Hz}$ to $20{,}000\text{ Hz}$ ($20\text{ kHz}$).

How do audio engineers break down this massive 20,000-unit span into distinct zones for mixing?

To sculpt mixes precisely, we divide the human hearing range into six standard frequency sub-ranges based on how musical instruments speak and resonate.

<!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>The Audible Frequency Spectrum</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body { background: #f8f9fa; color: #1e2945; padding: 12px; display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 100%; }

    /* Spectrum Bar Container */
    .spectrum-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .freq-axis-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 6px;
      padding: 0 4px;
    }
    .bands-bar {
      display: flex;
      height: 42px;
      border-radius: 8px;
      overflow: hidden;
      gap: 2px;
      background: #f1f5f9;
    }
    .band-btn {
      border: none;
      background: var(--bg-color);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s, box-shadow 0.2s, filter 0.2s;
      outline: none;
      padding: 2px;
      opacity: 0.5;
    }
    .band-btn.active {
      opacity: 1;
      box-shadow: inset 0 0 0 2px #ffffff, 0 2px 8px rgba(0,0,0,0.25);
      filter: brightness(1.08);
      z-index: 2;
    }
    .band-btn:active {
      filter: brightness(0.95);
    }
    .band-btn span {
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }

    /* Wave visualizer canvas */
    .visualizer-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .canvas-wrap {
      width: 100%;
      height: 70px;
      background: #0f172a;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Detail Grid */
    .details-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .info-tile {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }
    .tile-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .tile-val {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
    }
    .tile-desc {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
    }

    /* Controls Bar */
    .action-bar {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .play-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(2,132,199,0.25);
      transition: background 0.2s, filter 0.2s;
    }
    .play-btn:active {
      filter: brightness(0.9);
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }
    .step-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="spectrum-container">
    <div class="freq-axis-labels">
      <span>20 Hz</span>
      <span>60 Hz</span>
      <span>250 Hz</span>
      <span>2 kHz</span>
      <span>6 kHz</span>
      <span>20 kHz</span>
    </div>
    <div class="bands-bar" id="bandsBar">
      <button class="band-btn active" style="--bg-color: #6366f1; flex: 1.2;" data-idx="0">
        <span>Sub</span>
      </button>
      <button class="band-btn" style="--bg-color: #0284c7; flex: 1.6;" data-idx="1">
        <span>Bass</span>
      </button>
      <button class="band-btn" style="--bg-color: #0d9488; flex: 1.8;" data-idx="2">
        <span>Low-Mid</span>
      </button>
      <button class="band-btn" style="--bg-color: #eab308; flex: 1.6;" data-idx="3">
        <span>Mid</span>
      </button>
      <button class="band-btn" style="--bg-color: #f97316; flex: 1.8;" data-idx="4">
        <span>High-Mid</span>
      </button>
      <button class="band-btn" style="--bg-color: #ef4444; flex: 1.8;" data-idx="5">
        <span>Highs</span>
      </button>
    </div>
  </div>

  
  <div class="visualizer-card">
    <div class="canvas-wrap">
      <canvas id="waveCanvas"></canvas>
    </div>

    <div class="details-row">
      <div class="info-tile">
        <div class="tile-label">Band Range</div>
        <div class="tile-val" id="bandName" style="color: #6366f1;">Sub-bass (20–60 Hz)</div>
      </div>
      <div class="info-tile">
        <div class="tile-label">Sonic Role</div>
        <div class="tile-desc" id="bandRole">Felt physical rumble & sub fundamentals</div>
      </div>
    </div>
  </div>

  
  <div class="action-bar">
    <button class="step-btn" id="prevBtn">◀ Prev</button>
    <button class="play-btn" id="listenBtn">
      <span>Play Tone 🔊</span>
      <span id="toneFreqLabel" style="font-weight: 500; font-size: 11px; opacity: 0.9;">(40 Hz)</span>
    </button>
    <button class="step-btn" id="nextBtn">Next ▶</button>
  </div>

  <script>
    const BANDS = [
      {
        name: "Sub-bass (20–60 Hz)",
        role: "Physical rumble & 808 sub drops",
        centerFreq: 45,
        waveDensity: 1.2,
        color: "#6366f1"
      },
      {
        name: "Bass (60–250 Hz)",
        role: "Kick fundamentals & bass guitar body",
        centerFreq: 120,
        waveDensity: 3.5,
        color: "#0284c7"
      },
      {
        name: "Low-Mid (250–500 Hz)",
        role: "Vocal warmth, snare body & fullness",
        centerFreq: 380,
        waveDensity: 7.5,
        color: "#0d9488"
      },
      {
        name: "Midrange (500 Hz–2 kHz)",
        role: "Speech intelligibility & guitar crunch",
        centerFreq: 1000,
        waveDensity: 15,
        color: "#eab308"
      },
      {
        name: "High-Mid (2–6 kHz)",
        role: "Vocal presence & snare snap / bite",
        centerFreq: 3500,
        waveDensity: 28,
        color: "#f97316"
      },
      {
        name: "Highs / Air (6–20 kHz)",
        role: "Cymbal shimmer, brightness & sparkle",
        centerFreq: 9000,
        waveDensity: 52,
        color: "#ef4444"
      }
    ];

    let currentIdx = 0;
    const buttons = document.querySelectorAll('.band-btn');
    const bandNameEl = document.getElementById('bandName');
    const bandRoleEl = document.getElementById('bandRole');
    const toneFreqLabel = document.getElementById('toneFreqLabel');
    const listenBtn = document.getElementById('listenBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const canvas = document.getElementById('waveCanvas');
    const ctx = canvas.getContext('2d');

    function resizeCanvas() {
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * window.devicePixelRatio || 300;
      canvas.height = rect.height * window.devicePixelRatio || 70;
      drawWave();
    }
    window.addEventListener('resize', resizeCanvas);

    let phase = 0;
    function drawWave() {
      const w = canvas.width;
      const h = canvas.height;
      ctx.clearRect(0, 0, w, h);

      // Grid line
      ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, h / 2);
      ctx.lineTo(w, h / 2);
      ctx.stroke();

      const b = BANDS[currentIdx];
      ctx.strokeStyle = b.color;
      ctx.lineWidth = 3 * (window.devicePixelRatio || 1);
      ctx.beginPath();

      const numPoints = Math.floor(w);
      const amp = (h / 2) * 0.72;
      for (let x = 0; x <= numPoints; x++) {
        const normX = x / w;
        const y = h / 2 + Math.sin(normX * Math.PI * 2 * b.waveDensity + phase) * amp;
        if (x === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();
    }

    function setBand(idx) {
      currentIdx = (idx + BANDS.length) % BANDS.length;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentIdx);
      });
      const b = BANDS[currentIdx];
      bandNameEl.textContent = b.name;
      bandNameEl.style.color = b.color;
      bandRoleEl.textContent = b.role;
      toneFreqLabel.textContent = `(${b.centerFreq} Hz)`;
      drawWave();
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        setBand(parseInt(btn.getAttribute('data-idx')));
      });
    });

    prevBtn.addEventListener('click', () => setBand(currentIdx - 1));
    nextBtn.addEventListener('click', () => setBand(currentIdx + 1));

    // Audio Context (Synthesize Pure Test Tones on user tap)
    let audioCtx = null;
    function playAuditionTone(freq) {
      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);

      // Smooth envelope to prevent clicking
      const now = audioCtx.currentTime;
      gain.gain.setValueAtTime(0.0001, now);
      gain.gain.linearRampToValueAtTime(0.2, now + 0.05);
      gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.65);

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

      osc.start(now);
      osc.stop(now + 0.7);
    }

    listenBtn.addEventListener('click', () => {
      playAuditionTone(BANDS[currentIdx].centerFreq);
    });

    // Initial setup
    resizeCanvas();
    setBand(0);
  </script>
</body>
</html>

**Sub-bass** ($20\text{ to }60\text{ Hz}$) is felt as physical vibration rather than heard as pitch, while **bass** ($60\text{ to }250\text{ Hz}$) provides the rhythmic anchor for kick drums and bass guitar fundamentals.

**Low-mids** ($250\text{ to }500\text{ Hz}$) add warmth and body, though too much energy here causes mix "muddiness." **High-mids** ($500\text{ Hz to }4\text{ kHz}$) house primary vocal clarity and instrument harmonics.

**Presence** ($4\text{ to }6\text{ kHz}$) dictates closeness and vocal attack, while **brilliance** ($6\text{ to }20\text{ kHz}$) controls the "air" and sizzle of cymbals.

Why does a $50\text{ Hz}$ sine wave sound far quieter to your ear than a $3{,}000\text{ Hz}$ sine wave played at the exact same electrical power?

In 1933 at Bell Labs, physicists Harvey Fletcher and Wilden A. Munson tested human test subjects to map how volume perception changes across the frequency spectrum.

An **equal-loudness contour** (or Fletcher-Munson curve) is a graph showing the sound pressure level ($dB\text{ SPL}$) needed at different frequencies for a listener to perceive them as equally loud, measured in **phons**.

<!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 {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    .toolbar {
      width: 100%;
      max-width: 600px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 4px;
    }

    .btn-group {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      padding: 2px;
      border-radius: 8px;
    }

    .btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: none;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .audio-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      border-radius: 8px;
      cursor: pointer;
    }
    .audio-btn:active { background: #e2e8f0; }

    .graph-container {
      width: 100%;
      max-width: 600px;
      flex: 1;
      position: relative;
      min-height: 240px;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis-line { stroke: #cbd5e1; stroke-width: 1.5; }
    .axis-label { fill: #94a3b8; font-size: 10px; font-weight: 500; text-anchor: middle; }
    
    .contour-line {
      fill: none;
      stroke-width: 2;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
      cursor: pointer;
    }
    .contour-faint { stroke: #cbd5e1; opacity: 0.6; }
    .contour-active { stroke: #0284c7; stroke-width: 3; opacity: 1; }

    .resonance-zone {
      fill: #22b7ff;
      opacity: 0.08;
    }

    .resonance-line {
      stroke: #0284c7;
      stroke-dasharray: 3 3;
      stroke-width: 1;
      opacity: 0.5;
    }

    .zone-badge {
      fill: #0284c7;
      font-size: 10px;
      font-weight: 700;
      text-anchor: middle;
    }

    .probe-dot {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 2.5;
      filter: drop-shadow(0 2px 4px rgba(2,132,199,0.3));
      transition: cx 0.05s ease, cy 0.05s ease;
    }

    .readout {
      width: 100%;
      max-width: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .readout-val {
      color: #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="btn-group">
      <button class="btn" onclick="selectPhon(20)">20 phon</button>
      <button class="btn active" onclick="selectPhon(40)">40 phon</button>
      <button class="btn" onclick="selectPhon(80)">80 phon</button>
    </div>
    <button class="audio-btn" onclick="playAudition()">🔊 Compare 100Hz vs 3.5kHz</button>
  </div>

  <div class="graph-container">
    <svg id="graph" viewBox="0 0 520 250" preserveAspectRatio="none">
      
      <rect id="resZone" class="resonance-zone" x="0" y="20" width="0" height="200"></rect>
      <line id="resLine" class="resonance-line" x1="0" y1="20" x2="0" y2="220"></line>
      <text id="resText" class="zone-badge" x="0" y="16">2–5 kHz Max Sensitivity</text>

      
      <g id="grid"></g>

      
      <path id="curve-20" class="contour-line contour-faint" />
      <path id="curve-40" class="contour-line contour-active" />
      <path id="curve-80" class="contour-line contour-faint" />

      
      <line id="trackLine" stroke="#94a3b8" stroke-dasharray="2 2" stroke-width="1" y1="20" y2="220" x1="-10" x2="-10" />
      <circle id="probe" class="probe-dot" cx="-10" cy="-10" r="5" />
    </svg>
  </div>

  <div class="readout">
    <div>Freq: <span id="freqRead" class="readout-val">1000 Hz</span></div>
    <div>Required: <span id="splRead" class="readout-val">40 dB SPL</span></div>
    <div>Perception: <span id="phonRead" class="readout-val">40 phon</span></div>
  </div>

  <script>
    const padL = 40, padR = 15, padT = 20, padB = 30;
    const w = 520, h = 250;
    const gW = w - padL - padR;
    const gH = h - padT - padB;

    const minF = 20, maxF = 20000;
    const minSPL = 0, maxSPL = 110;

    let activePhon = 40;
    let currFreq = 1000;

    function fToX(f) {
      return padL + (Math.log10(f / minF) / Math.log10(maxF / minF)) * gW;
    }
    function xToF(x) {
      const norm = Math.max(0, Math.min(1, (x - padL) / gW));
      return minF * Math.pow(maxF / minF, norm);
    }
    function splToY(spl) {
      return padT + gH - ((spl - minSPL) / (maxSPL - minSPL)) * gH;
    }

    // Accurate Fletcher-Munson / ISO 226 curve approximation formula
    function getSPL(freq, phon) {
      const f = freq;
      // Normalised ear transfer function approximation
      const lf = Math.max(0, Math.log10(1000 / Math.max(f, 20)));
      const lowBoost = (phon <= 40 ? 50 : 35) * Math.pow(lf, 1.8);
      
      // 2-5kHz ear canal resonance dip
      const resCenter = 3500;
      const resWidth = 0.35;
      const fOct = Math.log2(f / resCenter);
      const dip = (phon <= 40 ? 10 : 8) * Math.exp(-Math.pow(fOct / resWidth, 2));

      // High frequency rise (>6kHz)
      const hf = Math.max(0, Math.log10(Math.max(f, 4000) / 4000));
      const highRise = 18 * Math.pow(hf, 1.6);

      let spl = phon + lowBoost - dip + highRise;
      return Math.max(0, Math.min(maxSPL, spl));
    }

    function initGrid() {
      const grid = document.getElementById('grid');
      const freqs = [20, 100, 500, 1000, 3500, 10000, 20000];
      const spls = [0, 20, 40, 60, 80, 100];

      // SPL Grid & Labels
      spls.forEach(s => {
        const y = splToY(s);
        const l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        l.setAttribute('x1', padL);
        l.setAttribute('x2', w - padR);
        l.setAttribute('y1', y);
        l.setAttribute('y2', y);
        l.setAttribute('class', 'grid-line');
        grid.appendChild(l);

        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', padL - 8);
        txt.setAttribute('y', y + 3);
        txt.setAttribute('text-anchor', 'end');
        txt.setAttribute('class', 'axis-label');
        txt.textContent = s + 'dB';
        grid.appendChild(txt);
      });

      // Frequency Grid & Labels
      freqs.forEach(f => {
        const x = fToX(f);
        const l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        l.setAttribute('x1', x);
        l.setAttribute('x2', x);
        l.setAttribute('y1', padT);
        l.setAttribute('y2', h - padB);
        l.setAttribute('class', 'grid-line');
        grid.appendChild(l);

        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', x);
        txt.setAttribute('y', h - padB + 16);
        txt.setAttribute('class', 'axis-label');
        txt.textContent = f >= 1000 ? (f / 1000) + 'k' : f;
        grid.appendChild(txt);
      });

      // Resonance Band positioning
      const x2k = fToX(2000);
      const x5k = fToX(5000);
      const rz = document.getElementById('resZone');
      rz.setAttribute('x', x2k);
      rz.setAttribute('width', x5k - x2k);

      const midResX = fToX(3162);
      document.getElementById('resText').setAttribute('x', midResX);
    }

    function renderCurves() {
      [20, 40, 80].forEach(p => {
        let d = '';
        for (let fx = minF; fx <= maxF; fx *= 1.05) {
          const x = fToX(fx);
          const y = splToY(getSPL(fx, p));
          d += (d === '' ? 'M' : 'L') + `${x.toFixed(1)},${y.toFixed(1)} `;
        }
        document.getElementById(`curve-${p}`).setAttribute('d', d);
      });
    }

    function updateProbe(freq) {
      currFreq = freq;
      const x = fToX(freq);
      const spl = getSPL(freq, activePhon);
      const y = splToY(spl);

      const probe = document.getElementById('probe');
      const track = document.getElementById('trackLine');
      probe.setAttribute('cx', x);
      probe.setAttribute('cy', y);
      track.setAttribute('x1', x);
      track.setAttribute('x2', x);

      document.getElementById('freqRead').textContent = Math.round(freq) + ' Hz';
      document.getElementById('splRead').textContent = Math.round(spl) + ' dB SPL';
      document.getElementById('phonRead').textContent = activePhon + ' phon';
    }

    function selectPhon(p) {
      activePhon = p;
      [20, 40, 80].forEach(val => {
        const c = document.getElementById(`curve-${val}`);
        if (val === p) {
          c.setAttribute('class', 'contour-line contour-active');
        } else {
          c.setAttribute('class', 'contour-line contour-faint');
        }
      });

      document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.includes(p));
      });
      updateProbe(currFreq);
    }

    // Interactive pointer on graph
    const svgEl = document.getElementById('graph');
    function handlePointer(evt) {
      const rect = svgEl.getBoundingClientRect();
      const clientX = evt.touches ? evt.touches[0].clientX : evt.clientX;
      const svgX = ((clientX - rect.left) / rect.width) * w;
      const f = xToF(svgX);
      updateProbe(f);
    }

    svgEl.addEventListener('pointerdown', e => { handlePointer(e); svgEl.setPointerCapture(e.pointerId); });
    svgEl.addEventListener('pointermove', e => { if (e.buttons > 0 || e.pointerType === 'touch') handlePointer(e); });

    // Web Audio audition demonstration
    function playTone(freq, duration, gainVal) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(gainVal, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + duration);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (err) {}
    }

    function playAudition() {
      // Play 100Hz (quiet perception) then 3.5kHz (loud perception) at identical amplitude
      playTone(100, 0.4, 0.2);
      setTimeout(() => {
        playTone(3500, 0.4, 0.05); // low voltage already sounds distinct
      }, 550);
    }

    initGrid();
    renderCurves();
    updateProbe(3500);
  </script>
</body>
</html>

Our ears are biologically hyper-sensitive between $2\text{ and }5\text{ kHz}$ because the human ear canal naturally resonates in this zone, helping us isolate human speech and distress calls.

At low volumes ($40\text{ phons}$), your ears struggle to detect bass, requiring up to $50\text{ dB}$ more physical sound pressure at $30\text{ Hz}$ to match the perceived loudness of a $1\text{ kHz}$ tone.

How does this biological curve dictate the volume at which you should mix your tracks?

Because equal-loudness curves flatten out at higher levels, studio engineers calibrate monitoring to roughly **$83\text{ to }85\text{ dB SPL}$** in professional control rooms so all frequencies are heard in true proportion.

If you mix exclusively at whisper-quiet levels, your brain under-perceives bass and treble, tricking you into over-boosting low-end EQ until the mix sounds muddy on other systems.

A common mistake is assuming that turning monitors up to maximum ($95+\text{ dB SPL}$) gives the flattest hearing — extreme volume actually causes rapid ear fatigue and temporary threshold shifts that blur your high-end judgment.

Set your main mixing balance at a comfortable reference volume, and then check your mix at quiet conversational levels to verify that the lead elements still cut through.

music-technology

The Audible Frequency Spectrum and Critical Bands. Identify frequency sub-ranges (sub-bass, bass, low-mids, high-mids, presence, brilliance) and explain the Fletcher-Munson equal-loudness contours.

How the Ear Works: Human Hearing, Equal Loudness Contours and Psychoacoustics

Understanding Equal Loudness Curves and Fletcher-Munson in Mixing

The Audio Spectrum: Frequency Bands, Critical Ranges, and EQ Sculpting

Pedagogical strategy for A2 Level Music Technology: Anchor psychoacoustic theory (Fletcher-Munson curves, critical bands) into hands-on studio workflow. Have students conduct an interactive sine-sweep hearing experiment at varying SPL levels (e.g., $55\text{ dB SPL}$ vs $83\text{ dB SPL}$) so they physically observe the bass rolloff illusion at lower volumes. Connect critical bands directly to parametric EQ techniques (Q-factor selection, complimentary frequency carving, and masking prevention between kick/bass or vocal/snare).

The Audible Frequency Spectrum and Critical Bands

The 6 Frequency Bands

Equal-Loudness Contours