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 cranking up a reverb plugin to make a lead vocal sound huge often just turns your entire mix into a muddy soup?

Reverb creates thousands of overlapping reflections that fill every empty pocket of the frequency spectrum, blurring instrument punch and clarity.

A **delay** creates distinct, spaced repetitions of an audio signal rather than a continuous wash.

Because delay repeats have quiet spaces between them, your brain perceives front-to-back depth without eating up valuable acoustic headroom.

<!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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .panel {
      width: 100%;
      max-width: 580px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 99px;
      font-weight: 600;
    }
    .tag-reverb { background: #fee2e2; color: #b91c1c; }
    .tag-delay { background: #e0f2fe; color: #0284c7; }
    
    .timeline-wrap {
      position: relative;
      height: 70px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .playhead {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #0284c7;
      box-shadow: 0 0 8px #0284c7;
      left: 0%;
      opacity: 0;
      pointer-events: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
    }
    button {
      background: #0284c7;
      color: #fff;
      border: none;
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s, background-color 0.2s;
    }
    button:hover { opacity: 0.9; }
    button:active { background: #0369a1; }
  </style>
</head>
<body>

  
  <div class="panel">
    <div class="panel-header">
      <span>Reverb</span>
      <span class="tag tag-reverb">Crowded Space</span>
    </div>
    <div class="timeline-wrap">
      <svg viewBox="0 0 500 70" preserveAspectRatio="none">
        
        <path d="M 20 60 L 20 10 
                 Q 80 18, 140 28 
                 Q 240 42, 360 54 
                 L 480 60 Z" 
              fill="rgba(239, 68, 68, 0.15)" stroke="#ef4444" stroke-width="1.5"/>
        
        <g stroke="#ef4444" stroke-width="1" opacity="0.6">
          <line x1="20" y1="10" x2="20" y2="60" stroke-width="3"/>
          <line x1="35" y1="18" x2="35" y2="60"/>
          <line x1="48" y1="20" x2="48" y2="60"/>
          <line x1="62" y1="22" x2="62" y2="60"/>
          <line x1="78" y1="25" x2="78" y2="60"/>
          <line x1="96" y1="27" x2="96" y2="60"/>
          <line x1="118" y1="30" x2="118" y2="60"/>
          <line x1="142" y1="33" x2="142" y2="60"/>
          <line x1="170" y1="37" x2="170" y2="60"/>
          <line x1="202" y1="41" x2="202" y2="60"/>
          <line x1="238" y1="45" x2="238" y2="60"/>
          <line x1="278" y1="48" x2="278" y2="60"/>
          <line x1="322" y1="52" x2="322" y2="60"/>
          <line x1="370" y1="55" x2="370" y2="60"/>
          <line x1="422" y1="58" x2="422" y2="60"/>
        </g>
      </svg>
      <div id="playhead1" class="playhead"></div>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span>Delay</span>
      <span class="tag tag-delay">Open Space</span>
    </div>
    <div class="timeline-wrap">
      <svg viewBox="0 0 500 70" preserveAspectRatio="none">
        
        
        <rect x="18" y="10" width="4" height="50" rx="2" fill="#0284c7"/>
        
        
        <rect x="22" y="58" width="108" height="2" fill="#cbd5e1"/>
        
        
        <rect x="130" y="24" width="4" height="36" rx="2" fill="#0284c7"/>
        
        
        <rect x="134" y="58" width="108" height="2" fill="#cbd5e1"/>
        
        
        <rect x="242" y="38" width="4" height="22" rx="2" fill="#0284c7"/>
        
        
        <rect x="246" y="58" width="108" height="2" fill="#cbd5e1"/>
        
        
        <rect x="354" y="48" width="4" height="12" rx="2" fill="#0284c7"/>
        
        
        <rect x="358" y="58" width="122" height="2" fill="#cbd5e1"/>
      </svg>
      <div id="playhead2" class="playhead"></div>
    </div>
  </div>

  
  <div class="controls">
    <button id="btnAudition">▶ Play Sound</button>
  </div>

  <script>
    const btn = document.getElementById('btnAudition');
    const p1 = document.getElementById('playhead1');
    const p2 = document.getElementById('playhead2');
    
    let isPlaying = false;
    let audioCtx = null;

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

      const now = audioCtx.currentTime;

      // 1. Dry Click / Transient
      function triggerImpulse(time, gainVal, freq = 880) {
        const osc = audioCtx.createOscillator();
        const g = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, time);
        g.gain.setValueAtTime(gainVal, time);
        g.gain.exponentialRampToValueAtTime(0.001, time + 0.08);
        osc.connect(g);
        g.connect(audioCtx.destination);
        osc.start(time);
        osc.stop(time + 0.08);
      }

      // Initial transient
      triggerImpulse(now + 0.05, 0.35, 650);

      // Reverb noise tail
      const dur = 1.4;
      const bufferSize = audioCtx.sampleRate * dur;
      const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
      const data = buffer.getChannelData(0);
      for (let i = 0; i < bufferSize; i++) {
        data[i] = (Math.random() * 2 - 1) * Math.exp(-3.5 * (i / bufferSize));
      }
      const noise = audioCtx.createBufferSource();
      noise.buffer = buffer;
      const filter = audioCtx.createBiquadFilter();
      filter.type = 'lowpass';
      filter.frequency.value = 1400;

      const reverbGain = audioCtx.createGain();
      reverbGain.gain.setValueAtTime(0.12, now + 0.05);
      reverbGain.gain.exponentialRampToValueAtTime(0.0001, now + dur);

      noise.connect(filter);
      filter.connect(reverbGain);
      reverbGain.connect(audioCtx.destination);
      noise.start(now + 0.05);

      // Delay discrete repeats
      triggerImpulse(now + 0.05 + 0.35, 0.18, 650);
      triggerImpulse(now + 0.05 + 0.70, 0.09, 650);
      triggerImpulse(now + 0.05 + 1.05, 0.04, 650);
    }

    function animatePlayhead(duration) {
      isPlaying = true;
      btn.style.opacity = '0.6';
      btn.style.pointerEvents = 'none';

      p1.style.opacity = '1';
      p2.style.opacity = '1';

      const startTime = performance.now();

      function update(t) {
        const elapsed = t - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const percent = (progress * 96) + 4; // Map along length

        p1.style.left = percent + '%';
        p2.style.left = percent + '%';

        if (progress < 1) {
          requestAnimationFrame(update);
        } else {
          setTimeout(() => {
            p1.style.opacity = '0';
            p2.style.opacity = '0';
            p1.style.left = '0%';
            p2.style.left = '0%';
            isPlaying = false;
            btn.style.opacity = '1';
            btn.style.pointerEvents = 'auto';
          }, 200);
        }
      }
      requestAnimationFrame(update);
    }

    btn.addEventListener('click', () => {
      if (isPlaying) return;
      playAudioSequence();
      animatePlayhead(1500);
    });
  </script>
</body>
</html>

How fast does a repeat need to be before your brain stops hearing an echo and starts hearing physical room depth?

## Slapback Delay: Immediate Intimate Depth

A **slapback delay** is a single distinct echo that arrives between 40 and 120 milliseconds after the dry sound, using zero feedback.

In the 1950s, audio engineer Sam Phillips pioneered tape slapback at Sun Records on Elvis Presley's voice to simulate room size without drowning the performance in muddy acoustic reverberation.

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

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2,132,199,0.3);
    }

    .display-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      position: relative;
    }

    .time-axis {
      position: relative;
      height: 160px;
      border-bottom: 2px solid #94a3b8;
      margin-bottom: 24px;
      overflow: hidden;
    }

    .grid-line {
      position: absolute;
      top: 0;
      bottom: 0;
      border-left: 1px dashed #e2e8f0;
    }

    .playhead {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0%;
      width: 2px;
      background: #ef4444;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
    }

    .impulse {
      position: absolute;
      bottom: 0;
      border-radius: 4px 4px 0 0;
      transition: all 0.3s ease;
    }

    .impulse-dry {
      left: 6%;
      width: 14px;
      height: 120px;
      background: #0284c7;
    }

    /* Slapback elements */
    .slapback-echo {
      left: 42%;
      width: 12px;
      height: 65px;
      background: #38bdf8;
    }

    .gap-indicator {
      position: absolute;
      bottom: 45px;
      left: 12%;
      width: 27%;
      border-bottom: 2px dashed #10b981;
      text-align: center;
      padding-bottom: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #059669;
    }

    /* Reverb elements */
    .reverb-cluster {
      position: absolute;
      bottom: 0;
      left: 12%;
      right: 4%;
      height: 90px;
      display: flex;
      align-items: flex-end;
      gap: 2px;
    }

    .reverb-bar {
      flex: 1;
      background: #94a3b8;
      border-radius: 2px 2px 0 0;
      opacity: 0.6;
    }

    .labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #64748b;
      margin-top: -18px;
      margin-bottom: 16px;
      padding: 0 4px;
    }

    .status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
    }

    .badge.clear { color: #059669; }
    .badge.muddy { color: #d97706; }

    .play-btn {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      color: #ffffff;
      background: #0284c7;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .play-btn:active {
      filter: brightness(0.9);
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btnDelay" onclick="setMode('delay')">Slapback Delay</button>
    <button class="tab-btn" id="btnReverb" onclick="setMode('reverb')">Reverberation</button>
  </div>

  <div class="display-card">
    <div class="time-axis" id="timeAxis">
      <div class="grid-line" style="left: 25%;"></div>
      <div class="grid-line" style="left: 50%;"></div>
      <div class="grid-line" style="left: 75%;"></div>
      <div class="playhead" id="playhead"></div>

      
      <div class="impulse impulse-dry" title="Dry Vocal"></div>

      
      <div id="delayContent">
        <div class="gap-indicator">Clean Gap</div>
        <div class="impulse slapback-echo"></div>
      </div>

      
      <div id="reverbContent" style="display: none;">
        <div class="reverb-cluster" id="reverbBars"></div>
      </div>
    </div>

    <div class="labels">
      <span>0 ms (Dry)</span>
      <span>120 ms</span>
      <span>250 ms</span>
      <span>500 ms</span>
    </div>

    <div class="status-row">
      <div id="statusBadge" class="badge clear">
        <span>✓ High Clarity</span>
      </div>
      <button class="play-btn" onclick="playAudio()">
        <span>Listen</span> 🔊
      </button>
    </div>
  </div>

  <script>
    let mode = 'delay';
    let audioCtx = null;

    // Generate Reverb Tail Bars
    const reverbBarsContainer = document.getElementById('reverbBars');
    const barCount = 38;
    for (let i = 0; i < barCount; i++) {
      const bar = document.createElement('div');
      bar.className = 'reverb-bar';
      const decay = Math.exp(-i / 11);
      const randomJitter = 0.6 + Math.random() * 0.4;
      const height = Math.max(4, Math.round(80 * decay * randomJitter));
      bar.style.height = height + 'px';
      reverbBarsContainer.appendChild(bar);
    }

    function setMode(newMode) {
      mode = newMode;
      const isDelay = mode === 'delay';
      
      document.getElementById('btnDelay').classList.toggle('active', isDelay);
      document.getElementById('btnReverb').classList.toggle('active', !isDelay);
      document.getElementById('delayContent').style.display = isDelay ? 'block' : 'none';
      document.getElementById('reverbContent').style.display = isDelay ? 'none' : 'block';

      const status = document.getElementById('statusBadge');
      if (isDelay) {
        status.className = 'badge clear';
        status.innerHTML = '<span>✓ High Clarity</span>';
      } else {
        status.className = 'badge muddy';
        status.innerHTML = '<span>⚠ Muddy Tail</span>';
      }
    }

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

      const now = audioCtx.currentTime;

      // Dry vocal burst
      playDryNote(now);

      if (mode === 'delay') {
        // Single clean slapback ~120ms
        playDryNote(now + 0.12, 0.45);
      } else {
        // Reverb wash
        for (let i = 1; i <= 24; i++) {
          const t = now + (i * 0.016);
          const gain = 0.3 * Math.exp(-i / 8);
          playDiffuseEcho(t, gain);
        }
      }

      animatePlayhead();
    }

    function playDryNote(time, gainLvl = 0.8) {
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(330, time);
      osc.frequency.exponentialRampToValueAtTime(220, time + 0.07);

      gain.gain.setValueAtTime(gainLvl, time);
      gain.gain.exponentialRampToValueAtTime(0.001, time + 0.07);

      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start(time);
      osc.stop(time + 0.08);
    }

    function playDiffuseEcho(time, gainLvl) {
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(200 + Math.random() * 300, time);

      gain.gain.setValueAtTime(gainLvl, time);
      gain.gain.exponentialRampToValueAtTime(0.001, time + 0.04);

      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start(time);
      osc.stop(time + 0.05);
    }

    function animatePlayhead() {
      const playhead = document.getElementById('playhead');
      playhead.style.transition = 'none';
      playhead.style.left = '6%';
      playhead.style.opacity = '1';

      setTimeout(() => {
        playhead.style.transition = 'left 0.5s linear, opacity 0.2s ease 0.4s';
        playhead.style.left = '94%';
        playhead.style.opacity = '0';
      }, 20);
    }
  </script>
</body>
</html>

What if you want wide, rhythmic movement across the stereo field instead of a tight center reflection?

A **timed delay** synchronizes repeats to the project tempo using rhythmic subdivisions like eighth notes ($1/8$) or dotted eighth notes ($1/8\text{d}$).

Because there are 60,000 milliseconds in one minute, you calculate the duration of a single quarter-note beat in milliseconds using the song tempo: $$t_{\text{quarter}} = \frac{60000}{\text{BPM}}$$

In a **ping-pong delay**, alternating left and right delay times bounce sound across the stereo field, creating massive width while keeping the center clear for vocals and kick drums.

<!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>Ping-Pong Delay Stereo Field</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header-bar {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #64748b;
      text-transform: uppercase;
      padding: 0 4px 6px;
    }

    .stereo-stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 12px 16px 16px;
    }

    .pan-axis {
      position: absolute;
      top: 50%;
      left: 10%;
      right: 10%;
      height: 2px;
      background: #e2e8f0;
      transform: translateY(-50%);
      z-index: 1;
    }

    .center-corridor {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 38%;
      width: 24%;
      background: rgba(14, 165, 233, 0.04);
      border-left: 1px dashed #cbd5e1;
      border-right: 1px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: none;
    }

    .center-label {
      background: #f1f5f9;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      text-align: center;
      letter-spacing: 0.3px;
    }

    .svg-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .bounce-path {
      fill: none;
      stroke: #0ea5e9;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
      opacity: 0.4;
    }

    .echo-nodes {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .node {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .node-circle {
      border-radius: 50%;
      background: #0ea5e9;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
      transition: all 0.25s ease;
    }

    .node.active .node-circle {
      background: #0284c7;
      box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.35);
      transform: scale(1.18);
    }

    .node-tag {
      margin-top: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }

    .speaker-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      z-index: 4;
    }

    .controls-row {
      width: 100%;
      max-width: 520px;
      margin-top: 10px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .btn {
      flex: 1;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      user-select: none;
      transition: background 0.15s, border-color 0.15s;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #0ea5e9;
      color: #ffffff;
      border-color: #0ea5e9;
    }

    .btn-primary:active {
      background: #0284c7;
    }

    .beat-selector {
      display: flex;
      gap: 4px;
      flex: 1.2;
    }

    .beat-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.15s;
    }

    .beat-btn.active {
      background: #0ea5e9;
      color: #ffffff;
      border-color: #0ea5e9;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span>◀ Left (100% L)</span>
    <span>Center (0)</span>
    <span>Right (100% R) ▶</span>
  </div>

  <div class="stereo-stage" id="stage">
    <div class="speaker-labels">
      <span>🔊 L Delay Tap</span>
      <span>🔊 R Delay Tap</span>
    </div>

    <div class="pan-axis"></div>

    <div class="center-corridor">
      <div class="center-label">Center Uncluttered<br><span style="font-size: 10px; font-weight: 500; opacity: 0.8;">Lead / Kick</span></div>
    </div>

    <svg class="svg-layer" viewBox="0 0 500 240" preserveAspectRatio="none">
      <path class="bounce-path" d="M 60,60 Q 250,150 440,80 Q 250,190 80,150 Q 250,220 420,180" />
    </svg>

    <div class="echo-nodes">
      
      <div class="node active" id="node-0" style="left: 14%; top: 25%;">
        <div class="node-circle" style="width: 36px; height: 36px;">1</div>
        <div class="node-tag">1/4 Left</div>
      </div>

      
      <div class="node" id="node-1" style="left: 86%; top: 35%;">
        <div class="node-circle" style="width: 30px; height: 30px; opacity: 0.85;">2</div>
        <div class="node-tag">2/4 Right</div>
      </div>

      
      <div class="node" id="node-2" style="left: 16%; top: 62%;">
        <div class="node-circle" style="width: 25px; height: 25px; opacity: 0.65;">3</div>
        <div class="node-tag">3/4 Left</div>
      </div>

      
      <div class="node" id="node-3" style="left: 84%; top: 75%;">
        <div class="node-circle" style="width: 20px; height: 20px; opacity: 0.45; font-size: 11px;">4</div>
        <div class="node-tag">4/4 Right</div>
      </div>
    </div>
  </div>

  <div class="controls-row">
    <button class="btn btn-primary" id="playAudioBtn">Play Ping-Pong 🔊</button>
    <div class="beat-selector">
      <button class="beat-btn active" data-step="0">Tap 1</button>
      <button class="beat-btn" data-step="1">Tap 2</button>
      <button class="beat-btn" data-step="2">Tap 3</button>
      <button class="beat-btn" data-step="3">Tap 4</button>
    </div>
  </div>

  <script>
    const nodes = [
      document.getElementById('node-0'),
      document.getElementById('node-1'),
      document.getElementById('node-2'),
      document.getElementById('node-3')
    ];
    const beatBtns = document.querySelectorAll('.beat-btn');
    const playAudioBtn = document.getElementById('playAudioBtn');

    let currentStep = 0;
    let timer = null;

    function setStep(idx) {
      currentStep = idx;
      nodes.forEach((node, i) => {
        if (i === idx) node.classList.add('active');
        else node.classList.remove('active');
      });
      beatBtns.forEach((btn, i) => {
        if (i === idx) btn.classList.add('active');
        else btn.classList.remove('active');
      });
    }

    beatBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        stopAutoLoop();
        setStep(idx);
      });
    });

    function startAutoLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % nodes.length;
        setStep(currentStep);
      }, 900);
    }

    function stopAutoLoop() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    // Interactive Audio Synthesis: stereo panned echo sequence
    let audioCtx = null;

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

      const bpm = 120;
      const beatDur = 60 / bpm; // 0.5s per tap
      const startTime = audioCtx.currentTime + 0.05;

      const taps = [
        { pan: -0.9, freq: 520, gain: 0.35, step: 0 },
        { pan:  0.9, freq: 520, gain: 0.24, step: 1 },
        { pan: -0.9, freq: 520, gain: 0.16, step: 2 },
        { pan:  0.9, freq: 520, gain: 0.09, step: 3 }
      ];

      taps.forEach((tap, i) => {
        const time = startTime + (i * beatDur);

        // Schedule visual highlight
        setTimeout(() => {
          setStep(tap.step);
        }, (time - audioCtx.currentTime) * 1000);

        // Audio node graph
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(tap.freq, time);

        // Pan if StereoPanner is supported
        if (audioCtx.createStereoPanner) {
          const panner = audioCtx.createStereoPanner();
          panner.pan.setValueAtTime(tap.pan, time);
          osc.connect(gain);
          gain.connect(panner);
          panner.connect(audioCtx.destination);
        } else {
          osc.connect(gain);
          gain.connect(audioCtx.destination);
        }

        // Envelope
        gain.gain.setValueAtTime(0.0001, time);
        gain.gain.exponentialRampToValueAtTime(tap.gain, time + 0.02);
        gain.gain.exponentialRampToValueAtTime(0.0001, time + beatDur * 0.9);

        osc.start(time);
        osc.stop(time + beatDur);
      });

      // Resume visual cycle after audio finishes
      setTimeout(() => {
        startAutoLoop();
      }, (taps.length * beatDur + 0.8) * 1000);
    }

    playAudioBtn.addEventListener('click', playPingPongAudio);

    // Initial slow visual progression
    startAutoLoop();
  </script>
