index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hearlark — Private Audio Transcription</title>
<meta name="description" content="Free private audio and video transcription that runs in your browser with Whisper. No upload, no sign-up. Export TXT, SRT subtitles, VTT and JSON. 99 languages, translate to English. By CyberMax.">
<meta name="keywords" content="speech to text, audio transcription, whisper, subtitles, srt generator, vtt, transcribe mp3, transcribe video, private transcription, offline, webgpu">
<meta property="og:title" content="Hearlark — private transcription in your browser">
<meta property="og:description" content="Whisper speech-to-text that never uploads your audio. TXT, SRT, VTT and JSON export. Free, by CyberMax.">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"Hearlark","applicationCategory":"MultimediaApplication","operatingSystem":"Any (modern browser)","description":"Private speech-to-text in the browser with OpenAI Whisper via transformers.js. Audio never leaves the device. Exports TXT, SRT, VTT and JSON.","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"author":{"@type":"Organization","name":"CyberMax"}}
</script>
<style>
:root{--bg:#f7f7f4;--card:#ffffff;--ink:#1c1d1f;--muted:#5f6368;--line:#e2e2dc;--accent:#2f6b4f;--accent-ink:#ffffff;--soft:#e9f2ec;--warn:#8a4b00;--code:#f1f1ec}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#141516;--card:#1d1f21;--ink:#ececea;--muted:#a3a7ab;--line:#303336;--accent:#6fbf94;--accent-ink:#0f1a14;--soft:#1f2d25;--warn:#f0b35a;--code:#26292c}}
:root[data-theme="dark"]{--bg:#141516;--card:#1d1f21;--ink:#ececea;--muted:#a3a7ab;--line:#303336;--accent:#6fbf94;--accent-ink:#0f1a14;--soft:#1f2d25;--warn:#f0b35a;--code:#26292c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:860px;margin:0 auto;padding:28px 16px 48px}
h1{font-size:30px;margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.drop{border:2px dashed var(--line);border-radius:10px;padding:26px 14px;text-align:center;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--soft)}
.drop strong{display:block;font-size:17px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:14px}
label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
select,button{font:inherit;font-size:15px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 10px}
button{cursor:pointer}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;padding:9px 18px}
button:disabled{opacity:.5;cursor:not-allowed}
.status{font-size:14px;color:var(--muted);min-height:22px;margin-top:12px}
.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
#segments{max-height:420px;overflow:auto;margin:0;padding:0;list-style:none}
#segments li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
#segments time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:56px;font-size:14px;padding-top:1px}
.partial{color:var(--muted);font-style:italic;margin-top:8px}
.exports{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.note{font-size:14px;color:var(--muted)}
.priv{background:var(--soft);border-radius:8px;padding:10px 12px;font-size:14px}
a{color:var(--accent)}
footer{font-size:13px;color:var(--muted);margin-top:28px}
.more a{display:inline-block;margin:0 12px 6px 0}
.hidden{display:none}
@media (max-width:520px){h1{font-size:25px}.row>label{flex:1 1 45%}}
</style>
<!-- cm:studio-meta --><meta property="og:image" content="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/cover.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/cover.png"><link rel="icon" type="image/png" href="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/icon.png"><!-- /cm:studio-meta -->
</head>
<body><!-- cybermax-offer:start --><div style="max-width:960px;margin:8px auto;padding:8px 14px;border:1px solid rgba(127,127,127,.35);border-radius:10px;font:14px/1.5 system-ui,sans-serif"><b>Turn a podcast into captioned shorts:</b> <a href="https://data.cybermaxtools.com/buy/st-clipwhit-pro-monthly?s=sp-hushscribe" target="_blank" rel="noopener" style="color:inherit;font-weight:700">Clipwhit Pro</a> ($12/month)</div><!-- cybermax-offer:end -->
<main>
  <h1>Hearlark</h1>
  <p class="sub">Private speech-to-text. Whisper runs <b>inside your browser</b>: your audio is never uploaded. Free, no sign-up.</p>

  <section class="card">
    <div id="drop" class="drop" tabindex="0" role="button" aria-label="Choose an audio or video file">
      <strong>Drop an audio or video file here, or click to choose</strong>
      <span class="note">MP3, WAV, M4A, OGG, WEBM, MP4… anything your browser can play.</span>
      <input id="file" type="file" accept="audio/*,video/*" class="hidden">
    </div>
    <div class="row">
      <button id="rec" type="button">● Record from microphone</button>
      <span id="fileinfo" class="note"></span>
    </div>
    <div class="row">
      <label>Model
        <select id="model">
          <option value="onnx-community/whisper-tiny">Tiny: fastest (~40 MB download)</option>
          <option value="onnx-community/whisper-base" selected>Base: balanced (~77 MB)</option>
          <option value="onnx-community/whisper-small">Small: most accurate (~250 MB)</option>
        </select>
      </label>
      <label>Language
        <select id="language">
          <option value="">Auto-detect</option>
          <option value="en">English</option><option value="es">Spanish</option><option value="fr">French</option>
          <option value="de">German</option><option value="it">Italian</option><option value="pt">Portuguese</option>
          <option value="nl">Dutch</option><option value="pl">Polish</option><option value="tr">Turkish</option>
          <option value="ru">Russian</option><option value="uk">Ukrainian</option><option value="ar">Arabic</option>
          <option value="hi">Hindi</option><option value="bn">Bengali</option><option value="ur">Urdu</option>
          <option value="zh">Chinese</option><option value="ja">Japanese</option><option value="ko">Korean</option>
          <option value="vi">Vietnamese</option><option value="id">Indonesian</option><option value="tl">Tagalog</option>
          <option value="sv">Swedish</option><option value="he">Hebrew</option><option value="el">Greek</option>
        </select>
      </label>
      <label>Task
        <select id="task">
          <option value="transcribe">Transcribe</option>
          <option value="translate">Translate to English</option>
        </select>
      </label>
      <label>Engine
        <select id="device">
          <option value="auto">Auto (GPU if available)</option>
          <option value="webgpu">WebGPU (GPU)</option>
          <option value="wasm">WASM (CPU)</option>
        </select>
      </label>
      <button id="go" class="primary" type="button" disabled>Transcribe</button>
    </div>
    <div id="status" class="status" aria-live="polite">Choose a file to start. The model downloads once and is then cached by your browser.</div>
    <div class="bar"><i id="bar"></i></div>
  </section>

  <section id="result" class="card hidden">
    <ol id="segments"></ol>
    <div id="partial" class="partial"></div>
    <div class="exports">
      <button data-fmt="txt" type="button">Download TXT</button>
      <button data-fmt="srt" type="button">Download SRT subtitles</button>
      <button data-fmt="vtt" type="button">Download VTT</button>
      <button data-fmt="json" type="button">Download JSON</button>
      <button id="copy" type="button">Copy text</button>
    </div>
  </section>

  <section class="card">
    <p class="priv"><b>Why it's private:</b> the page downloads the open Whisper model from Hugging Face once, then does all the listening on your own device. The audio file is decoded in your browser and never sent to any server, including ours. Close the tab and it's gone.</p>
    <p class="note">Tips: Tiny handles clear speech fast; pick Small for accents, noisy rooms or non-English audio. WebGPU (recent Chrome/Edge) is usually much faster than CPU; long files on CPU take a while, so keep the tab open. Accuracy varies with audio quality, so check names and numbers before publishing.</p>
  </section>

  <section class="card">
    <b>Recorded a meeting?</b> <a href="https://hearlark.cybermaxtools.com/?utm_source=hearlark-space" target="_blank" rel="noopener">Hearlark Pro</a> turns it into notes on your own device: summary, decisions, action items with owners and due dates, speaker names and a Word file. Free up to 30 minutes; Pro $10/month.
  </section>

  <section class="card more">
    <b>More free tools from CyberMax</b><br>
    <a href="https://huggingface.co/spaces/CyberMax-tools/cybermax" target="_blank" rel="noopener">All CyberMax tools</a>
    <a href="https://huggingface.co/spaces/CyberMax-tools/tech-reads-extracted" target="_blank" rel="noopener">Article text extractor demo</a>
    <a href="https://huggingface.co/spaces/CyberMax-tools/cybermax-dev-kit" target="_blank" rel="noopener">MCP &amp; API kit for AI agents</a>
    <p class="note">Need transcripts, text or data from hundreds of web pages instead? CyberMax's pay-per-result web tools run on the <a href="https://apify.com/cybermax" target="_blank" rel="noopener">Apify Store</a>, callable from Make, Zapier, n8n, Python or any AI agent.</p>
  </section>

  <footer>
    Hearlark © 2026 CyberMax. Runs OpenAI's Whisper models (Apache-2.0) converted to ONNX by the <a href="https://huggingface.co/onnx-community" target="_blank" rel="noopener">onnx-community</a>, via <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noopener">transformers.js</a> (Apache-2.0). Not affiliated with OpenAI or Hugging Face.
  </footer>
</main>
<script type="module" src="./app.js"></script>
<!-- cm:hf-upgrade-foot --><div id="cm-hf-up" hidden style="max-width:980px;margin:24px auto 12px;padding:0 16px;text-align:center;font:13px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:#64748b">Free tool by <a href="https://huggingface.co/spaces/CyberMax-tools/cybermax" target="_blank" rel="noopener" style="color:inherit">CyberMax</a> · Need more? <a href="https://data.cybermaxtools.com/buy/st-clipwhit-pro-monthly?s=hf-space-hushscribe" target="_blank" rel="noopener" style="color:#0284c7;font-weight:600">Turn the recording into captioned shorts: Clipwhit Pro, $12/month &#8594;</a></div><script>(function(){if(/\.static\.hf\.space$/.test(location.hostname)){var d=document.getElementById("cm-hf-up");if(d)d.hidden=false}})()</script><!-- /cm:hf-upgrade-foot -->
<!-- cybermax-count:start --><script>(function(){try{var u="https://data.cybermaxtools.com/v?p="+encodeURIComponent(location.host+location.pathname)+"&r="+encodeURIComponent((document.referrer||"").split("/")[2]||"")+(function(){var q=new URLSearchParams(location.search),s=q.get("utm_source"),t=(q.get("s")||"").toLowerCase().replace(/[^a-z0-9-]/g,"-").slice(0,80);return s?"&us="+encodeURIComponent(s)+"&uc="+encodeURIComponent(q.get("utm_campaign")||""):t?"&us=s&uc="+encodeURIComponent(t):""})();navigator.sendBeacon?navigator.sendBeacon(u):(new Image).src=u}catch(e){}})()</script><!-- cybermax-count:end --></body>
</html>