SoundsRight

Hear any English text the way a native speaker would say it.
Select, click, listen — right where you're reading.

---

Screenshots

Phrase Widget	Dictionary Card	Popup Settings
Select a sentence and hear it spoken in a natural neural voice	Select a single word to see phonetics, definitions, and hear native pronunciation	Adjust speed, toggle auto-play

Features

Neural Voice Playback

Select any English text on any webpage — a floating widget appears instantly. Click play to hear it in a natural, human-like voice powered by Microsoft Edge Neural TTS (en-US-AvaNeural). No robotic speechSynthesis.

Dictionary Card

Select a single English word and get an inline dictionary card with IPA phonetics, part-of-speech badges, and definitions — powered by the Free Dictionary API. Click the play button to hear the native pronunciation.

Speed Control

Four speed presets: 0.5x, 0.75x, 1x, 1.25x. Change speed on the fly — the current setting is remembered across sessions.

Auto-play

Toggle auto-play from the popup or the widget's ⋮ menu. When enabled, selected text is read aloud automatically — no extra clicks needed.

Keyboard Shortcut

Press Alt+P to instantly read the current selection. Works without opening the widget first.

More Highlights

• Glassmorphism UI — Frosted-glass widget with backdrop blur that blends with any page
• Dark mode — Automatically follows system prefers-color-scheme
• Shadow DOM isolation — Widget styles never clash with the host page
• Progress bar — Visual playback progress for phrase selections
• Repeat — Replay cached audio without re-fetching
• Lightweight — Under 55 KB total, zero impact on page load
• Privacy-first — No accounts, no analytics, no data collection

How It Works

1. Select any English text on any webpage
2. A floating widget appears near your selection:
   • Phrase/sentence → Play · Repeat · Speed · More menu
   • Single word → Dictionary card with phonetics, definitions, and play
3. Click play — hear natural neural speech within ~1 second
4. Adjust speed or toggle auto-play from the ⋮ menu
5. Click elsewhere or press Esc — the widget fades out. Zero footprint.

Getting Started

Prerequisites

• Bun runtime
• Chrome 120+

Install dependencies

bun install

Deploy the TTS proxy (one-time)

The extension uses a Cloudflare Worker to proxy requests to Microsoft's Edge neural TTS service.

cd cloudflare-worker
npx wrangler deploy

Note the deployed URL, then create a .env file from the example:

cp .env.example .env

Edit .env with your deployed worker URL:

VITE_CF_WORKER_URL=https://soundsright-tts.<your-name>.workers.dev

Development

bun run dev

This opens Chrome with the extension loaded. Select text on any page to test.

Production build

bun run build

Load the unpacked extension from .output/chrome-mv3/ in chrome://extensions.

Package for distribution

bun run zip

Architecture

entrypoints/
  background.ts              # TTS fetch + cache, dictionary API proxy
  content/
    index.ts                 # Coordinator: selection detection, widget dispatch
    audio.ts                 # AudioContext singleton, play/stop/replay, progress
    settings.ts              # Speed + auto-play prefs via chrome.storage.local
    widget-phrase.ts         # Phrase widget: play/pause/repeat/speed/more menu
    widget-word.ts           # Dictionary card: word/phonetic/play/definitions
    style.css                # Widget styles (glassmorphism, dark mode, animations)
  popup/
    index.html / main.ts / style.css
utils/
  constants.ts               # CF Worker URL, voice, speed config
  messages.ts                # TypeScript message type definitions
  dictionary.ts              # Free Dictionary API client
  cache.ts                   # LRU audio cache
cloudflare-worker/
  worker.js                  # Edge TTS WebSocket proxy
  wrangler.toml

Data Flow

Content Script (select text)
  → browser.runtime.sendMessage({ type: "TTS_REQUEST" })
  → Background Service Worker
  → Cloudflare Worker (proxy)
  → Microsoft Edge TTS (WebSocket)
  → Audio buffer returned
  → Web Audio API playback in content script

Single word selected:
  → browser.runtime.sendMessage({ type: "DICT_REQUEST" })
  → Background Service Worker
  → Free Dictionary API (https://dictionaryapi.dev)
  → Dictionary card rendered in Shadow DOM

Tech Stack

Layer	Technology
Framework	WXT (Chrome extension framework)
Language	TypeScript (strict mode, noUncheckedIndexedAccess)
Runtime	Bun
TTS Engine	Microsoft Edge Neural TTS (en-US-AvaNeural)
TTS Proxy	Cloudflare Workers (free tier)
Dictionary	Free Dictionary API
Audio	Web Audio API + HTML Audio fallback
UI Isolation	Shadow DOM

License

MIT