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

Did you know you carry a whole musical toolbox inside your throat?

Musicians use **five different voices** to talk, play, and make music every single day.

<!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;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 600px;
  }
  .voice-card {
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid rgba(0,0,0,0.06);
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
    min-height: 80px;
  }
  .voice-card:hover {
    filter: brightness(0.97);
  }
  .voice-card.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
  }
  .emoji {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .label {
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
    line-height: 1.1;
  }
  .display-box {
    width: 100%;
    max-width: 600px;
    height: 180px;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .wave-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 90px;
    width: 100%;
  }
  .bar {
    width: 10px;
    border-radius: 6px;
    background: #22b7ff;
    transition: height 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .desc-badge {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .play-btn {
    margin-top: 12px;
    background: #22b7ff;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
  }
  .play-btn:active {
    opacity: 0.85;
  }
  @media (max-width: 480px) {
    .label { font-size: 11px; }
    .emoji { font-size: 22px; }
    .voice-card { padding: 8px 2px; min-height: 70px; }
    .display-box { height: 160px; }
    .wave-container { height: 75px; gap: 4px; }
    .bar { width: 8px; }
  }
</style>
</head>
<body>

<div class="grid">
  <div class="voice-card active" onclick="selectVoice(0)">
    <span class="emoji">🤫</span>
    <span class="label">Whisper</span>
  </div>
  <div class="voice-card" onclick="selectVoice(1)">
    <span class="emoji">🗣️</span>
    <span class="label">Speaking</span>
  </div>
  <div class="voice-card" onclick="selectVoice(2)">
    <span class="emoji">📢</span>
    <span class="label">Calling</span>
  </div>
  <div class="voice-card" onclick="selectVoice(3)">
    <span class="emoji">🎵</span>
    <span class="label">Singing</span>
  </div>
  <div class="voice-card" onclick="selectVoice(4)">
    <span class="emoji">🧠</span>
    <span class="label">Thinking</span>
  </div>
</div>

<div class="display-box">
  <div class="wave-container" id="waveBox"></div>
  <div class="desc-badge" id="voiceDesc">Very Soft &amp; Airy</div>
</div>

<button class="play-btn" onclick="hearVoice()">
  <span>▶</span> Hear Tone
</button>

<script>
const voices = [
  { name: 'Whisper', desc: 'Very Soft & Airy', bars: [8, 12, 16, 14, 18, 14, 16, 12, 8], color: '#94a3b8', pitch: 220, type: 'noise' },
  { name: 'Speaking', desc: 'Normal Talking Pitch', bars: [14, 24, 40, 32, 45, 30, 38, 22, 14], color: '#3b82f6', pitch: 180, type: 'triangle' },
  { name: 'Calling', desc: 'Loud & Projected', bars: [35, 55, 75, 80, 85, 80, 75, 55, 35], color: '#f97316', pitch: 330, type: 'sawtooth' },
  { name: 'Singing', desc: 'Melodic & Pitched', bars: [20, 45, 70, 50, 78, 50, 70, 45, 20], color: '#22c55e', pitch: [261.6, 329.6, 392.0, 523.3], type: 'sine' },
  { name: 'Thinking', desc: 'Silent Inner Voice', bars: [4, 4, 4, 4, 4, 4, 4, 4, 4], color: '#a855f7', pitch: 0, type: 'silent' }
];

let currentIndex = 0;
const waveBox = document.getElementById('waveBox');
const voiceDesc = document.getElementById('voiceDesc');
const cards = document.querySelectorAll('.voice-card');

function initWaves() {
  waveBox.innerHTML = '';
  for (let i = 0; i < 9; i++) {
    const bar = document.createElement('div');
    bar.className = 'bar';
    waveBox.appendChild(bar);
  }
  updateDisplay();
}

function updateDisplay() {
  const v = voices[currentIndex];
  voiceDesc.textContent = v.desc;
  voiceDesc.style.color = v.color;
  
  const bars = waveBox.querySelectorAll('.bar');
  bars.forEach((bar, idx) => {
    bar.style.height = v.bars[idx] + 'px';
    bar.style.backgroundColor = v.color;
    bar.style.opacity = v.type === 'silent' ? '0.3' : '1';
  });

  cards.forEach((card, idx) => {
    if (idx === currentIndex) {
      card.classList.add('active');
    } else {
      card.classList.remove('active');
    }
  });
}

function selectVoice(index) {
  currentIndex = index;
  updateDisplay();
  hearVoice();
}

function hearVoice() {
  const v = voices[currentIndex];
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  if (!AudioContext) return;
  const ctx = new AudioContext();

  if (v.type === 'silent') {
    return;
  }

  if (v.type === 'noise') {
    const bufferSize = ctx.sampleRate * 0.4;
    const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
    const data = buffer.getChannelData(0);
    for (let i = 0; i < bufferSize; i++) {
      data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.5));
    }
    const noise = ctx.createBufferSource();
    noise.buffer = buffer;
    const filter = ctx.createBiquadFilter();
    filter.type = 'bandpass';
    filter.frequency.value = 1000;
    const gain = ctx.createGain();
    gain.gain.setValueAtTime(0.08, ctx.currentTime);
    noise.connect(filter);
    filter.connect(gain);
    gain.connect(ctx.destination);
    noise.start();
    return;
  }

  if (Array.isArray(v.pitch)) {
    v.pitch.forEach((freq, idx) => {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = 'sine';
      osc.frequency.value = freq;
      osc.connect(gain);
      gain.connect(ctx.destination);
      const start = ctx.currentTime + idx * 0.12;
      const dur = 0.18;
      gain.gain.setValueAtTime(0, start);
      gain.gain.linearRampToValueAtTime(0.18, start + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, start + dur);
      osc.start(start);
      osc.stop(start + dur);
    });
    return;
  }

  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  osc.type = v.type;
  osc.frequency.value = v.pitch;
  osc.connect(gain);
  gain.connect(ctx.destination);
  const dur = v.name === 'Calling' ? 0.5 : 0.35;
  const vol = v.name === 'Calling' ? 0.25 : 0.15;
  gain.gain.setValueAtTime(vol, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
  osc.start();
  osc.stop(ctx.currentTime + dur);
}

initWaves();
</script>
</body>
</html>

Which voice do you use to tell a secret, and which one do you use on the playground?

Your **speaking voice** is your normal everyday voice that you use to answer questions in class.

Your **whispering voice** is super quiet and uses only breath with no vocal buzz to share secrets.

<!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 Five Voices</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: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 500px;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .character-container {
      position: relative;
      width: 120px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar {
      font-size: 64px;
      z-index: 2;
      transition: transform 0.3s ease;
    }

    .vibe-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid var(--theme-color, #22b7ff);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .stage-label {
      font-size: 20px;
      font-weight: 700;
      color: var(--theme-color, #22b7ff);
      margin-top: 4px;
      margin-bottom: 12px;
      text-align: center;
      height: 28px;
      line-height: 28px;
    }

    .visualizer-area {
      width: 100%;
      height: 70px;
      background: #f8f9fa;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border: 1px solid #eef0f2;
    }

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

    .action-btn {
      margin-top: 14px;
      background: var(--theme-color, #22b7ff);
      color: #ffffff;
      border: none;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: opacity 0.2s ease, box-shadow 0.2s ease;
    }

    .action-btn:hover {
      opacity: 0.92;
    }

    .action-btn:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 500px;
      margin-top: 12px;
    }

    .voice-tab {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .voice-tab .tab-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }

    .voice-tab .tab-name {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
    }

    .voice-tab.active {
      border-color: var(--tab-theme, #22b7ff);
      box-shadow: 0 0 0 2px var(--tab-theme, #22b7ff);
      background: #ffffff;
    }

    .voice-tab.active .tab-name {
      color: #1e2945;
      font-weight: 700;
    }

    @keyframes pulse-ring {
      0% { width: 60px; height: 60px; opacity: 0.8; }
      100% { width: 110px; height: 110px; opacity: 0; }
    }

    .vibe-ring.animating {
      animation: pulse-ring 1s infinite ease-out;
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage" style="--theme-color: #8b5cf6;">
    <div class="character-container">
      <div class="vibe-ring" id="vibeRing"></div>
      <div class="avatar" id="avatarDisplay">🤫</div>
    </div>
    
    <div class="stage-label" id="voiceTitle">Whisper</div>

    <div class="visualizer-area">
      <svg class="wave-svg" viewBox="0 0 300 70" preserveAspectRatio="none" id="waveCanvas">
        
      </svg>
    </div>

    <button class="action-btn" id="listenBtn">
      <span>Play Sound</span> 🔊
    </button>
  </div>

  <div class="nav-grid">
    <button class="voice-tab active" data-index="0" style="--tab-theme: #8b5cf6;">
      <span class="tab-icon">🤫</span>
      <span class="tab-name">Whisper</span>
    </button>
    <button class="voice-tab" data-index="1" style="--tab-theme: #22b7ff;">
      <span class="tab-icon">💬</span>
      <span class="tab-name">Speak</span>
    </button>
    <button class="voice-tab" data-index="2" style="--tab-theme: #ec4899;">
      <span class="tab-icon">🗣️</span>
      <span class="tab-name">Call</span>
    </button>
    <button class="voice-tab" data-index="3" style="--tab-theme: #10b981;">
      <span class="tab-icon">🎵</span>
      <span class="tab-name">Sing</span>
    </button>
    <button class="voice-tab" data-index="4" style="--tab-theme: #f59e0b;">
      <span class="tab-icon">✨</span>
      <span class="tab-name">Play</span>
    </button>
  </div>

  <script>
    const VOICES = [
      {
        name: "Whisper",
        icon: "🤫",
        color: "#8b5cf6",
        soundType: "whisper",
        draw: (ctx) => {
          // Breathy, tiny dotted line
          return `<path d="M 10 35 Q 75 32, 150 35 T 290 35" fill="none" stroke="#8b5cf6" stroke-width="2.5" stroke-dasharray="4 6" />`;
        }
      },
      {
        name: "Speak",
        icon: "💬",
        color: "#22b7ff",
        soundType: "speak",
        draw: () => {
          // Even, normal rhythmic wave
          let p = "M 10 35";
          for (let x = 10; x <= 290; x += 20) {
            let y = (x % 40 === 10) ? 23 : 47;
            p += ` Q ${x + 10} ${y}, ${x + 20} 35`;
          }
          return `<path d="${p}" fill="none" stroke="#22b7ff" stroke-width="3.5" stroke-linecap="round" />`;
        }
      },
      {
        name: "Call",
        icon: "🗣️",
        color: "#ec4899",
        soundType: "call",
        draw: () => {
          // Huge amplitude wave expanding outward
          let p = "M 10 35";
          const pts = [
            [45, 20], [80, 50], [115, 12], [150, 58], 
            [185, 8], [220, 62], [255, 5], [290, 35]
          ];
          for (let i = 0; i < pts.length; i += 2) {
            p += ` Q ${pts[i][0]} ${pts[i][1]}, ${pts[i+1][0]} ${pts[i+1][1]}`;
          }
          return `<path d="${p}" fill="none" stroke="#ec4899" stroke-width="4.5" stroke-linecap="round" />`;
        }
      },
      {
        name: "Sing",
        icon: "🎵",
        color: "#10b981",
        soundType: "sing",
        draw: () => {
          // Smooth melody wave with musical notes
          return `
            <path d="M 10 45 C 70 10, 100 60, 160 30 C 220 5, 250 55, 290 25" fill="none" stroke="#10b981" stroke-width="4" stroke-linecap="round"/>
            <circle cx="85" cy="30" r="5" fill="#10b981"/>
            <circle cx="190" cy="20" r="5" fill="#10b981"/>
            <circle cx="270" cy="32" r="5" fill="#10b981"/>
          `;
        }
      },
      {
        name: "Play",
        icon: "✨",
        color: "#f59e0b",
        soundType: "play",
        draw: () => {
          // Fun loop-the-loop coaster
          return `
            <path d="M 10 50 Q 60 10, 90 35 T 140 35 C 155 10, 185 10, 185 35 C 185 55, 155 55, 165 35 C 180 5, 240 60, 290 20" 
                  fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round"/>
          `;
        }
      }
    ];

    let currentIndex = 0;
    let audioCtx = null;

    const stage = document.getElementById("stage");
    const avatar = document.getElementById("avatarDisplay");
    const voiceTitle = document.getElementById("voiceTitle");
    const waveCanvas = document.getElementById("waveCanvas");
    const vibeRing = document.getElementById("vibeRing");
    const listenBtn = document.getElementById("listenBtn");
    const tabs = document.querySelectorAll(".voice-tab");

    function renderVoice(index) {
      currentIndex = index;
      const v = VOICES[index];
      
      stage.style.setProperty("--theme-color", v.color);
      avatar.textContent = v.icon;
      voiceTitle.textContent = v.name;
      waveCanvas.innerHTML = v.draw();

      tabs.forEach((tab, idx) => {
        if (idx === index) {
          tab.classList.add("active");
        } else {
          tab.classList.remove("active");
        }
      });

      vibeRing.classList.remove("animating");
    }

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

    function playSoundEffect() {
      initAudio();
      vibeRing.classList.remove("animating");
      void vibeRing.offsetWidth; // Trigger reflow to restart animation
      vibeRing.classList.add("animating");

      const type = VOICES[currentIndex].soundType;
      const now = audioCtx.currentTime;

      if (type === "whisper") {
        // Filtered soft breath noise
        const dur = 0.6;
        const bufSize = audioCtx.sampleRate * dur;
        const buf = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
        const data = buf.getChannelData(0);
        for (let i = 0; i < bufSize; i++) data[i] = Math.random() * 2 - 1;

        const noise = audioCtx.createBufferSource();
        noise.buffer = buf;

        const filter = audioCtx.createBiquadFilter();
        filter.type = "bandpass";
        filter.frequency.value = 1800;
        filter.Q.value = 1.2;

        const gain = audioCtx.createGain();
        gain.gain.setValueAtTime(0.08, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + dur);

        noise.connect(filter);
        filter.connect(gain);
        gain.connect(audioCtx.destination);

        noise.start(now);
        setTimeout(() => vibeRing.classList.remove("animating"), dur * 1000);
      } 
      else if (type === "speak") {
        // Natural speech inflections (short paired tones)
        const notes = [190, 160];
        notes.forEach((freq, i) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          osc.type = "triangle";
          osc.frequency.setValueAtTime(freq, now + i * 0.16);
          gain.gain.setValueAtTime(0.2, now + i * 0.16);
          gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.16 + 0.14);
          osc.connect(gain);
          gain.connect(audioCtx.destination);
          osc.start(now + i * 0.16);
          osc.stop(now + i * 0.16 + 0.14);
        });
        setTimeout(() => vibeRing.classList.remove("animating"), 400);
      } 
      else if (type === "call") {
        // Loud, resonant calling interval ("Yoo-hoo" tone: A4 -> F4)
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = "sawtooth";
        osc.frequency.setValueAtTime(440, now);
        osc.frequency.setValueAtTime(350, now + 0.3);
        
        const filter = audioCtx.createBiquadFilter();
        filter.type = "lowpass";
        filter.frequency.value = 1000;

        gain.gain.setValueAtTime(0.25, now);
        gain.gain.linearRampToValueAtTime(0.25, now + 0.5);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.7);

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

        osc.start(now);
        osc.stop(now + 0.7);
        setTimeout(() => vibeRing.classList.remove("animating"), 700);
      } 
      else if (type === "sing") {
        // Musical triad melody: C5 -> E5 -> G5
        const melody = [523.25, 659.25, 783.99];
        melody.forEach((freq, i) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          osc.type = "sine";
          osc.frequency.setValueAtTime(freq, now + i * 0.22);
          gain.gain.setValueAtTime(0.22, now + i * 0.22);
          gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.22 + 0.3);
          osc.connect(gain);
          gain.connect(audioCtx.destination);
          osc.start(now + i * 0.22);
          osc.stop(now + i * 0.22 + 0.3);
        });
        setTimeout(() => vibeRing.classList.remove("animating"), 800);
      } 
      else if (type === "play") {
        // Expressive vocal glissando/slide (siren up & down)
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = "sine";
        osc.frequency.setValueAtTime(300, now);
        osc.frequency.exponentialRampToValueAtTime(800, now + 0.3);
        osc.frequency.exponentialRampToValueAtTime(260, now + 0.6);
        osc.frequency.exponentialRampToValueAtTime(500, now + 0.8);

        gain.gain.setValueAtTime(0.2, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.85);

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

        osc.start(now);
        osc.stop(now + 0.85);
        setTimeout(() => vibeRing.classList.remove("animating"), 850);
      }
    }

    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        const idx = parseInt(tab.getAttribute("data-index"), 10);
        renderVoice(idx);
      });
    });

    listenBtn.addEventListener("click", playSoundEffect);

    // Initial render
    renderVoice(0);
  </script>
