Speech AI w TypeScript
Whisper (STT), ElevenLabs (TTS premium), Deepgram real-time WebSocket, Web Speech API i architektura voice chat w React.
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.
Powiązane artykuły
Skontaktuj się z nami
Porozmawiajmy o Twoim projekcie. Bezpłatna wycena w ciągu 24 godzin.
Wyślij zapytanie
Telefon
+48 790 814 814
Pon-Pt: 9:00 - 18:00
adam@fotz.pl
Odpowiadamy w ciągu 24h
Adres
Plac Wolności 16
61-739 Poznań
Godziny pracy
Wolisz porozmawiać?
Zadzwoń teraz i porozmawiaj z naszym specjalistą o Twoim projekcie.
Zadzwoń teraz