</body>
</html>

Even timed delays can build up clutter if their raw frequencies clash with the lead track—so how do mixing engineers make them transparent?

## Sculpting Transparency: The Abbey Road Filter Trick

The **Abbey Road delay trick** inserts an equalizer on the delay return, cutting frequencies below 300 Hz and above 5,000 Hz.

High-passing cuts low-end rumble that masks bass guitars, while low-passing removes harsh vocal 's' sounds from repeating forever in the background.

<!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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      min-height: 100%;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
    }
    .btn-tab {
      flex: 1;
      min-width: 90px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .btn-tab.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2,132,199,0.25);
    }

    /* Main Visual Display */
    .display-box {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Timeline & Space Section */
    .viz-canvas-wrap {
      width: 100%;
      height: 150px;
      position: relative;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: hidden;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Frequency Filter Bar */
    .freq-bar-wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .freq-header {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
    }
    .spectrum-bar {
      height: 24px;
      border-radius: 6px;
      background: #e2e8f0;
      position: relative;
      overflow: hidden;
      display: flex;
    }
    .band-cut {
      background: repeating-linear-gradient(
        -45deg,
        #cbd5e1,
        #cbd5e1 4px,
        #e2e8f0 4px,
        #e2e8f0 8px
      );
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      transition: width 0.3s ease;
    }
    .band-pass {
      background: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      transition: width 0.3s ease, background-color 0.3s ease;
    }

    /* Sound trigger */
    .audio-btn {
      align-self: center;
      padding: 7px 18px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #0f172a;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.15s ease;
    }
    .audio-btn:active {
      transform: scale(0.97);
      background: #f1f5f9;
    }
    .status-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-tab active" data-mode="reverb">Reverb</button>
    <button class="btn-tab" data-mode="raw">Full Delay</button>
    <button class="btn-tab" data-mode="filtered">HPF/LPF Delay</button>
  </div>

  
  <div class="display-box">
    
    <div class="viz-canvas-wrap">
      <canvas id="vizCanvas"></canvas>
    </div>

    
    <div class="freq-bar-wrap">
      <div class="freq-header">
        <span>20 Hz</span>
        <span id="centerBandLabel">PASSBAND</span>
        <span>20 kHz</span>
      </div>
      <div class="spectrum-bar">
        <div id="hpfCut" class="band-cut" style="width: 0%;">HPF CUT</div>
        <div id="passBand" class="band-pass" style="width: 100%;">FULL SPECTRUM</div>
        <div id="lpfCut" class="band-cut" style="width: 0%;">LPF CUT</div>
      </div>
    </div>
  </div>

  
  <button id="audioBtn" class="audio-btn">
    <span>Audition 🔊</span>
  </button>

  <script>
    const canvas = document.getElementById('vizCanvas');
    const ctx = canvas.getContext('2d');
    const tabs = document.querySelectorAll('.btn-tab');
    const hpfCut = document.getElementById('hpfCut');
    const passBand = document.getElementById('passBand');
    const lpfCut = document.getElementById('lpfCut');
    const centerBandLabel = document.getElementById('centerBandLabel');
    const audioBtn = document.getElementById('audioBtn');

    let currentMode = 'reverb';
    let animFrame = null;
    let time = 0;

    function resizeCanvas() {
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * window.devicePixelRatio;
      canvas.height = rect.height * window.devicePixelRatio;
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    // Mode configuration
    const modes = {
      reverb: {
        hpf: 0,
        lpf: 0,
        label: 'DENSE MUD (LOWS + HARSH HIGHS)',
        color: '#94a3b8'
      },
      raw: {
        hpf: 0,
        lpf: 0,
        label: 'FULL-BAND ECHO',
        color: '#38bdf8'
      },
      filtered: {
        hpf: 25,
        lpf: 25,
        label: 'TRANSPARENT MID POCKET',
        color: '#0284c7'
      }
    };

    function setMode(mode) {
      currentMode = mode;
      tabs.forEach(t => t.classList.toggle('active', t.dataset.mode === mode));
      const m = modes[mode];

      hpfCut.style.width = m.hpf + '%';
      lpfCut.style.width = m.lpf + '%';
      passBand.style.width = (100 - m.hpf - m.lpf) + '%';
      passBand.style.backgroundColor = m.color;
      passBand.textContent = mode === 'filtered' ? '300 Hz – 4 kHz' : 'FULL MIX';
      centerBandLabel.textContent = m.label;
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => setMode(tab.dataset.mode));
    });

    // Visual Render Loop
    function draw() {
      const w = canvas.width / window.devicePixelRatio;
      const h = canvas.height / window.devicePixelRatio;
      ctx.clearRect(0, 0, w, h);

      time += 0.02;

      // Base time axis
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(20, h - 20);
      ctx.lineTo(w - 20, h - 20);
      ctx.stroke();

      // Transient (Dry Sound)
      const dryX = 40;
      ctx.fillStyle = '#0f172a';
      ctx.fillRect(dryX - 3, h - 80, 6, 60);

      ctx.fillStyle = '#0f172a';
      ctx.font = 'bold 11px system-ui';
      ctx.textAlign = 'center';
      ctx.fillText('DRY', dryX, h - 88);

      if (currentMode === 'reverb') {
        // Continuous dense wash
        ctx.fillStyle = 'rgba(148, 163, 184, 0.45)';
        ctx.beginPath();
        ctx.moveTo(dryX + 5, h - 20);
        for (let x = dryX + 5; x < w - 20; x += 3) {
          const decay = Math.exp(-(x - dryX) / 100);
          const noise = (Math.sin(x * 0.4 + time * 4) + Math.cos(x * 0.9)) * 14 * decay;
          const y = h - 20 - (50 * decay + noise);
          ctx.lineTo(x, Math.min(h - 20, y));
        }
        ctx.lineTo(w - 20, h - 20);
        ctx.closePath();
        ctx.fill();

        ctx.fillStyle = '#64748b';
        ctx.fillText('Dense Clutter / Washed Out', w * 0.6, 40);
      } 
      else if (currentMode === 'raw') {
        // Discrete unfiltered spikes
        const taps = [110, 180, 250, 320];
        taps.forEach((tapX, idx) => {
          if (tapX > w - 25) return;
          const amp = Math.pow(0.65, idx + 1);
          const barH = 55 * amp;

          ctx.fillStyle = '#38bdf8';
          ctx.fillRect(tapX - 3, h - 20 - barH, 6, barH);

          // Rumble & Sibilance indicators
          ctx.fillStyle = '#dc2626';
          ctx.fillRect(tapX - 3, h - 20 - 6, 6, 6); // rumble
          ctx.fillStyle = '#ea580c';
          ctx.fillRect(tapX - 3, h - 20 - barH, 6, 6); // sibilance
        });

        ctx.fillStyle = '#0284c7';
        ctx.fillText('Full Echo Repeats (Masks Low/Highs)', w * 0.6, 40);
      } 
      else if (currentMode === 'filtered') {
        // Discrete filtered clean rounded taps
        const taps = [110, 180, 250, 320];
        taps.forEach((tapX, idx) => {
          if (tapX > w - 25) return;
          const amp = Math.pow(0.65, idx + 1);
          const barH = 45 * amp;

          ctx.fillStyle = '#0284c7';
          ctx.beginPath();
          ctx.roundRect(tapX - 3, h - 20 - barH, 6, barH, [3, 3, 0, 0]);
          ctx.fill();
        });

        ctx.fillStyle = '#0284c7';
        ctx.fillText('Transparent Echo (Clear Bass & Vocal)', w * 0.6, 40);
      }

      requestAnimationFrame(draw);
    }
    draw();

    // Audio Engine (Web Audio API)
    let audioCtx = null;

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

      const now = audioCtx.currentTime;

      // Dry sound: transient snap
      const dryOsc = audioCtx.createOscillator();
      const dryGain = audioCtx.createGain();
      dryOsc.type = 'triangle';
      dryOsc.frequency.setValueAtTime(440, now);
      dryOsc.frequency.exponentialRampToValueAtTime(110, now + 0.08);

      dryGain.gain.setValueAtTime(0.6, now);
      dryGain.gain.exponentialRampToValueAtTime(0.001, now + 0.09);

      dryOsc.connect(dryGain);
      dryGain.connect(audioCtx.destination);
      dryOsc.start(now);
      dryOsc.stop(now + 0.1);

      // Effect Path
      if (currentMode === 'reverb') {
        // Noise burst with long diffuse decay
        const bufferSize = audioCtx.sampleRate * 1.5;
        const noiseBuffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
        const output = noiseBuffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) {
          output[i] = (Math.random() * 2 - 1) * Math.exp(-i / (audioCtx.sampleRate * 0.35));
        }

        const noise = audioCtx.createBufferSource();
        noise.buffer = noiseBuffer;
        const revGain = audioCtx.createGain();
        revGain.gain.setValueAtTime(0.35, now);
        revGain.gain.exponentialRampToValueAtTime(0.001, now + 1.4);

        noise.connect(revGain);
        revGain.connect(audioCtx.destination);
        noise.start(now + 0.02);
      } 
      else {
        // Delay repeats
        const delayTimes = [0.18, 0.36, 0.54, 0.72];
        delayTimes.forEach((t, i) => {
          const osc = audioCtx.createOscillator();
          const g = audioCtx.createGain();
          const amp = Math.pow(0.55, i + 1) * 0.45;

          osc.type = currentMode === 'filtered' ? 'sine' : 'sawtooth';
          osc.frequency.setValueAtTime(330, now + t);
          osc.frequency.exponentialRampToValueAtTime(165, now + t + 0.07);

          g.gain.setValueAtTime(amp, now + t);
          g.gain.exponentialRampToValueAtTime(0.001, now + t + 0.08);

          if (currentMode === 'filtered') {
            const hpf = audioCtx.createBiquadFilter();
            hpf.type = 'highpass';
            hpf.frequency.value = 350;

            const lpf = audioCtx.createBiquadFilter();
            lpf.type = 'lowpass';
            lpf.frequency.value = 3000;

            osc.connect(hpf);
            hpf.connect(lpf);
            lpf.connect(g);
          } else {
            osc.connect(g);
          }

          g.connect(audioCtx.destination);
          osc.start(now + t);
          osc.stop(now + t + 0.1);
        });
      }
    }

    audioBtn.addEventListener('click', playSound);
  </script>
