Spoken
Add to Chrome
← All posts

A voice you can see: designing Spoken's orb

How Spoken went from a text box and a Speak button to an orb that is the play button, shows the engine's state and follows you onto the page.

Many read-aloud tools we looked at, including Chrome’s and Edge’s built-in readers, use a media-player layout: a bar, a play button, a speed menu and sometimes a progress track. That works, and it is familiar. But listening to an article is not the same as playing a song, and we wanted Spoken’s interface to say more about what is happening: whether the voice is loading, speaking or waiting, and where on the page it is.

This post walks through how the design got there, in three rounds.

Round one: a text box and a Speak button

The first popup was plain. It had a “Text to speak” box, a voice dropdown, a speed slider and a Speak button, with a status line that read “Ready · WebGPU” or “Idle”.

It did the job, but it hid the interesting part. Spoken runs a speech model, Kokoro-82M, inside your browser on WebGPU, and falls back to your processor through WASM when WebGPU is unavailable. The first time you use it, Spoken downloads the model over the internet and caches it in the browser, so later reads load it from the cache. A button and a word like “Idle” told you very little about any of that. You couldn’t tell whether a pause meant the model was still loading or something had gone wrong.

Round two: the orb

The second round replaced the play button with an orb. It drew the most discussion, and most of it shipped.

The orb is the button

In the popup, you click the orb to speak, click it again to pause, and click again to resume. A separate round Stop button sits beside it. While Spoken reads, the text box turns into a live caption that tracks roughly which word is being spoken (word timing is estimated), so your eyes have somewhere to go.

The orb shows the engine’s state

The orb has four states, and they map directly onto the engine:

The download state is worth a note. The default WebGPU model is about 326 MB, and the WASM fallback is about 92 MB. Instead of printing a fixed figure, the status line shows the real download, “X of Y MB”, read from the network. When the model is already cached, it skips that step. An engine status popover tells you where the voice is running, for example “Running on your graphics card with WebGPU” or “Running on your processor (WebGPU is unavailable here). Nothing leaves this browser.”

One trade-off: there is no seek bar or progress track. The orb and the status line replace them. On the page, the docked player shows “Sentence n of N” or “Paragraph n of N” instead.

A voice wardrobe

Spoken ships 21 Kokoro voices: 11 American female, 8 American male, one British female and one British male. Each voice has its own orb colour in the popup, so you can tell who is speaking at a glance there. The orbs on the page use Spoken’s violet.

The voice chip in the popup opens a wardrobe: a grid of voices with filters for All, Female, Male and British. You can preview any voice at normal speed, and nothing changes until you press Use voice. The grid works with the keyboard too, with the arrow keys, Home and End.

On the page, not just in the popup

The last idea in this round was to stop making people open a popup at all. When you select text, a small pill with the orb and Speak appears next to it. Escape hides it. The shortcut is Alt+Shift+S (Alt+Shift+K on ChromeOS), and pressing it again stops. The pill shows whatever binding you have actually set, so it stays accurate if you change it. A right-click Speak selection item does the same thing.

When you read a selection, a player docks on the page with the orb, the sentence count, the voice, a speed control, play/pause and stop. When you read a whole article, the dock shows the paragraph count and a Stop button. The sentence being read is lit on the page, and the current word glides along inside it. Spoken does this with the browser’s CSS Custom Highlight API, so the page’s own markup is not changed.

Round three: settings that apply live

The third round was about control. The settings view has two sections.

On the page:

Highlight:

Changes sync to open pages straight away.

Explored, not shipped

A few ideas from the canvas exist only in code or not at all. Motion presets (Calm, Lively, Wild), a ripples toggle, alternate paragraph-marker styles and an inline suggest style are stored settings with no controls yet. An “address bar” suggestion style turned out not to be buildable in an extension and falls back to the pill. Treat these as explorations, not features.

Why this shape

Other readers have good reasons for their designs, and some do things Spoken doesn’t. As of November 2026, Chrome’s Reading mode Read aloud on desktop gives you play/pause, previous and next sentence, speed, voice choice and preview with additional languages, and adaptive, word or sentence highlighting, built into the browser with nothing to install. Edge’s Read aloud reads PDFs in Edge’s built-in viewer on desktop, and Read aloud is also in the Edge apps for iOS and Android. Edge also offers local voices that work offline, and Speechify has added on-device voices on iOS. Cloud services such as Speechify, NaturalReader and ElevenReader offer far larger voice catalogs, many more languages and apps on other devices (all three also have Chrome extensions), and their cloud voices may sound more expressive than a small on-device model. Spoken today is English only, with American and British voices, and runs in Chrome 125 or later and in Edge, on desktop and laptop computers, not on phones.

What we tried to do differently is make the state of the voice visible. Many readers, Chrome’s included, already highlight the word being read. What the orb adds is the engine’s own state: whether the model is downloading and how far along it is, and whether it is speaking or paused. In the popup its colour also tells you which voice is speaking. Speech is generated sentence by sentence, so the next sentence is prepared while the current one plays. Spoken runs the model locally, and the engine popover says so plainly: nothing leaves the browser.

If you’d rather listen than read, try Spoken on the next long article you open.

Sources (checked 2026-11-14)