Appearance
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
- Activation: Click the Text-to-Speech button in the accessibility toolbar
- Text Selection: Select specific text or let it read the entire page
- Playback: Use play/pause controls to manage audio playback
- 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
| Option | Type | Range | Default | Description |
|---|---|---|---|---|
enabled | boolean | true/false | false | Enables or disables the tool |
rate | number | 0.1 - 10 | 1 | Speech rate (speed) |
pitch | number | 0 - 2 | 1 | Voice pitch (tone) |
Rate Examples
0.5- Very slow speech for learning1.0- Normal speech rate1.5- Faster speech for quick review2.0- Maximum speed for experienced users
Pitch Examples
0.5- Lower, deeper voice1.0- Normal voice pitch1.5- Higher, brighter voice2.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