Tempo

על האפליקציה

Tempo היא אפליקציית רשת מתקדמת (PWA) שהיא מטרונום מקצועי — לא צעצוע web. תזמון מדויק לפי audioContext.currentTime (לא setInterval שמחמיץ ביטים), clicks סינתטיים נקיים, ו-tap-tempo שעובד מ-2 לחיצות.

הזז את ה-slider, הקש 4 פעמים בקצב שאתה רוצה, או בחר מהירות מהקיצורים — והכדור פועם, נקודות הביט מאירות, צליל ה-accent על הביט הראשון של כל תיבה.

מטרונום שמחמיץ ביט אחד כל 30 שניות הוא לא מטרונום — הוא הצעה.

לחצו לנסות בעצמכם → ofir.zbang.net/tempo

האפליקציה רצה כאן בייצור — אפשר להתקין על המסך הבית, לפתוח עם מסך כבוי, ולנגן ברקע.

יכולות מרכזיות

• Web Audio Scheduler — ה-scheduler מתזמן ביטים 100ms קדימה לפי currentTime, לולאת bookkeeping רצה כל 25ms. הביטים מתפצים על המכשיר ב-clock נפרד מהדפדפן — דיוק במילישנייה גם אם ה-tab ברקע.
• Sub-divisions — רבעים, שמיניות, שלשות, שש-עשרים. כל subdivision מקבלת click רך יותר, רק ה-main beats מקבלים את ה-click החזק.
• Time Signatures — 2/4, 3/4, 4/4, 6/8, 7/8. נקודות ביט במספר המתאים, accent על הראשונה.
• Accent ראשון של תיבה — צליל גבוה יותר (1200Hz vs 800Hz) + שינוי צבע הכדור לזהב + ring expansion.
• Tap Tempo — לחץ 2-6 פעמים בקצב, האפליקציה מחשבת ממוצע מרווחים ומציבה את ה-BPM. גם דרך מקש Space.
• Quickset BPM — 60 (איטי), 80 (בלדה), 100, 120 (מארץ׳), 140 (מהיר), 180 (פאנק).
• Long-press על +/− — שינוי מהיר של BPM.
• שמירת מהירויות — תן שם ("סולו גיטרה", "אימון ריצה") → IndexedDB. טעינה בלחיצה.
• Wake Lock — מסך לא ננעל בזמן ניגון.

ארכיטקטורת ה-PWA

• AudioContext + Oscillator + GainNode — כל click נוצר חדש: sine wave + envelope (attack 1ms, decay 50ms exponential).
• Look-ahead scheduler (Pattern של Chris Wilson) — setInterval(scheduler, 25) שדוחף נוטות 100ms קדימה אל ה-Web Audio queue.
• Visual sync — requestAnimationFrame לולאה שמשווה לpolicies queue מול audioContext.currentTime, מפעילה את הvisuals בדיוק כשהcurry נשמע.
• Tap detection — אגירת performance.now() של 6 הקשות אחרונות, חישוב ממוצע intervals → BPM. timeout 2s לאיפוס.
• IndexedDB — presets store + settings store (BPM/sig/sub persistent על פני visits).
• Service Worker — cache shell, runtime stale-while-revalidate.
• Vanilla JS, אפס תלויות — כ-32KB total.

עיצוב

• פלטה electric blue — #0084ff electric primary + #60a5fa light blue + #fbbf24 gold accent.
• כדור זוהר — radial gradient עם specular highlight, halo blur כתום בעת accent, פעימה synced לbeat.
• Beat dots — נקודות מאירות בקצב, ring pulse בכל accent.
• Sliders ו-chips — מבחר חלק של BPM, signature, subdivisions.

שימושים

• מוזיקאים — תרגול, חזרות, הקלטות.
• רקדנים — שמירת קצבים של שירים.
• רצים/מתאמני ספורט — קצב צעידה (180 BPM = ריצה אופטימלית).
• שירה — תרגול לפי tempo נכון.

הכל נשמר רק במכשיר שלך. אפס שרתים, אפס tracking.