speechSynthesis voice race — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The voice-list race, live</h1>
    <p class="pg-sub">
      Your browser ships a free text-to-speech engine via <code>speechSynthesis</code>. Its voice
      list loads <strong>asynchronously</strong> — call <code>getVoices()</code> before it's ready
      and you get an empty (or short) array. Watch it happen below, then use the same engine to
      actually speak something.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Prove the race</div>
      <p class="hint">
        Click both buttons right away. "Check immediately" reads <code>getVoices()</code> the naive
        way — synchronously, no waiting. "Wait for ready" uses the <code>voiceschanged</code>-backed
        helper from the post. On a page that hasn't spoken yet, the two counts can disagree.
      </p>
      <div class="race-row">
        <button class="btn" id="checkNow">Check immediately</button>
        <button class="btn primary" id="checkReady">Wait for ready</button>
        <span class="count-box">immediate: <span class="num" id="immCount">—</span></span>
        <span class="count-box">ready: <span class="num" id="readyCount">—</span></span>
      </div>
      <div class="log" id="raceLog" style="margin-top:12px; max-height: 130px;"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Speak something</div>
      <p class="hint">The voice dropdown only populates once the safe, promise-based load resolves — so it's never empty by the time you can pick from it.</p>
      <textarea id="text">Every browser ships a free text-to-speech engine. Most bugs in it come from asking too early.</textarea>
      <div class="presets" style="margin-top:10px">
        <button class="btn sm" data-preset="0">Short line</button>
        <button class="btn sm" data-preset="1">Longer paragraph</button>
        <button class="btn sm" data-preset="2">The bug, in one sentence</button>
      </div>

<div style="margin-top:14px">
        <select id="voice"><option>loading voices…</option></select>
      </div>

<div class="slider-row">
        <label for="rate">Rate</label><input type="range" id="rate" min="0.5" max="2" step="0.1" value="1" /><span class="val" id="rateVal">1.0</span>
      </div>
      <div class="slider-row">
        <label for="pitch">Pitch</label><input type="range" id="pitch" min="0" max="2" step="0.1" value="1" /><span class="val" id="pitchVal">1.0</span>
      </div>
      <div class="slider-row">
        <label for="volume">Volume</label><input type="range" id="volume" min="0" max="1" step="0.05" value="1" /><span class="val" id="volumeVal">1.0</span>
      </div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn good" id="speak">▶️ Speak</button>
        <button class="btn bad" id="stop">⏹ Stop</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Result</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — nothing spoken yet.</span>
      </div>
      <p class="hint" id="hint">The status line narrates <code>onstart</code>/<code>onend</code>/<code>onerror</code> from the utterance in real time.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.