Bookmarklets

Read Aloud (TTS)

The Read Aloud (TTS) Bookmarklet transforms any webpage into an audio experience.

With one click, this bookmarklet reads the page content aloud using the browser's built-in speech synthesis — no extensions or APIs required.

Whether you're multitasking, easing eye strain, or prefer auditory learning, this tool makes web content accessible through natural text-to-speech technology.

javascript:!function(){try{if(window._ttsPanel)return window._ttsPanel.remove(),void(window._ttsPanel=null);const e=window.speechSynthesis;let n=!1,o=!1,r=null,i=[];const s=document.createElement("div");s.id="tts-panel",window._ttsPanel=s,s.style.cssText="position:fixed;bottom:20px;right:20px;width:360px;background:#1a1a2e;color:#e0e0e0;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:999999;font-family:system-ui,-apple-system,sans-serif;overflow:hidden;";const a=function(){i=e.getVoices();const t=s.querySelector("#tts-voice");t.innerHTML="";[...i.filter((t=>t.lang.startsWith("en"))),...i.filter((t=>!t.lang.startsWith("en")))].forEach(((e,n)=>{const o=document.createElement("option");o.value=n,o.textContent=e.name+" ("+e.lang+")",t.appendChild(o)}))};s.innerHTML='\n      <div style="padding:16px 16px 12px;background:linear-gradient(135deg,#16213e,#0f3460);display:flex;justify-content:space-between;align-items:center;border-radius:16px 16px 0 0;">\n        <span style="font-size:15px;font-weight:600;">🔊 Read Aloud</span>\n        <button id="tts-close" style="background:none;border:none;color:#aaa;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;">✕</button>\n      </div>\n      <div style="padding:16px;">\n        <div style="margin-bottom:12px;">\n          <label style="font-size:11px;color:#888;text-transform:uppercase;letter-spacing:0.5px;">Voice</label>\n          <select id="tts-voice" style="width:100%;margin-top:4px;padding:8px 10px;border-radius:8px;border:1px solid #333;background:#16213e;color:#e0e0e0;font-size:13px;"></select>\n        </div>\n        <div style="margin-bottom:12px;">\n          <label style="font-size:11px;color:#888;text-transform:uppercase;letter-spacing:0.5px;">Speed: <span id="tts-rate-val">1.0</span>x</label>\n          <input id="tts-rate" type="range" min="0.5" max="3" step="0.1" value="1" style="width:100%;margin-top:4px;accent-color:#e94560;">\n        </div>\n        <div style="margin-bottom:12px;">\n          <label style="font-size:11px;color:#888;text-transform:uppercase;letter-spacing:0.5px;">Pitch: <span id="tts-pitch-val">1.0</span></label>\n          <input id="tts-pitch" type="range" min="0.5" max="2" step="0.1" value="1" style="width:100%;margin-top:4px;accent-color:#e94560;">\n        </div>\n        <div style="display:flex;gap:8px;margin-bottom:12px;">\n          <button id="tts-play" style="flex:1;padding:10px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:14px;font-weight:600;cursor:pointer;">▶ Play</button>\n          <button id="tts-pause" style="flex:1;padding:10px;border:none;border-radius:8px;background:#333;color:#e0e0e0;font-size:14px;cursor:pointer;" disabled>⏸ Pause</button>\n          <button id="tts-stop" style="flex:1;padding:10px;border:none;border-radius:8px;background:#333;color:#e0e0e0;font-size:14px;cursor:pointer;" disabled>⏹ Stop</button>\n        </div>\n        <div id="tts-progress" style="width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden;margin-bottom:8px;">\n          <div id="tts-bar" style="width:0%;height:100%;background:#e94560;transition:width 0.3s;"></div>\n        </div>\n        <div id="tts-status" style="font-size:12px;color:#888;text-align:center;">Ready to read</div>\n      </div>',document.body.appendChild(s),a(),void 0!==e.onvoiceschanged&&(e.onvoiceschanged=a);const d=s.querySelector("#tts-rate"),l=s.querySelector("#tts-pitch");function t(){s.querySelector("#tts-play").disabled=n&&!o,s.querySelector("#tts-pause").disabled=!n&&!o,s.querySelector("#tts-stop").disabled=!n&&!o,s.querySelector("#tts-play").textContent=o?"▶ Resume":"▶ Play"}d.addEventListener("input",(function(){s.querySelector("#tts-rate-val").textContent=this.value})),l.addEventListener("input",(function(){s.querySelector("#tts-pitch-val").textContent=this.value})),s.querySelector("#tts-close").addEventListener("click",(function(){e.cancel(),s.remove(),window._ttsPanel=null})),s.querySelector("#tts-play").addEventListener("click",(function(){if(o)return e.resume(),o=!1,n=!0,void t();e.cancel();const a=function(){const t=window.getSelection().toString().trim();if(t)return t;const e=document.querySelector('article,main,[role="main"],.content,.post-content,.entry-content');return e?e.innerText:document.body.innerText}();if(!a)return void(s.querySelector("#tts-status").textContent="No text found");const c=parseInt(s.querySelector("#tts-voice").value)||0;r=new SpeechSynthesisUtterance(a),i[c]&&(r.voice=i[c]),r.rate=parseFloat(d.value),r.pitch=parseFloat(l.value),r.onend=function(){n=!1,o=!1,t(),s.querySelector("#tts-bar").style.width="100%",s.querySelector("#tts-status").textContent="Finished"},r.onerror=function(){n=!1,o=!1,t(),s.querySelector("#tts-status").textContent="Error occurred"},e.speak(r),n=!0,o=!1,s.querySelector("#tts-status").textContent="Reading...",s.querySelector("#tts-bar").style.width="0%",t()})),s.querySelector("#tts-pause").addEventListener("click",(function(){n&&!o&&(e.pause(),o=!0,n=!1,t())})),s.querySelector("#tts-stop").addEventListener("click",(function(){e.cancel(),n=!1,o=!1,t(),s.querySelector("#tts-bar").style.width="0%",s.querySelector("#tts-status").textContent="Stopped"}))}catch(c){alert("Error: "+c.message)}}();
Drag me to bookmark bar: 👉🏻 Read Aloud (TTS)

Features

Why Use Read Aloud (TTS)?

This bookmarklet is perfect for:

How to Use

  1. Drag the button above to your bookmarks bar
  2. Navigate to any webpage with text content
  3. Click the bookmarklet — the TTS panel appears
  4. Select your preferred voice from the dropdown
  5. Adjust speed and pitch using the sliders
  6. Press ▶ Play to start reading, or select specific text first to read only that portion
  7. Use ⏸ Pause to pause and ⏹ Stop to stop playback
  8. Click ✕ to close the panel when done

Tips