Synteza mowy w czystym JavaScript

Aby używać text-to-speech w przeglądarce, potrzebujemy interfejsu SpeechSynthesis oraz obiektu SpeechSynthesisUtterance.

// Sprawdź, czy przeglądarka obsługuje Web Speech API
if ('speechSynthesis' in window) {
    console.log('Text-to-Speech jest wspierany!');
} else {
    console.log('Twoja przeglądarka nie wspiera TTS');
}

2. Podstawowy przykład

function mow(tekst) {
    const wypowiedz = new SpeechSynthesisUtterance(tekst);
    wypowiedz.lang = 'pl-PL'; // Ustawienie języka polskiego
    window.speechSynthesis.speak(wypowiedz);
}

3. Kontrola parametrów głosu

const wypowiedz = new SpeechSynthesisUtterance('Tekst do wypowiedzenia');

wypowiedz.lang = 'pl-PL';        // Język
wypowiedz.pitch = 1.0;           // Wysokość głosu (0.1 - 2.0)
wypowiedz.rate = 1.0;            // Szybkość (0.1 - 10)
wypowiedz.volume = 1.0;          // Głośność (0 - 1)

window.speechSynthesis.speak(wypowiedz);

4. Wybór głosu

// Pobierz dostępne głosy
function pobierzGlosy() {
    return window.speechSynthesis.getVoices();
}

// Użyj konkretnego głosu
const glosy = pobierzGlosy();
const polskiGlos = glosy.find(glos => glos.lang === 'pl-PL');

const wypowiedz = new SpeechSynthesisUtterance('Witaj');
wypowiedz.voice = polskiGlos;
window.speechSynthesis.speak(wypowiedz);

5. Zdarzenia (Events)

const wypowiedz = new SpeechSynthesisUtterance('Test');

wypowiedz.onstart = () => {
    console.log('Rozpoczęto mowę');
};

wypowiedz.onend = () => {
    console.log('Zakończono mowę');
};

wypowiedz.onerror = (e) => {
    console.error('Błąd:', e);
};

wypowiedz.onpause = () => {
    console.log('Wstrzymano');
};

wypowiedz.onresume = () => {
    console.log('Wznowiono');
};

6. Kompletny przykład

Uwaga: W niektórych przeglądarkach lista głosów może być dostępna dopiero po załadowaniu strony. Użyj zdarzenia voiceschanged aby upewnić się, że głosy są dostępne.

class TextToSpeech {
    constructor() {
        this.synth = window.speechSynthesis;
        this.voices = [];
        
        // Załaduj głosy
        this.loadVoices();
        
        // Na wypadek opóźnionego ładowania głosów
        if (speechSynthesis.onvoiceschanged !== undefined) {
            speechSynthesis.onvoiceschanged = () => this.loadVoices();
        }
    }
    
    loadVoices() {
        this.voices = this.synth.getVoices();
    }
    
    speak(text, options = {}) {
        // Zatrzymaj aktualną mowę
        this.synth.cancel();
        
        const utterance = new SpeechSynthesisUtterance(text);
        
        // Ustaw parametry
        utterance.lang = options.lang || 'pl-PL';
        utterance.pitch = options.pitch || 1;
        utterance.rate = options.rate || 1;
        utterance.volume = options.volume || 1;
        
        // Wybierz głos
        if (options.voiceName) {
            const voice = this.voices.find(v => v.name === options.voiceName);
            if (voice) utterance.voice = voice;
        }
        
        // Dodaj obsługę zdarzeń
        if (options.onStart) utterance.onstart = options.onStart;
        if (options.onEnd) utterance.onend = options.onEnd;
        if (options.onError) utterance.onerror = options.onError;
        
        this.synth.speak(utterance);
    }
    
    pause() {
        this.synth.pause();
    }
    
    resume() {
        this.synth.resume();
    }
    
    stop() {
        this.synth.cancel();
    }
}

🎙️ Synteza mowy w czystym JavaScript

1. Podstawy - Pierwsze kroki

2. Podstawowy przykład

Demo 1: Podstawowa synteza mowy

3. Kontrola parametrów głosu

Demo 2: Kontrola parametrów

4. Wybór głosu

Demo 3: Wybór głosu

5. Zdarzenia (Events)

Demo 4: Kontrola odtwarzania

6. Kompletny przykład