AI / Speech / TypeScript

    Speech AI w TypeScript

    Whisper (STT), ElevenLabs (TTS premium), Deepgram real-time WebSocket, Web Speech API i architektura voice chat w React.

    Whisper
    STT
    ElevenLabs
    TTS
    Deepgram
    Real-time
    Web Speech
    Browser

    6 narzędzi Speech AI — STT i TTS

    Whisper, ElevenLabs, Deepgram, OpenAI TTS i Web Speech API — typ, zastosowanie i kiedy używać.

    Narzędzie Typ Zastosowanie
    OpenAI Whisper STT (cloud) Transkrypcja, tłumaczenie, 99 języków, word timestamps
    whisper.cpp STT (local) On-device, prywatność, offline, WASM w przeglądarce
    ElevenLabs TTS (premium) Najlepsza jakość, emocje, klonowanie głosu, wielojęzyczny
    OpenAI TTS TTS (cloud) 6 głosów, tańszy, tts-1-hd wysoka jakość
    Deepgram Nova-2 STT (real-time) WebSocket streaming, diarization, 300ms latency
    Web Speech API STT+TTS (browser) Darmowy, offline TTS, Chrome tylko, system głosy

    Często zadawane pytania

    OpenAI Whisper — transkrypcja mowy w TypeScript?

    OpenAI Whisper: najlepszy open-source model STT. Whisper API (cloud) i whisper.cpp (local). Modele: tiny, base, small, medium, large-v3. Large-v3: najdokładniejszy. Obsługa 99 języków. API integracja TypeScript: import OpenAI from 'openai'. const openai = new OpenAI({apiKey: process.env.OPENAI_API_KEY}). async function transcribe(audioFile: File) { const formData = new FormData(). formData.append('file', audioFile). formData.append('model', 'whisper-1'). formData.append('language', 'pl'). const response = await openai.audio.transcriptions.create({file: audioFile, model: 'whisper-1', language: 'pl', response_format: 'verbose_json', timestamp_granularities: ['word']}). return response }. verbose_json: pełne dane z timestampami słów. Word-level timestamps. Next.js API route: app/api/transcribe/route.ts. formData() z request. Streaming transkrypcja: chunked audio. Real-time z mikrofonu. MediaRecorder API. Obsługiwane formaty: mp3, mp4, mpeg, mpga, m4a, wav, webm. Max 25MB. Dłuższe pliki: ffmpeg split. Diarization (kto mówi): Pyannote.audio. AssemblyAI (cloud). Kombinuj z Whisper. Tłumaczenie: task: 'translate' — przetłumacz na angielski. Z dowolnego języka. Jeden call API. Prompt context: initial_prompt — styl, słownictwo. Nazwy własne poprawność. Terminologia techniczna.

    ElevenLabs — text-to-speech i klonowanie głosu API?

    ElevenLabs: najlepsza jakość TTS (2024). Naturalne emocje. Klonowanie głosu. Wielojęzyczny. SDK TypeScript: npm install elevenlabs. import {ElevenLabsClient} from 'elevenlabs'. const client = new ElevenLabsClient({apiKey: process.env.ELEVENLABS_API_KEY}). Generowanie audio: const audioStream = await client.generate({voice: 'Rachel', model_id: 'eleven_multilingual_v2', text: 'Cześć, jak się masz?'}). Streaming: for await (const chunk of audioStream) { process.stdout.write(chunk) }. Głosy: Rachel, Drew, Clyde, Paul, Domi. Prebuilt voices. Własne głosy z Voice Lab. Model: eleven_multilingual_v2 — obsługuje polski. eleven_monolingual_v1 — tylko angielski. eleven_turbo_v2_5 — szybszy, tańszy. Voice settings: stability: 0.5. similarity_boost: 0.75. style: 0.0 (expressiveness). use_speaker_boost: true. Voice cloning: Instant Voice Cloning — 1 minuta próbki. Professional Voice Cloning — pełny klon. API: client.voices.add. Voices library. Next.js streaming: ReadableStream. Response headers Content-Type: audio/mpeg. Browser odtwarza. Koszty: Starter 10k chars/mies. Creator 30k. Custom. Znaki = tekst. Średnio $0.30/1000 znaków. Alternatywy: OpenAI TTS (tts-1, tts-1-hd). 6 głosów (alloy, echo, fable, onyx, nova, shimmer). Tańszy. Gorsze emocje. Azure TTS: setki głosów. SSML. Enterprzise. Google TTS: WaveNet, Neural2. Tanie.

    Deepgram — real-time transkrypcja i WebSocket API?

    Deepgram: real-time STT. WebSocket streaming. Najszybszy (300ms latency). Nova-2 model: najdokładniejszy dla angielskiego. Whisper model: wielojęzyczny przez Deepgram API. SDK: npm install @deepgram/sdk. import {createClient} from '@deepgram/sdk'. const deepgram = createClient(process.env.DEEPGRAM_API_KEY). Real-time z mikrofonu TypeScript: const connection = deepgram.listen.live({model: 'nova-2', language: 'pl', punctuate: true, diarize: true, smart_format: true}). connection.on('Results', (data) => { const transcript = data.channel.alternatives[0].transcript. if (data.is_final) console.log(transcript) }). MediaRecorder do WebSocket: navigator.mediaDevices.getUserMedia({audio: true}). MediaRecorder(stream). ondataavailable -> connection.send(event.data). Browser example: Deepgram JS SDK. Bezpośrednio z przeglądarki. API key — ostrożnie (backend proxy lepiej). Diarization: kto mówi. speaker: 0, speaker: 1. Timestamps per word. Smart formatting: liczby, daty, waluty. Redaction: PII removal. Automatycznie. Pre-recorded audio: deepgram.listen.prerecorded.transcribeFile(). lub transcribeUrl(). Async. Batch processing. Webhooks dla długich plików. Features: Summarize — AI podsumowanie. Topics — wykrywanie tematów. Sentiment — analiza sentymentu. Intents — wykrywanie intencji. Ceny: Pay-as-you-go $0.0043/minuta. Hosted $0.0036. On-premise dostępne.

    Web Speech API — natywna mowa w przeglądarce TypeScript?

    Web Speech API: wbudowany w przeglądarkę. Zero cost. Działa offline (system TTS). SpeechRecognition: mowa na tekst. SpeechSynthesis: tekst na mowę. SpeechRecognition TypeScript: const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition. const recognition = new SpeechRecognition(). recognition.lang = 'pl-PL'. recognition.interimResults = true. recognition.continuous = true. recognition.onresult = (event) => { const transcript = Array.from(event.results).map(r => r[0].transcript).join('') }. recognition.start(). TypeScript types: npm install @types/dom-speech-recognition. Lub window deklaracja własna. Ograniczenia: Chrome tylko (Firefox partial). Online wymagany (Chrome wysyła do Google). Prywatność — dane do chmury. Brak 100% dokładności. React hook: const useSpeechRecognition = () => { const [transcript, setTranscript] = useState(''). useEffect(() => { const recognition = new window.SpeechRecognition(). recognition.onresult = (e) => setTranscript(...) }). return {transcript, start, stop} }. SpeechSynthesis (TTS): const utterance = new SpeechSynthesisUtterance('Cześć!'). utterance.lang = 'pl-PL'. utterance.rate = 1.0. utterance.pitch = 1.0. utterance.voice = speechSynthesis.getVoices().find(v => v.lang === 'pl-PL'). speechSynthesis.speak(utterance). Głosy: systemowe (Windows, macOS). Jakość zmienna. Dobry dla prostych zastosowań. Events: onstart, onend, onerror, onboundary (słowa). Porównanie z ElevenLabs: ElevenLabs — jakość premium. Web Speech — darmowy, offline, prosty.

    Architektura voice AI app — React hook, streaming i pipeline?

    Kompletny pipeline voice AI: Mikrofon -> MediaRecorder -> WebSocket/API -> STT -> LLM -> TTS -> Audio player. React architecture: useVoiceRecorder hook. useTranscription hook. useTextToSpeech hook. useVoiceChat = kombinacja. useVoiceRecorder: const [isRecording, setIsRecording] = useState(false). const mediaRecorderRef = useRef. navigator.mediaDevices.getUserMedia({audio: true}). MediaRecorder z chunks. Blob po stop. Return {isRecording, start, stop, audioBlob}. Streaming STT + LLM + TTS: 1. Stream audio do Deepgram. 2. Interim results -> LLM (nie czekaj na koniec). 3. LLM stream output -> ElevenLabs. 4. ElevenLabs audio -> natychmiastowe odtwarzanie. Latency: STT ~300ms + LLM ~500ms + TTS ~500ms = ~1.3s. Next.js App Router: Server Actions dla STT (nie stream). Route handlers dla streaming TTS. WebSockets dla real-time chat. Audio format: Przeglądarka: webm/opus. Konwersja: ffmpeg lub Web Audio API. Whisper: wav/mp3 dla dokładności. AudioContext Web API: Visualizer. Waveform animacja. Volume detection. Noise detection. VAD (Voice Activity Detection): @ricky0123/vad-web. Silero VAD w przeglądarce. Start/stop automatycznie. Brak przycisku push-to-talk. Vercel AI SDK + speech: useChat z voice. streamText na serwerze. TTS wynik. End-to-end voice chat. Rate limiting: Upstash Redis. Per-user, per-minute. API costs kontrola. Deployment: Vercel (latency ok dla voice). Edge functions dla STT proxy. WebRTC dla P2P audio.

    Czytaj dalej

    Powiązane artykuły

    Kontakt

    Skontaktuj się z nami

    Porozmawiajmy o Twoim projekcie. Bezpłatna wycena w ciągu 24 godzin.

    Wyślij zapytanie

    Bezpłatna wycena w 24h
    Bez zobowiązań
    Indywidualne podejście
    Ekspresowa realizacja

    Telefon

    +48 790 814 814

    Pon-Pt: 9:00 - 18:00

    Email

    adam@fotz.pl

    Odpowiadamy w ciągu 24h

    Adres

    Plac Wolności 16

    61-739 Poznań

    Godziny pracy

    Pon - Pt9:00 - 18:00
    Sob - NdzZamknięte

    Wolisz porozmawiać?

    Zadzwoń teraz i porozmawiaj z naszym specjalistą o Twoim projekcie.

    Zadzwoń teraz