Read Me TTS Docs

Readme TTS Documentation

ReadMe TTS Architecture Documentation

Version

Current Version: 1.0.0 (2024)

Overview

AudioFlow Reader is a Progressive Web Application (PWA) designed to convert text content into high-quality speech output. The application implements a local-first architecture with IndexedDB storage, ensuring reliable offline functionality while maintaining a responsive user experience.

Core Features

  1. Text-to-Speech Conversion

    • Direct text input

    • URL content extraction

    • Multiple voice options

    • Language selection

  2. Audio Management

    • Local storage of audio files

    • Offline playback capability

    • Queue management

    • Playback controls

  3. Progressive Web Features

    • Offline functionality

    • Install capability

    • Service worker caching

    • Local-first data storage

Technical Stack

Core Technologies

  • React 18.3

  • Vite 5.4

  • TypeScript 5.5

  • Tailwind CSS 3.4

  • ShadcN UI Components

  • IndexedDB (via Dexie.js)

  • Service Workers

State Management

  • Zustand for application state

  • React Query for data fetching

  • Local storage for preferences

Application Architecture

Directory Structure

src/
├── components/         # React components
│   ├── audio-player/  # Audio playback components
│   ├── header/        # Header components
│   ├── settings/      # Settings components
│   ├── text-area/     # Text input components
│   └── ui/            # Shared UI components
├── hooks/             # Custom React hooks
├── integrations/      # External service integrations
├── lib/              # Core utilities
├── pages/            # Page components
├── store/            # State management
├── types/            # TypeScript definitions
└── utils/            # Utility functions

Key Components

1. Text Processing

  • TextInput: Handles text input and URL content extraction

  • InputModeSelector: Toggles between direct text and URL input

  • UrlInput: Manages URL content extraction

2. Audio System

  • AudioPlayer: Main audio playback interface

  • PlayControls: Playback control buttons

  • ProgressBar: Audio progress visualization

  • VolumeControl: Volume management

3. Settings Management

  • VoiceSettings: Voice and language configuration

  • StorageSettings: Storage management options

  • ServiceToggle: TTS service selection

State Management Architecture

1. Audio State (audio.tsx)

  • Manages current audio playback

  • Handles audio queue

  • Controls playback state

  • Manages audio loading

2. Settings State (settings.ts)

  • Voice preferences

  • Language settings

  • Theme configuration

  • Storage preferences

3. Background Tasks (backgroundTasks.ts)

  • Manages conversion tasks

  • Handles task queue

  • Provides progress updates

Data Flow

  1. Text Input Flow

    User Input → Text Processing → TTS Conversion → Audio Storage → Playback

  2. URL Processing Flow

    URL Input → Content Extraction → Text Processing → TTS Conversion → Storage

  3. Audio Playback Flow

    Storage Retrieval → Audio Loading → Playback Controls → User Interaction

Storage Architecture

IndexedDB Implementation

  • Database: TextToSpeechDB

  • Version: 3

  • Primary Storage: Audio data as ArrayBuffer

  • Secondary Storage: Text content and metadata

Data Schema

interface TextToSpeechEntry {
  id?: number;
  text: string;
  audioData: ArrayBuffer;
  size: number;
  timestamp: Date;
  sourceType: 'url' | 'paste';
  sourceUrl?: string;
  imageUrl?: string;
  syncStatus: 'pending' | 'synced';
}

Offline Capabilities

Service Worker Strategy

  1. Cache Management

    • Critical assets cached on install

    • Dynamic content caching

    • Stale-while-revalidate strategy

  2. Offline First

    • Local data persistence

    • Offline playback support

    • Background sync preparation

User Interface Architecture

1. Layout Components

  • Header: Navigation and controls

  • MainContent: Primary content area

  • MobileNav: Mobile navigation bar

2. Responsive Design

  • Mobile-first approach

  • Adaptive layouts

  • Floating player interface

3. Theme Support

  • Light/dark mode

  • System preference detection

  • Runtime theme switching

Performance Considerations

1. Data Management

  • Efficient IndexedDB operations

  • Optimized audio storage

  • Progressive loading

2. Resource Usage

  • Audio buffer management

  • Memory optimization

  • Storage quota handling

3. Network Efficiency

  • Asset caching

  • Progressive enhancement

  • Offline-first approach

Security Considerations

1. Data Storage

  • Local-only sensitive data

  • Secure audio storage

  • Privacy-focused design

2. Content Access

  • Safe URL processing

  • Content sanitization

  • Error handling

Future Considerations

1. Performance Optimization

  • Audio compression

  • Streaming capabilities

  • Progressive loading

2. Feature Expansion

  • Additional voice options

  • Enhanced offline support

  • Improved content extraction

3. User Experience

  • Accessibility improvements

  • Enhanced mobile support

  • Extended language support

Updated on
ReaME TTS Storage Architecture