</body>
</html>

A common mistake is inserting delays directly onto the instrument channel with a 50% wet blend, which washes out the dry track's initial transient.

Always set your delay plugin to 100% wet on a dedicated **auxiliary send track**, allowing you to filter and blend the spatial cues without altering the dry performance.

music-technology

Delay as a Transparent Alternative to Reverberation. Use timed stereo and slapback delays to create depth and dimension without filling the frequency spectrum with reverb wash.

Creating A Sense Of Depth In Your Mix: Delay vs Reverb

Component 13 & 14: Delay, Modulated Delay, and Spatial Reverb Processing

Music Technology: Dynamic and Time-Based Effects in the Stereo Field

Pedagogical Strategy: Implement an active A/B listening lab. Have Year 13 students take a dense multi-track session and mix the lead vocal first using only algorithmic hall reverb, analyzing the frequency spectrum on a real-time FFT analyzer to identify masking around 300-600 Hz. Next, replace the reverb with a dual-mono dotted-eighth/quarter note filtered delay and a slapback auxiliary send. Students quantify the improvement in vocal crest factor, transient punch, and mid-range clarity, directly supporting Edexcel/AQA A-Level Music Technology Component 3/4 assessment objectives regarding mix balance and spatial processing.

Delay as a Transparent Alternative to Reverberation

Reverb Wash vs. Discrete Delays

Slapback Delay: Immediate Intimate Depth

Timed Stereo and Ping-Pong Delays