📽️ Prompter Studio — Panduan Lengkap
Aplikasi teleprompter all-in-one yang berjalan di browser. Mendukung script bahasa apa saja, anotasi pinyin/zhuyin untuk Mandarin, catatan per kata, TTS, kamera PiP, perekaman video, dan analisis bacaan.
1. Panel Script (Kiri)
Tempat memasukkan teks yang akan dibaca.
- 📁 Upload — buka file
.txt atau .md
- 🗑️ Hapus — bersihkan script
- Textarea — ketik atau paste manual
- Auto-save — script + setting tersimpan otomatis ke
localStorage
Contoh script:
Selamat pagi para pemirsa.
Hari ini kita akan membahas perkembangan teknologi terbaru.
Topik kedua: ekonomi global.
Dua baris kosong = paragraf baru. Satu newline = pindah baris saja.
2. Bar Kontrol Atas
▶ Grup Start
- ▶ Start — Mulai sesi rekam (mic + scroll + transcript)
- ■ Stop — Hentikan sesi & buat laporan
- ⏸ / ▶ — Pause / resume
- ↺ Reset — Ulang dari awal
🔊 Grup TTS (Text-to-Speech)
- 🔊 Klik — aktif → klik 1 kata = baca kata itu, atau drag/blok beberapa kata = baca satu rangkaian
- ≡ Semua — baca seluruh script
- ⏹ — stop suara
- 🌐 Auto / zh-TW / zh-CN / id-ID / en-US / ja-JP / ko-KR — bahasa TTS (Auto = deteksi CJK otomatis)
- Slider rate — kecepatan baca 0.5×–2× (default 0.85×)
Contoh: drag dari 各位觀眾您好 → keluar suara Mandarin "gè wèi guān zhòng nín hǎo" sebagai satu kalimat.
🎚️ Speed / Font / Color / Sorot
- Speed — kecepatan auto-scroll 0–12
- Font — ukuran 18–88 px
- Color — warna teks utama
- Sorot — warna kata yang sudah dibaca (done)
- ↔️ Mirror — balik teks horizontal (untuk teleprompter kaca)
- 🎯 Focus mode — gelapkan atas/bawah, kata aktif di tengah layar
- ⛶ Fullscreen — prompter layar penuh + tombol kontrol mengambang
漢 Grup Anotasi Mandarin
- — Off / Pīnyīn / Zhùyīn ㄅ — pilih mode anotasi
- ↑ Atas / → Kanan / ↓ Bawah / ← Kiri — posisi anotasi (klik untuk siklus)
- Rt slider — ukuran font anotasi
- Color picker — warna pinyin/zhuyin
Contoh: dengan Pīnyīn aktif, karakter 好 muncul dengan hǎo di atasnya. Dengan Zhùyīn → ㄏㄠˇ.
📝 Grup Note
- 📝 Note — toggle mode catatan
- ↑ Atas / Kanan / Bawah / Kiri — posisi label catatan
- Nt slider — ukuran font catatan
- Color picker — warna catatan
Cara pakai:
- Klik 📝 Note (tombol jadi
Note ●)
- Drag/blok kata-kata yang ingin diberi catatan
- Popup muncul → tulis catatan → ✓ Simpan
- Catatan muncul sebagai label kecil di atas/samping range yang dipilih
Contoh: blok 歡迎收看 → tulis "tarik napas" → label "tarik napas" muncul di atas 4 karakter itu (satu label menengah, bukan per karakter).
Shortcut: Ctrl+N = toggle mode, Ctrl+Enter = simpan note, Esc = batal.
📷 Record (kanan)
- 📷 — toggle Camera PiP (jendela kamera mengambang)
- ⏺ Record — rekam video sesi (kamera + audio)
- ⬇️ Video — download hasil rekaman setelah selesai
3. Mode Reading
🎯 Focus Mode
Klik 🎯. Atas dan bawah prompter digelapkan dengan gradien, kata yang sedang dibaca selalu di tengah layar. Cocok untuk fokus mata saat rekaman.
⛶ Fullscreen Mode
Klik ⛶. Prompter mengisi seluruh layar. Muncul bar kontrol mengambang di bawah dengan tombol Play/Pause/Reset dan Exit.
Saat klik Start, ada hitungan mundur 3-2-1 dengan animasi besar.
⚠️ Mode fullscreen / Spacebar = play-only: hanya scroll, tanpa mic. Kalau mau rekam transcript, pakai tombol ▶ Start di toolbar (bukan fullscreen Start).
Spacebar
Tekan Space kapan saja (kecuali sedang mengetik) → start (dengan countdown) / pause / resume scroll.
4. Click-to-Seek
Saat mode normal (bukan Note/TTS), klik kata mana saja di prompter → tandai sebagai titik mulai. Bar kuning muncul dengan opsi ▶ Mulai dari sini atau ✕ untuk batal.
5. Camera PiP (Picture-in-Picture)
Jendela kamera mengambang yang bisa di-drag dan resize.
- ⊞ Bg Mode — kamera jadi background prompter (transparan)
- ◑ Opacity — atur transparansi kamera background
- ─ Min/Max — minimize jadi bar kecil
- ✕ — tutup
- Drag bar atas = pindah, drag pojok kanan-bawah = resize
6. Overlay Floating (Tab "Overlay")
Window terpisah position:fixed yang bisa dipasang di atas aplikasi lain (misal saat live di OBS). Berisi kamera + teks prompter mini.
- 📌 Pin — kunci posisi
- Drag header = pindah, sudut = resize
7. Speech Recognition + Report
Saat Start (toolbar), mic aktif:
- Browser mendeteksi setiap kata yang Anda ucapkan
- Kata yang cocok dengan script ditandai hijau (done)
- Kata yang dilewatkan tetap warna asli
- Kata salah ucap muncul di transcript dengan tanda
Bahasa Pengenalan
Selector bahasa di header: id-ID, en-US, zh-TW, zh-CN, ja-JP, ko-KR.
Tab 📊 Reading Report
Setelah Stop:
- Akurasi % — kata cocok / total
- Durasi — waktu baca
- WPM — kata per menit
- Diff view — script asli vs ucapan, kata salah disorot merah
- ⬇️ Download HTML / TXT — ekspor laporan
8. Bahasa Mandarin / CJK
Tokenisasi
- Karakter CJK (汉/漢/한/かな) → setiap karakter = 1 token
- Latin/angka → setiap kata (dipisah spasi)
Artinya: 各位觀眾您好 (tanpa spasi) tetap bisa diblok per karakter, bukan satu blok besar.
Pinyin
Library pinyin-pro (CDN) → tone marks: nǐ hǎo
Zhuyin
Konversi pinyin numerik → bopomofo manual (lookup table 400+ silabel):
Posisi anotasi:
- ↑ Atas (default) — di atas karakter
- ↓ Bawah — di bawah
- → Kanan — vertikal di kanan (mode buku tradisional)
- ← Kiri — vertikal di kiri
9. Persistensi
Tersimpan otomatis di localStorage setiap perubahan:
- Script teks
- Notes (per range)
- Setting font/warna/speed
- Mode anotasi & posisi
- Toggle UI (mirror, focus, dll)
10. Shortcut Keyboard
| Shortcut |
Aksi |
Space |
Start (dengan countdown) / Pause / Resume scroll |
Ctrl+N |
Toggle Note mode |
Ctrl+Enter |
Simpan catatan |
Esc |
Tutup popup note |
11. Tips & Trik
- Pre-record practice run: pakai 🎯 Focus + 🔊 Klik untuk latihan pengucapan satu kalimat sebelum rekaman.
- Catatan ekspresi: blok kalimat → note "smile" / "pause 2 dtk" → muncul di atas teks tanpa mengganggu bacaan.
- Kamera transparan di belakang teks: Camera PiP → klik ⊞ Bg Mode → atur opacity → kamera jadi background tipis.
- Mandarin tradisional: pilih
Zhùyīn ㄅ + posisi → Kanan untuk gaya buku Taiwan klasik.
- TTS untuk belajar bahasa: mode 🔊 Klik + bahasa target → blok kalimat → dengar pengucapan asli.
- Live streaming: buka Overlay tab + Pin → drag jendela ke pojok layar yang di-share.
- Backup: karena tersimpan di localStorage, kalau ganti browser/clear cache hilang. Copy script penting ke file manual.
12. Limitasi
- file:// protocol — izin mic/kamera tidak persistent → prompt muncul setiap kali. Solusi: jalankan via local server (
npx serve . atau python -m http.server).
- Speech recognition — hanya jalan di Chromium (Chrome/Edge), tidak di Firefox/Safari.
- TTS quality — tergantung suara sistem yang terinstall di OS.
- Mandarin recognition — pakai
zh-CN untuk simplified, zh-TW untuk traditional — pilih sesuai script.