TTS-felolvasó — kurzus-leckék magyar hanggal
A kurzus-renderer beépített Web Speech API-felolvasó: leckék hallgatása munkába-menet, vezetés közben, akadálymentesítve.
A kurzus-leckéket nem csak olvasni tudod — egy kattintással fel is olvastathatod magadnak. A megoldás a böngésződ beépített Web Speech API-ja, magyar nyelvű hanggal. Nem kell se app, se fizetős TTS-szolgáltatás.
1. Mire jó?
- Vezetés / utazás közben — munkába mensz, és közben hallgatod a leckét
- Másik képernyőre figyelés közben — kódolsz parallel, a háttérben pörög a lecke
- Akadálymentesítés — látáskárosult felhasználóknak natívan elérhető
- Magyar kiejtés-gyakorlás — ha a szakmai magyart még tanulod
- Pihenőszem-stratégia — nem a képernyőt nézed, csak hallgatsz
2. Hogyan használd?
A kurzus-lecke oldalán (pl. /kurzusok/astro-kezdo/lecke/1) felül egy kis hangszóró-ikon látszik:
- ▶ Felolvasás — elindul a magyar TTS
- ⏸ Szünet — pillanatnyi szünet
- ⏹ Stop — leállítja, vissza az elejére
- ⏩ Sebesség — 0.75x / 1x / 1.25x / 1.5x / 2x
A felolvasás a lecke fő-szövegét olvassa: címek, bekezdések, listák. Kódblokk-okat kihagyja (értelmezhetetlen lenne hangosan).
3. Magyar hang-választás
A böngésződ a saját TTS-motorját használja. A leggyakoribb magyar hangok:
| Operációs rendszer | Magyar hang |
|---|---|
| Windows 11 | Microsoft Szabolcs (férfi), Microsoft Beáta (női) |
| macOS | Mariska (női), Tünde (női) |
| iOS / iPadOS | Tünde |
| Android | Google magyar (TTS-engine) |
| Linux (Chrome) | hu-HU rendszer-hang (rendszer-függő) |
Ha a böngésződ nem talál magyar hangot, angol hang olvas (kissé mókásan kiejtve a magyar szavakat). Ekkor érdemes a rendszer-szintű TTS-csomagot installálni:
- Windows:
Settings → Time & Language → Speech → Add voices → magyar - macOS:
System Settings → Accessibility → Spoken Content → System Voice → Customize → magyar Tünde - Android:
Settings → System → Languages & input → Text-to-speech → Google → Install voice data → magyar
4. Sebesség-választás
Tipikus értékek:
- 0.75x — kezdő, vagy ha a hang gyors
- 1.0x — alapértelmezett, természetes tempó
- 1.25x — gyorsabb feldolgozás (a legtöbb használó ide vált)
- 1.5x — gyors hallgatóknak (szakmai-szöveg jól megy)
- 2.0x — nagyon gyors, csak ismétlésre
A választott sebességet localStorage-ben mentjük, így legközelebb ugyanazzal indul.
5. Mi NEM olvassa?
A TTS-renderer nem olvas fel:
- Kódblokk-ok (
<pre><code>szakaszok) — értelmezhetetlen lenne - Mermaid-diagrammok — vizualis komponens, nem szöveg
- Képek
alt-szövege — kihagyva (helyett rövid “kép itt” jelzés) - Külső link-ek URL-ek — csak a link-szöveg, az URL nem
- Inline-kód (
<code>) — kihagyva
Ha mégis hallani akarsz egy kódblokkot, vizuálisan kell olvasnod (a TTS nem alkalmas erre).
6. Privát-e?
Igen. A felolvasás kliens-oldali — a böngésződ saját TTS-motorja csinálja. Nincs hálózati hívás, semmi nem megy el a PromNET-szerverre, és semmi nem megy el külső TTS-API-ra.
A szöveg a böngésződ JavaScript-jéből kerül a TTS-engine-be, és a hangszóródon szól. Ennyi.
Tipp: Ha meg akarod őrizni a hang-fájlt (offline-hallgatáshoz), használj egy desktop-screen-recording-tool-t (OBS Studio pl.) audio-only módban. A platform-on belül letöltési-funkció nincs.
7. Böngésző-támogatás
A Web Speech API minden modern böngészőben működik:
- ✅ Chrome / Edge / Brave (Chromium-alapú)
- ✅ Safari (macOS / iOS)
- ✅ Firefox (Linux + Windows + macOS, magyar hang csomagolva)
- ⚠️ Mobil-Chrome — Android-on rendszer-hang kell hozzá
- ❌ Régi IE / Edge Legacy — nincs támogatás
Ha a böngésződ nem támogatja, a felolvasás-gomb nem jelenik meg.
8. Hibák és figyelmeztetések
“A felolvasás megáll néha”: a TTS-engine egy bug-ja Chrome-on: ~15 másodperc után magától leáll. A renderer automatikusan újraindítja, így folyamatos lesz.
“Furcsa szavakat ejt rosszul”: az angol szakkifejezéseket (pl. “Astro”, “Cloudflare”, “deploy”) magyar TTS angolosan próbálja. Ez normális, nincs fix-elhető.
“Nem találja a magyar hangot”: ld. a 3. szekciót — install kell a rendszer-szintű csomagot.
9. Következtetés-ha-hangosan-olvasol
A TTS-felolvasó kiegészítője a vizuális tanulásnak — nem helyettesítője. Kódblokk-okat, diagrammokat vizuálisan kell befogadni. Hosszú-szöveges elméleti részekben viszont nagyon hatékony, főleg ha többfelé osztott figyelemmel tanulsz.
10. Roadmap
Tervezett bővítések:
- Lecke-progress sync — ahol abbahagytad hallgatást, ott folytatja
- Bookmark-jelölés — egy mondatra kattintással “ez fontos”
- Letöltés (audio-fájl-export) — offline-hallgatáshoz
- Több-nyelvű támogatás — angol és német TTS, ha kell
Szavazz a /roadmap oldalon, melyik kell hamarabb!