Okay, let's set up an Angular application that uses the browser's built-in Web Speech API for basic Text-to-Speech functionality. This will provide a foundation similar to the core feature of Typecast. Note: The quality and variety of voices depend heavily on the user's browser and operating system. For production-grade TTS with more voice options and control, integrating a cloud-based TTS service (like Google Cloud TTS, AWS Polly, Azure Speech Service) via a backend would be necessary. import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class TtsService { private synth: SpeechSynthesis; private voices: SpeechSynthesisVoice[] = []; private voicesSubject = new BehaviorSubject([]); voices$ = this.voicesSubject.asObservable(); constructor() { if (!('speechSynthesis' in window)) { console.error("Sorry, your browser doesn't support text-to-speech!"); this.synth = null!; // Indicate unavailability return; } this.synth = window.speechSynthesis; this.loadVoices(); // Voices might load asynchronously if (this.synth.onvoiceschanged !== undefined) { this.synth.onvoiceschanged = () => this.loadVoices(); } } private loadVoices(): void { if (!this.synth) return; this.voices = this.synth.getVoices().sort((a, b) => { const aname = a.name.toUpperCase(); const bname = b.name.toUpperCase(); if (aname < bname) return -1; else if (aname == bname) return 0; else return 1; }); // Filter for distinct languages/names if needed, browser voices can be repetitive // console.log('Available voices:', this.voices); this.voicesSubject.next([...this.voices]); // Emit a copy } getVoices(): SpeechSynthesisVoice[] { return this.voices; } speak(text: string, voiceName: string | null, rate: number = 1, pitch: number = 1): void { if (!this.synth || !text) { console.warn('Speech synthesis not available or no text provided.'); return; } if (this.synth.speaking) { console.warn('SpeechSynthesis.speaking: Already speaking.'); this.synth.cancel(); // Stop current speech before starting new // Add a small delay to ensure cancellation completes setTimeout(() => this.startSpeaking(text, voiceName, rate, pitch), 100); return; } this.startSpeaking(text, voiceName, rate, pitch); } private startSpeaking(text: string, voiceName: string | null, rate: number, pitch: number): void { const utterance = new SpeechSynthesisUtterance(text); utterance.onend = () => { // console.log('SpeechSynthesisUtterance.onend'); }; utterance.onerror = (event) => { console.error('SpeechSynthesisUtterance.onerror', event); }; const selectedVoice = this.voices.find(v => v.name === voiceName); if (selectedVoice) { utterance.voice = selectedVoice; } else if (this.voices.length > 0) { // Fallback to the first available voice if the selected one isn't found utterance.voice = this.voices[0]; console.warn(`Voice "${voiceName}" not found. Using default: ${this.voices[0].name}`); } else { console.warn('No voices available.'); } utterance.pitch = Math.max(0, Math.min(pitch, 2)); // Range 0 to 2 utterance.rate = Math.max(0.1, Math.min(rate, 10)); // Range 0.1 to 10 this.synth.speak(utterance); } cancel(): void { if (this.synth?.speaking) { this.synth.cancel(); } } } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; // Import FormsModule import { TtsGeneratorComponent } from './tts-generator.component'; @NgModule({ declarations: [ TtsGeneratorComponent ], imports: [ CommonModule, FormsModule // Add FormsModule here ], exports: [ TtsGeneratorComponent ] }) export class TtsGeneratorModule { } import { Component, OnInit, OnDestroy } from '@angular/core'; import { TtsService } from '../services/tts.service'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-tts-generator', templateUrl: './tts-generator.component.html', styleUrls: ['./tts-generator.component.scss'] }) export class TtsGeneratorComponent implements OnInit, OnDestroy { textToSpeak: string = 'Hello! Enter text here and click Speak.'; availableVoices: SpeechSynthesisVoice[] = []; selectedVoiceName: string | null = null; rate: number = 1; pitch: number = 1; isLoadingVoices: boolean = true; private voiceSubscription: Subscription | null = null; constructor(private ttsService: TtsService) {} ngOnInit(): void { this.voiceSubscription = this.ttsService.voices$.subscribe(voices => { this.availableVoices = voices; if (voices.length > 0) { // Try to set a default voice (e.g., first US English or just the first) const defaultVoice = voices.find(v => v.lang.includes('en-US')) || voices[0]; if (defaultVoice && !this.selectedVoiceName) { this.selectedVoiceName = defaultVoice.name; } this.isLoadingVoices = false; } else { // Still loading or no voices available this.isLoadingVoices = true; // Or handle 'no voices' state } // console.log('Voices updated in component:', this.availableVoices); }); } ngOnDestroy(): void { this.voiceSubscription?.unsubscribe(); this.ttsService.cancel(); // Stop any speech when component is destroyed } speak(): void { if (!this.textToSpeak || !this.selectedVoiceName) { alert('Please enter text and select a voice.'); return; } this.ttsService.speak(this.textToSpeak, this.selectedVoiceName, this.rate, this.pitch); } stop(): void { this.ttsService.cancel(); } // Helper to display voice info in the dropdown getVoiceLabel(voice: SpeechSynthesisVoice): string { return `${voice.name} (${voice.lang})${voice.default ? ' [default]' : ''}`; } }

Text-to-Speech Generator

Text to Speak:

Voice:

Rate: {{ rate.toFixed(1) }}

Pitch: {{ pitch.toFixed(1) }}

.tts-container { max-width: 600px; margin: 20px auto; padding: 25px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-family: sans-serif; } h2 { text-align: center; color: #333; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } textarea, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding in width */ font-size: 1rem; } textarea { resize: vertical; min-height: 100px; } select { cursor: pointer; } select:disabled { background-color: #eee; cursor: not-allowed; } .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; align-items: center; /* Align items vertically */ } .slider label { margin-bottom: 8px; /* More space for slider label */ } .slider input[type="range"] { width: 100%; cursor: pointer; } .actions { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } button { padding: 10px 20px; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; color: white; } button:disabled { opacity: 0.6; cursor: not-allowed; } .speak-button { background-color: #28a745; /* Green */ } .speak-button:hover:not(:disabled) { background-color: #218838; } .stop-button { background-color: #dc3545; /* Red */ } .stop-button:hover:not(:disabled) { background-color: #c82333; } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // Ensure FormsModule is imported here too import { AppComponent } from './app.component'; import { TtsGeneratorModule } from './tts-generator/tts-generator.module'; // Import the new module @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, // Add FormsModule here TtsGeneratorModule // Add the TtsGeneratorModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Angular Text-to-Speech

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'angular-tts-basic'; } .main-container { display: flex; flex-direction: column; min-height: 100vh; font-family: Arial, Helvetica, sans-serif; } header { background-color: #007bff; color: white; padding: 15px 20px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } header h1 { margin: 0; font-size: 1.8em; } main { flex-grow: 1; padding: 20px; background-color: #f0f2f5; /* Light background for the main area */ } footer { background-color: #343a40; color: #ccc; text-align: center; padding: 10px 20px; font-size: 0.9em; } /* You can add global styles to this file, and also import other style files */ body { margin: 0; font-family: sans-serif; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }