Voice — אפליקציית PWA להקלטת קול עם waveform חי ב-60fps במהלך ההקלטה, ספרייה מלאה של הקלטות שמורות ב-IndexedDB עם תמונות waveform, נגן מובנה עם 5 מהירויות ו-skip ±15, ותמלול אוטומטי בעברית דרך Web Speech API.
שלשת הטכנולוגיות הליבתיות
1. הקלטה: MediaRecorder + Web Audio
- MediaRecorder עם בחירת mime-type אדפטיבית (
webm/opusעדיף,mp4כ-fallback ל-iOS) - AudioContext + AnalyserNode רץ במקביל למקליט עבור הויזואליזציה
- getByteTimeDomainData ב-1024 samples → RMS → גובה הבר ב-canvas
- rolling buffer של 200 samples → bars מתחדשים מימין לשמאל ב-60fps
- שמירה כ-Blob ב-IndexedDB — לא בענן, לא Cloud, שום קובץ לא יוצא מהמכשיר
2. ויזואליזציה: Canvas Waveforms
- Live recording: gradient salmon→red, 200 bars, RAF loop, RMS-based amplitude
- Static thumbnails: 80 peaks קבועים שנדגמו פעם אחת מ-AudioBuffer בעת השמירה (
decodeAudioData→getChannelData(0)→ max-per-bin) - Detail page: full-width canvas עם 80 bars + playhead נע ב-RTL לפי
currentTime/duration - Click-to-seek על ה-waveform → מחושב לפי
xFromLeft / rect.widthעם RTL flip
3. תמלול: Web Speech API (Hebrew)
- SpeechRecognition עם
lang: 'he-IL',continuous: true,interimResults: true - ה-API לא מקבל קובץ — אבל הוא יכול להאזין למיקרופון בזמן ש-audio playback רץ ברקע, כך שהוא משחזר אודיו → טקסט בלולאה דרך הרמקול
- שמירת התמלול הסופי בכל הקלטה ב-IndexedDB
פיצ'רים נוספים
- 5 מהירויות — 0.75× / 1× / 1.25× / 1.5× / 2× (עם
preservesPitch: trueכדי לא לעוות את הקול) - Skip ±15 שניות עם vibration feedback
- Edit title ישירות בשדה הכותרת — שמירה אוטומטית ב-blur
- Web Share API עם file sharing (אם הדפדפן תומך) או fallback ל-download
- Permission gate מעוצב + desktop fallback אם
MediaRecorderלא קיים - Honeypot על recording קצרה מדי — פחות מ-0.4 שניות לא נשמר
טכנולוגיות
- MediaRecorder API עם adaptive mime-type selection (webm/opus → mp4 → fallback)
- AudioContext + AnalyserNode עם FFT 1024 לאמפליטודה
- AudioContext.decodeAudioData לדגימת peaks אחרי השמירה
- Web Speech API (
SpeechRecognition) עם Hebrew locale - HTML5 Audio עם
preservesPitchו-playbackRate - IndexedDB Blob storage — recordings עם time index
- Canvas 2D עם DPR-aware rendering (high-DPI displays)
- Vibration API — קצר על play, ארוך על start/stop
- Web Share API עם
navigator.canShare({ files })detection - Service Worker + PWA installable
עיצוב
פלטה salmon + warm-cream + recording red — אסתטיקה של אולפן הקלטות חמים. נבדלת מ-coral (Drop) ו-rose (Pulse) ע"י הסלמון הבהיר יותר ועומק האדום בגרדיאנטים. רקע cocoa עמוק #180c0a · salmon #f87171 · recording red #ef4444 · cream #fef9c3.
טיפוגרפיה — Heebo + Frank Ruhl Libre לכותרות + IBM Plex Mono לטיימר וזמני playback (300 weight, tabular-nums). Glassmorphic recorder hero עם gradient border, ambient salmon orbs נעות ברקע.
