צור ווידג'טים משלך בקלות - מונה BPM מהיר: 6 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:12

אפליקציות אינטרנט הן מקום נפוץ, אך אפליקציות אינטרנט שאינן דורשות גישה לאינטרנט אינן כאלה.

במאמר זה אני מראה לך כיצד הכנתי מונה BPM בדף HTML פשוט בשילוב עם JavaScript וניל (ראה כאן). אם מורידים אותו, ניתן להשתמש ביישומון זה במצב לא מקוון - אידיאלי עבור מוזיקאים שרוצים ליצור אך לא תמיד יש להם גישה לאינטרנט. אפילו טוב יותר, באמצעות אפליקציית לוח המחוונים של OSX (שמעולם לא נראה שימושי קודם לכן), נוכל להפוך את מונה BPM למהיר במיוחד לשימוש.

שלב 1: איך זה צריך להיראות?

ברור שהתשובה לשאלה היא עניין של דעה. העמדה שלי היא שזה צריך להיות סופר פשוט ולעשות רק מה שמונה BPM צריך: לספור פעימות לדקה. לכן כל מה שצריך הוא כפתור וערך ספירה.

שלב 2: ההיגיון

הערכת BPM קלה כמו מדידת הזמן בין שתי פעימות עוקבות וחישוב כמה כאלה תוכל להתאים בדקה.

תן prev_click = תאריך חדש (); const getBPM = function () {const currentTime = new Date (); מרווח const = (currentTime - prev_click)/1000; const bpm = 60/מרווח; prev_click = currentTime; חזור לדקה לדקה; } get_bpm (); // למשל 120

לקחתי את זה רחוק יותר באמצעות ממוצע של 3 הפעימות הקודמות כך:

ממוצע const = 3;

const prev_bpms = [60]; תן prev_click = תאריך חדש () const getBPM = function () {const currentTime = new Date (); מרווח const = (currentTime - prev_click) / 1000; const bpm = 60 / מרווח; prev_click = currentTime; בעוד (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); ממוצע_בפ"מ = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; חזור לדקה לדקה; } get_bpm (); // למשל 120

כמו כן, לא כולם רוצים ללחוץ על הכפתור אבל אולי במקום זאת על מקש:

// מפעיל מקש רווח

window.addEventListener ('מקש', (e) => {if (e.code === 32) getBPM ();}); // יכולת מיידית document.querySelector ('כפתור לחיצה'). focus ();

כעת, משתמשים יכולים גם להקיש באמצעות מקש הרווח ברגע שהעמוד נטען.

שלב 3: שמע את BPM שלך

הקשת על ה- BPM שלך, אבל עכשיו אתה רוצה להשמיע אותו כדי שתוכל להתקדם לקצב האהוב עליך.

לשם כך עלינו להשמיע קול. אבל איך? יש לנו שתי אפשרויות מובנות בתוך הדפדפן AudioAPI, להשתמש בקובץ צליל או ליצור סינתיסייזר. תחילה נשתמש בסינתיסייזר ליצירת צפצוף:

const AudioContext = window. AudioContext || window.webkitAudioContext;

תן הקשר, מתנד; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (ביפ, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); מתנד = context.createOscillator (); oscillator.type = "סינוס"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

עכשיו בואו נעשה דבר דומה באמצעות קובץ שמע במקום:

const click = אודיו חדש ('./ cowbell.mp3');

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (ביפ, bpmInterval); const beep = function () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

לבסוף הוספת ההיגיון השולט בהם:

// JSlet isPlayerPlaying = false;

אפשר bpmRepeaterId; const togglePlayerOutput = function () {כפתור const = document.querySelector ('כפתור שחקן'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (ביפ, bpmInterval); } אחר {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

שלב 4: חיבור הכל

כעת, אם נחבר את כל התכונות והוסיף מעט סטיילינג (מה שאני לא מתכוון להסביר), יש לנו את המוצר הסופי הזה:

אני לא יודע כמה קוד אנשים באמת רוצים לראות ישירות במאמר, אז מצא את הקוד המלא ב

שלב 5: שימוש יעיל (משתמשי OSX בלבד)

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

אף פעם לא ממש השתמשתי בו … עד עכשיו. ב- Safari אתה יכול ללחוץ לחיצה ימנית על הדף, מה שלפעמים גורם לבחירת פעולה לצוץ כולל פתיחה בלוח המחוונים …

לחיצה על זה תגלה לך יוצר יישומונים של דפי אינטרנט. תוכל לבחור חלק מהדף שתרצה להוסיף ללוח המחוונים שלך. זוהי תכונה די מגניבה, אבל במקרה שלנו, זוהי תכונה סופר מגניבה. פתיחת מונה BPM שעשינו זה עתה, תוכל לבחור את התיבה כך:

כעת השתמש בקיצור המקש F12. בּוּם. מעולם לא היה כל כך פשוט ליצור ווידג'טים בעצמך, במהירות ובקלות.

שלב 6: הערות

אתה עשוי לתהות מדוע זה אינו כולל את תכונת ההפעלה של מטרונום. כאשר ניסיתי להשתמש בו בלוח המחוונים, התוכנית לא תשמיע את האודיו באופן אמין: (אבל לפחות לוגיקה יכולה לבצע את החלק הזה בקלות.

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

לבסוף, אתה לא יכול פשוט ללחוץ על F12 ולהמשיך להשתמש בסרגל הרווח כדי לקבל את הקצב, עליך ללחוץ ישירות על הכפתור, שהוא שדרוג לאחור. אבל אני חושב שזה יכול להיות איך אני מכין יישומונים קטנים מעכשיו. אם יש לך רעיונות מגניבים לכך, הראה לי מתי יישמת אותם:)

הירשם לרשימת התפוצה שלנו!

וכן, בדוק את T3chFlicks - אנחנו מייצרים דברים!