</body>
</html>

What happens when your friend is all the way across the field, or when you want to make a melody?

Your **calling voice** is loud and clear so you can shout across a playground: *“Hey, catch the ball!”*

Your **singing voice** goes up and down on high and low pitches to make musical tunes.

<!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 Five Voices</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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .stage {
    width: 100%;
    max-width: 480px;
    height: 180px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .avatar {
    font-size: 54px;
    transition: transform 0.3s ease;
    z-index: 2;
  }

  .wave-box {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .wave-svg {
    width: 90%;
    height: 70px;
    overflow: visible;
  }

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

  .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 480px;
    margin-top: 10px;
  }

  .v-btn {
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
  }

  .v-btn .icon { font-size: 22px; }
  .v-btn .name {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
  }

  .v-btn.active {
    border-color: #06b6d4;
    background: #ecfeff;
  }
  .v-btn.active .name { color: #0891b2; }

  .play-bar {
    width: 100%;
    max-width: 480px;
    margin-top: 10px;
  }

  .action-btn {
    width: 100%;
    background: #f59e0b;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  }

  .action-btn:active {
    opacity: 0.9;
  }

  @media (max-width: 380px) {
    .v-btn .name { font-size: 11px; }
    .v-btn .icon { font-size: 18px; }
    .stage { height: 160px; }
    .avatar { font-size: 44px; }
  }
</style>
</head>
<body>

  <div class="stage">
    <div class="avatar" id="avatar">🤫</div>
    <div class="wave-box">
      <svg class="wave-svg" viewBox="0 0 300 80">
        <path id="wave" class="wave-path" stroke="#06b6d4" d="M 10 40 Q 75 40, 150 40 T 290 40" />
      </svg>
    </div>
  </div>

  <div class="grid">
    <button class="v-btn active" onclick="selectVoice(0)">
      <span class="icon">🤫</span>
      <span class="name">Whisper</span>
    </button>
    <button class="v-btn" onclick="selectVoice(1)">
      <span class="icon">🗣</span>
      <span class="name">Speak</span>
    </button>
    <button class="v-btn" onclick="selectVoice(2)">
      <span class="icon">📢</span>
      <span class="name">Call</span>
    </button>
    <button class="v-btn" onclick="selectVoice(3)">
      <span class="icon">🎵</span>
      <span class="name">Sing</span>
    </button>
    <button class="v-btn" onclick="selectVoice(4)">
      <span class="icon">💭</span>
      <span class="name">Think</span>
    </button>
  </div>

  <div class="play-bar">
    <button class="action-btn" onclick="triggerAudio()">
      <span>🔊</span> Hear Voice
    </button>
  </div>

<script>
  const voices = [
    {
      emoji: '🤫',
      color: '#94a3b8',
      path: 'M 10 40 Q 45 37, 80 40 T 150 40 T 220 40 T 290 40',
      strokeDash: '4,4',
      sound: (ctx) => {
        const buf = ctx.createBuffer(1, ctx.sampleRate * 0.4, ctx.sampleRate);
        const data = buf.getChannelData(0);
        for (let i = 0; i < buf.length; i++) data[i] = (Math.random() * 2 - 1) * 0.15;
        const src = ctx.createBufferSource();
        src.buffer = buf;
        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        filter.frequency.value = 1800;
        const gain = ctx.createGain();
        gain.gain.setValueAtTime(0.3, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
        src.connect(filter);
        filter.connect(gain);
        gain.connect(ctx.destination);
        src.start();
      }
    },
    {
      emoji: '🗣',
      color: '#06b6d4',
      path: 'M 10 40 Q 50 25, 90 40 T 170 40 T 250 40 T 290 40',
      strokeDash: '0',
      sound: (ctx) => {
        [170, 210, 140].forEach((freq, idx) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'triangle';
          osc.frequency.value = freq;
          osc.connect(gain);
          gain.connect(ctx.destination);
          const t = ctx.currentTime + idx * 0.12;
          gain.gain.setValueAtTime(0.2, t);
          gain.gain.exponentialRampToValueAtTime(0.001, t + 0.11);
          osc.start(t);
          osc.stop(t + 0.12);
        });
      }
    },
    {
      emoji: '📢',
      color: '#f59e0b',
      path: 'M 10 40 Q 45 5, 80 40 T 150 5 T 220 75 T 290 40',
      strokeDash: '0',
      sound: (ctx) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(330, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.4);
        gain.gain.setValueAtTime(0.25, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.5);
      }
    },
    {
      emoji: '🎵',
      color: '#8b5cf6',
      path: 'M 10 40 Q 45 10, 80 40 T 150 40 T 220 10 T 290 40',
      strokeDash: '0',
      sound: (ctx) => {
        [392, 440, 523.25].forEach((freq, idx) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.value = freq;
          osc.connect(gain);
          gain.connect(ctx.destination);
          const t = ctx.currentTime + idx * 0.15;
          gain.gain.setValueAtTime(0.22, t);
          gain.gain.exponentialRampToValueAtTime(0.001, t + 0.25);
          osc.start(t);
          osc.stop(t + 0.25);
        });
      }
    },
    {
      emoji: '💭',
      color: '#cbd5e1',
      path: 'M 10 40 Q 75 40, 150 40 T 290 40',
      strokeDash: '8,8',
      sound: (ctx) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.value = 587.33;
        gain.gain.setValueAtTime(0.04, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.2);
      }
    }
  ];

  let currentIdx = 0;
  let audioCtx = null;

  function selectVoice(idx) {
    currentIdx = idx;
    const btns = document.querySelectorAll('.v-btn');
    btns.forEach((b, i) => b.classList.toggle('active', i === idx));

    const v = voices[idx];
    document.getElementById('avatar').textContent = v.emoji;
    const wave = document.getElementById('wave');
    wave.setAttribute('d', v.path);
    wave.setAttribute('stroke', v.color);
    wave.style.strokeDasharray = v.strokeDash;
  }

  function triggerAudio() {
    if (!audioCtx) {
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }
    voices[currentIdx].sound(audioCtx);

    const avatar = document.getElementById('avatar');
    avatar.style.transform = 'scale(1.18)';
    setTimeout(() => avatar.style.transform = 'scale(1)', 300);
  }

  selectVoice(0);
