Skip to content

Browser-based speech studio · 2024

Text2Vox

A browser-based speech studio that transforms text into natural audio with adjustable voice controls, instant preview, and downloadable output.

Role
Frontend, audio integration
Duration
2 weeks
text2vox.appOpen
T
Words, made audible

Give every sentence a voice.

OverviewReal-time preview
ContextWAV export
OverviewWhat the product does

Text2Vox makes hosted speech models feel like a small, understandable creative tool. It brings writing, voice controls, preview, and export together in a single browser workflow.

Problem statement

The context

Many text-to-speech interfaces either provide too little control or expose technical settings without explaining how they affect the result.

Solution

The approach

I designed a clear sequence from text input to voice selection, tone adjustments, preview, and download, with Web Audio handling responsive playback inside the browser.

System design

Architecture

A simplified view of how the main product layers exchange data.

System mapText2Vox · simplified
Layer 01
Text input

Data flow
Layer 02
Speech model

Data flow
Layer 03
Audio buffer

Data flow
Layer 04
Playback + export

Responsibilities and data flow are shown here without infrastructure noise.

Technology

Built with

ReactHugging FaceWeb Audio API
Product

Core features

  1. 01

    Hosted natural-speech model integration

  2. 02

    Adjustable voice, pitch, pace, and style

  3. 03

    Immediate browser playback

  4. 04

    Downloadable output for offline use

Challenges

What required care

  • Keeping audio feedback immediate across browsers
  • Handling inference delay without blocking the interface
  • Presenting voice controls in plain language
Learnings

What the work clarified

  • Fast preview loops matter more than an exhaustive control surface.
  • Audio tools benefit from visible states and forgiving defaults.
Experience

Key product flows

Three direct paths that show how the product helps someone move from intent to outcome.

01
Flow

Writing workspace

A focused product flow designed around one clear user outcome.

02
Flow

Voice controls

A focused product flow designed around one clear user outcome.

03
Flow

Export flow

A focused product flow designed around one clear user outcome.

Explore the build

See it in action.

Live demoSource code
Resume