AI Voice Input Button — Free Mic Button with Live Transcript Snippet

<div class="vib-wrap">
  <div class="vib-transcript" id="vibTranscript">
    <span class="vib-placeholder" id="vibPlaceholder">Tap the mic and start speaking…</span>
  </div>

  <button type="button" class="vib-mic" id="vibMic" aria-label="Start voice input">
    <span class="vib-ring" id="vibRing1"></span>
    <span class="vib-ring" id="vibRing2"></span>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vib-icon">
      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
      <line x1="12" y1="19" x2="12" y2="23"/>
      <line x1="8" y1="23" x2="16" y2="23"/>
    </svg>
  </button>

  <div class="vib-status" id="vibStatus">Tap to speak</div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0e17;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.vib-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:380px}
.vib-transcript{width:100%;min-height:88px;background:#111827;border:1px solid #1f2937;border-radius:14px;padding:16px;font-size:14.5px;line-height:1.6;color:#e5e7eb;display:flex;align-items:center}
.vib-placeholder{color:#5b6478}
.vib-transcript.filled{align-items:flex-start}

.vib-mic{position:relative;width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(160deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(99,102,241,.4);transition:transform .15s,box-shadow .3s}
.vib-mic:hover{transform:scale(1.04)}
.vib-mic:active{transform:scale(.97)}
.vib-mic.listening{background:linear-gradient(160deg,#f87171,#dc2626);box-shadow:0 10px 30px rgba(248,113,113,.45)}
.vib-icon{width:28px;height:28px;color:#fff;position:relative;z-index:2}

.vib-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(99,102,241,.5);opacity:0;pointer-events:none}
.vib-mic.listening .vib-ring{animation:vibPulse 1.6s ease-out infinite;border-color:rgba(248,113,113,.55)}
.vib-mic.listening #vibRing2{animation-delay:.5s}
@keyframes vibPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

.vib-status{font-size:12.5px;color:#7c8aa5;min-height:16px}
.vib-status.listening{color:#f87171;font-weight:700}

.vib-bars{display:inline-flex;align-items:center;gap:2px;height:16px;vertical-align:middle;margin-right:2px}
.vib-bar{width:3px;background:#818cf8;border-radius:2px;animation:vibBar 1s ease-in-out infinite}
@keyframes vibBar{0%,100%{height:4px}50%{height:16px}}

var micBtn = document.getElementById('vibMic');
var transcriptEl = document.getElementById('vibTranscript');
var placeholderEl = document.getElementById('vibPlaceholder');
var statusEl = document.getElementById('vibStatus');

var listening = false;
var recognition = null;
var SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition;

var SIM_TRANSCRIPT = "Show me the top three AI models by cost, and explain the difference between the balanced and advanced tiers.";

function setListening(on) {
  listening = on;
  micBtn.classList.toggle('listening', on);
  statusEl.textContent = on ? 'Listening…' : 'Tap to speak';
  statusEl.classList.toggle('listening', on);
  micBtn.setAttribute('aria-label', on ? 'Stop voice input' : 'Start voice input');
}

function setTranscript(text) {
  if (!text) {
    transcriptEl.innerHTML = '';
    transcriptEl.appendChild(placeholderEl);
    transcriptEl.classList.remove('filled');
    return;
  }
  transcriptEl.classList.add('filled');
  transcriptEl.textContent = text;
}

// --- Simulated fallback: used when SpeechRecognition is unavailable or access is denied
// (very common inside sandboxed iframes), so the demo always looks alive.
var simTimer = null;
function runSimulation() {
  setListening(true);
  setTranscript('');
  var i = 0;
  clearInterval(simTimer);
  simTimer = setInterval(function () {
    i += Math.max(1, Math.floor(Math.random() * 3));
    setTranscript(SIM_TRANSCRIPT.slice(0, i));
    if (i >= SIM_TRANSCRIPT.length) {
      clearInterval(simTimer);
      setListening(false);
      statusEl.textContent = 'Heard you — simulated demo (mic unavailable in this sandbox)';
    }
  }, 45);
}

function stopSimulation() {
  clearInterval(simTimer);
  setListening(false);
}

// --- Real SpeechRecognition path
function startRealRecognition() {
  recognition = new SpeechRecognitionCtor();
  recognition.continuous = false;
  recognition.interimResults = true;
  recognition.lang = 'en-US';

  recognition.onstart = function () { setListening(true); setTranscript(''); };
  recognition.onresult = function (e) {
    var text = '';
    for (var i = 0; i < e.results.length; i++) text += e.results[i][0].transcript;
    setTranscript(text);
  };
  recognition.onerror = function () {
    // Permission denied or blocked (typical in a sandboxed iframe) — fall back gracefully.
    setListening(false);
    runSimulation();
  };
  recognition.onend = function () { setListening(false); };

  try {
    recognition.start();
  } catch (err) {
    runSimulation();
  }
}

micBtn.addEventListener('click', function () {
  if (listening) {
    if (recognition) recognition.stop();
    stopSimulation();
    return;
  }
  if (SpeechRecognitionCtor) {
    startRealRecognition();
  } else {
    runSimulation();
  }
});