Skip to content

Text-to-Speech Tool

Overview

The Text-to-Speech tool converts written text into spoken audio using the Web Speech API. It provides comprehensive playback controls, voice selection, and speech customization options. This tool is essential for users with visual impairments, reading difficulties, or those who prefer auditory learning.

Features

  • Smart Text Selection: Automatically reads selected text or entire page content
  • Playback Controls: Play, pause, stop, and resume functionality
  • Text Highlighting: Visual indication of currently spoken text
  • Browser Voice Support: Utilizes system and browser-installed voices

Settings

The Text-to-Speech tool offers basic audio customization:

Voice Selection

  • System Voices: Built-in operating system voices
  • Browser Voices: Additional voices provided by the browser
  • Language Support: Voices available in multiple languages
  • Gender Options: Male and female voice variants where available

API Customization

While the widget interface provides simple voice selection, speech rate and pitch can be customized via the API for advanced implementations.

Usage

Basic Operation

  1. Activation: Click the Text-to-Speech button in the accessibility toolbar
  2. Text Selection: Select specific text or let it read the entire page
  3. Playback: Use play/pause controls to manage audio playback
  4. Voice Selection: Choose preferred voice from the dropdown menu

Advanced Features

  • Text Highlighting: Currently spoken words are highlighted in real-time
  • Progress Tracking: Visual indicator shows reading progress
  • Pause and Resume: Maintains position when pausing playback
  • Skip Controls: Jump between sentences or paragraphs

Accessibility Benefits

  • Visual Impairment Support: Provides audio alternative to visual content
  • Dyslexia Assistance: Combines visual and auditory learning channels
  • Reading Difficulties: Helps users with various reading challenges
  • Language Learning: Supports pronunciation and comprehension
  • Multitasking: Allows content consumption while performing other tasks
  • Fatigue Reduction: Reduces eye strain during long reading sessions

Technical Implementation

The tool leverages the Web Speech API's speechSynthesis interface to convert text to speech. It handles voice loading, text chunking for long content, and provides fallback support for browsers with limited voice options.

Voice Quality Notes

Voice Recommendations

  • Windows: Microsoft voices (David, Zira, Mark)
  • macOS: System voices (Alex, Samantha, Victoria)
  • Linux: eSpeak or Festival voices (quality varies)
  • Mobile: High-quality native voices on iOS/Android

Browser Limitations

Some browsers may have limited voice options or require user interaction before enabling speech synthesis. The tool gracefully handles these limitations with appropriate fallbacks.

API Usage Example

The Text-to-Speech tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

javascript
// Basic activation
window.BrowseAidWidget.api.enableTool('text-to-speech');

// Enable with custom settings
window.BrowseAidWidget.api.enableTool('text-to-speech', {
  rate: 1.2,    // Speech rate: 0.1 to 10 (default: 1)
  pitch: 1.0    // Speech pitch: 0 to 2 (default: 1)
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('text-to-speech', {
  enabled: true,
  rate: 0.8,    // Slower speech
  pitch: 1.5    // Higher pitch
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('text-to-speech');
console.log('Text-to-Speech is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('text-to-speech');
console.log('Current TTS settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('text-to-speech');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'text-to-speech') {
    console.log('Text-to-Speech settings changed:', settings);
  }
});

Configuration Options

OptionTypeRangeDefaultDescription
enabledbooleantrue/falsefalseEnables or disables the tool
ratenumber0.1 - 101Speech rate (speed)
pitchnumber0 - 21Voice pitch (tone)

Rate Examples

  • 0.5 - Very slow speech for learning
  • 1.0 - Normal speech rate
  • 1.5 - Faster speech for quick review
  • 2.0 - Maximum speed for experienced users

Pitch Examples

  • 0.5 - Lower, deeper voice
  • 1.0 - Normal voice pitch
  • 1.5 - Higher, brighter voice
  • 2.0 - Very high pitch

Usage Patterns

javascript
// Enable TTS for reading assistance
function enableReadingAssistance() {
  window.BrowseAidWidget.api.enableTool('text-to-speech');

  // Provide user guidance
  console.log('Text-to-Speech enabled. Select text to hear it spoken.');
}

// Context-aware TTS activation
function activateTTSForContent(contentType) {
  if (['article', 'documentation', 'educational'].includes(contentType)) {
    window.BrowseAidWidget.api.enableTool('text-to-speech');
  }
}

// Accessibility profile integration
const accessibilityProfiles = {
  'visual-impairment': {
    tools: ['text-to-speech', 'readable-fonts', 'link-highlighter']
  },
  'reading-assistance': {
    tools: ['text-to-speech', 'reading-guide', 'word-spacing']
  }
};

function applyAccessibilityProfile(profileName) {
  const profile = accessibilityProfiles[profileName];
  if (profile && profile.tools.includes('text-to-speech')) {
    window.BrowseAidWidget.api.enableTool('text-to-speech');
  }
}

// Simple TTS status check
function checkTTSStatus() {
  const settings = window.BrowseAidWidget.api.getToolState('text-to-speech');
  return settings?.enabled || false;
}

Usage Tips

  • Select text after enabling the tool to hear it spoken
  • The tool uses your browser's default voice settings
  • For best results, select complete sentences or paragraphs
  • The tool works best with plain text content

BrowseAid Documentation