</script>
</body>
</html>

Can you still sing a song even if your mouth stays completely shut?

Your **inner voice** is the voice inside your head that only you can hear.

Musicians use their inner voice to practice a song silently before they sing out loud.

<!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 5 Voices</title>
<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: space-between;
    min-height: 100%;
  }

  .stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }

  .visual-box {
    width: 100%;
    height: 140px;
    background: #fdf2f8;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }

  .voice-emoji {
    font-size: 44px;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
  }

  .wave-canvas {
    width: 100%;
    height: 60px;
  }

  .meter-bar {
    width: 80%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
  }

  .meter-fill {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 480px;
    margin-top: 8px;
  }

  .voice-btn {
    background: #ffffff;
    border: 2px solid #f3f4f6;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .voice-btn .btn-icon {
    font-size: 20px;
  }

  .voice-btn.active {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
  }

  .play-btn {
    margin-top: 4px;
    background: #8b5cf6;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
  }

  .play-btn:active {
    opacity: 0.85;
  }
</style>
</head>
<body>

  <div class="stage">
    <div class="visual-box" id="visBox">
      <div class="voice-emoji" id="bigEmoji">🤫</div>
      <canvas class="wave-canvas" id="waveCanvas"></canvas>
    </div>
    <div class="meter-bar">
      <div class="meter-fill" id="meterFill"></div>
    </div>
    <button class="play-btn" id="playBtn" onclick="triggerAudio()">
      <span>▶</span> <span>Listen</span>
    </button>
  </div>

  <div class="nav-grid">
    <button class="voice-btn active" onclick="selectVoice(0)">
      <span class="btn-icon">🤫</span>
      <span>Whisper</span>
    </button>
    <button class="voice-btn" onclick="selectVoice(1)">
      <span class="btn-icon">🗣️</span>
      <span>Speak</span>
    </button>
    <button class="voice-btn" onclick="selectVoice(2)">
      <span class="btn-icon">🎵</span>
      <span>Sing</span>
    </button>
    <button class="voice-btn" onclick="selectVoice(3)">
      <span class="btn-icon">📢</span>
      <span>Shout</span>
    </button>
    <button class="voice-btn" onclick="selectVoice(4)">
      <span class="btn-icon">💭</span>
      <span>Inner</span>
    </button>
  </div>

<script>
  const voices = [
    { name: 'Whisper', emoji: '🤫', vol: 15, bg: '#fdf2f8', freq: 220, type: 'noise', amp: 4, speed: 0.04, style: 'dashed' },
    { name: 'Speak', emoji: '🗣️', vol: 45, bg: '#fdf4ff', freq: 260, type: 'triangle', amp: 12, speed: 0.08, style: 'solid' },
    { name: 'Sing', emoji: '🎵', vol: 70, bg: '#f5f3ff', freq: 440, type: 'sine', amp: 22, speed: 0.05, style: 'sine' },
    { name: 'Shout', emoji: '📢', vol: 100, bg: '#fff1f2', freq: 520, type: 'sawtooth', amp: 32, speed: 0.12, style: 'spiky' },
    { name: 'Inner', emoji: '💭', vol: 5, bg: '#f0fdf4', freq: 587, type: 'chime', amp: 2, speed: 0.02, style: 'glow' }
  ];

  let current = 0;
  let phase = 0;
  const canvas = document.getElementById('waveCanvas');
  const ctx = canvas.getContext('2d');

  function resizeCanvas() {
    canvas.width = canvas.offsetWidth * window.devicePixelRatio || 300;
    canvas.height = canvas.offsetHeight * window.devicePixelRatio || 60;
  }
  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();

  function selectVoice(idx) {
    current = idx;
    const v = voices[idx];
    document.getElementById('bigEmoji').textContent = v.emoji;
    document.getElementById('visBox').style.background = v.bg;
    document.getElementById('meterFill').style.width = v.vol + '%';

    const btns = document.querySelectorAll('.voice-btn');
    btns.forEach((b, i) => {
      b.classList.toggle('active', i === idx);
    });
  }

  function triggerAudio() {
    const v = voices[current];
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    if (!AudioContext) return;
    const ac = new AudioContext();

    if (v.type === 'noise') {
      const bufferSize = ac.sampleRate * 0.4;
      const buffer = ac.createBuffer(1, bufferSize, ac.sampleRate);
      const output = buffer.getChannelData(0);
      for (let i = 0; i < bufferSize; i++) {
        output[i] = (Math.random() * 2 - 1) * 0.15;
      }
      const whiteNoise = ac.createBufferSource();
      whiteNoise.buffer = buffer;
      const filter = ac.createBiquadFilter();
      filter.type = 'bandpass';
      filter.frequency.value = 1200;
      whiteNoise.connect(filter);
      filter.connect(ac.destination);
      whiteNoise.start();
    } else if (v.type === 'sine') {
      const notes = [392, 440, 523.25];
      notes.forEach((freq, i) => {
        const osc = ac.createOscillator();
        const gain = ac.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ac.currentTime + i * 0.12);
        gain.gain.setValueAtTime(0.2, ac.currentTime + i * 0.12);
        gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + i * 0.12 + 0.35);
        osc.connect(gain);
        gain.connect(ac.destination);
        osc.start(ac.currentTime + i * 0.12);
        osc.stop(ac.currentTime + i * 0.12 + 0.35);
      });
    } else if (v.type === 'chime') {
      const osc = ac.createOscillator();
      const gain = ac.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(880, ac.currentTime);
      gain.gain.setValueAtTime(0.08, ac.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.6);
      osc.connect(gain);
      gain.connect(ac.destination);
      osc.start();
      osc.stop(ac.currentTime + 0.6);
    } else {
      const osc = ac.createOscillator();
      const gain = ac.createGain();
      osc.type = v.type;
      osc.frequency.setValueAtTime(v.freq, ac.currentTime);
      const vol = v.type === 'sawtooth' ? 0.25 : 0.2;
      gain.gain.setValueAtTime(vol, ac.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.35);
      osc.connect(gain);
      gain.connect(ac.destination);
      osc.start();
      osc.stop(ac.currentTime + 0.35);
    }
  }

  function draw() {
    const v = voices[current];
    const w = canvas.width;
    const h = canvas.height;
    const cy = h / 2;

    ctx.clearRect(0, 0, w, h);
    ctx.lineWidth = 3 * (window.devicePixelRatio || 1);
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#8b5cf6';

    if (v.style === 'dashed') {
      ctx.setLineDash([6, 6]);
    } else {
      ctx.setLineDash([]);
    }

    ctx.beginPath();
    for (let x = 0; x < w; x += 3) {
      let y = cy;
      if (v.style === 'spiky') {
        y += Math.sin(x * 0.08 + phase) > 0 ? v.amp : -v.amp;
      } else if (v.style === 'glow') {
        y += Math.sin(x * 0.02 + phase) * v.amp;
      } else {
        y += Math.sin(x * 0.05 + phase) * v.amp;
      }

      if (x === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();

    phase += v.speed;
    requestAnimationFrame(draw);
  }

  selectVoice(0);
  draw();
</script>
</body>
</html>

Try singing your favorite rhyme out loud, then switch straight to your **inner voice** to finish the song silently!

arts

What Are the Five Voices We Use?. Name the five voices we use in music: speaking, whispering, calling, singing, and inner voice.

The Four Voices | Music Arts Toolkit

Foundations: Music Literacy - Five Voices and Timbre (Grade 1 TEKS §117.106(b)(1)(A))

Vocal Sounds and Exploring Voices | KS1 Primary Music

Instruction for 1st graders should emphasize kinesthetic and echo-based pedagogical strategies (e.g., placing fingers on the larynx to feel vocal cord vibrations during speaking vs. whispering, touching ears/head to represent inner voice). Regular call-and-response echo songs (such as 'This is My Speaking Voice') provide immediate opportunities to shift between all five vocal modes in a safe and engaging structure.

What Are the Five Voices We Use?

Speaking and Whispering

Calling and Singing