اصنع أدواتك الخاصة بسهولة - عداد BPM السريع: 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:36

تعد تطبيقات الويب مكانًا شائعًا ، لكن تطبيقات الويب التي لا تتطلب الوصول إلى الإنترنت ليست كذلك.

في هذه المقالة ، أريكم كيف صنعت عداد BPM في صفحة HTML بسيطة مقترنة بجافا سكريبت الفانيليا (انظر هنا). في حالة التنزيل ، يمكن استخدام هذه الأداة في وضع عدم الاتصال - وهي مثالية للموسيقيين الذين يرغبون في الإنشاء ولكن ليس لديهم دائمًا إمكانية الوصول إلى الإنترنت. والأفضل من ذلك ، باستخدام تطبيق لوحة معلومات OSX (الذي لم يكن يبدو مفيدًا من قبل) ، يمكننا جعل عداد BPM سريع الاستخدام للغاية.

الخطوة 1: كيف يجب أن تبدو؟

من الواضح أن الإجابة على السؤال هي مسألة رأي. موقفي هو أنه يجب أن يكون بسيطًا للغاية وأن يفعل فقط ما يحتاجه عداد BPM: حساب النبضات في الدقيقة. لذلك ، كل ما تحتاجه هو زر وقيمة عد.

الخطوة الثانية: المنطق

يعد تقدير BPM سهلاً مثل قياس الوقت بين دقاتين متتاليتين وحساب عدد النبضات التي يمكن أن تناسبك في دقيقة واحدة.

let prev_click = new Date ()؛ const getBPM = function () {const currentTime = new Date () ؛ الفاصل الزمني الثابت = (currentTime - prev_click) / 1000 ؛ const bpm = 60 / الفاصل الزمني ؛ prev_click = CurrentTime ؛ عودة نبضة في الدقيقة } get_bpm () ؛ // على سبيل المثال 120

لقد أخذت هذا إلى أبعد من ذلك من خلال حساب متوسط الضربات الثلاثة السابقة مثل هذا:

متوسط كونست = 3 ؛

const prev_bpms = [60] ، let prev_click = new Date () const getBPM = function () {const currentTime = new Date () ؛ الفاصل الزمني الثابت = (currentTime - prev_click) / 1000 ؛ const bpm = 60 / الفاصل الزمني ؛ prev_click = CurrentTime ؛ while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift () ؛ } prev_bpms.push (نبضة في الدقيقة) ؛ average_bpm = prev_bpms.reduce ((acc، cVal) => acc + cVal) / prev_bpms.length ؛ عودة نبضة في الدقيقة } get_bpm () ؛ // على سبيل المثال 120

أيضًا ، لا يريد الجميع الضغط على الزر ، ولكن ربما بدلاً من ذلك ، المفتاح:

// مشغل شريط المسافة

window.addEventListener ('keypress'، (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 / نبضة في الدقيقة * 1000 ؛ // mssetInterval (تنبيه ، bpmInterval) ؛ const beep = function () {if (! Context) Context = new AudioContext () ؛ مذبذب = Context.createOscillator () ؛ نوع المذبذب = "جيب" ؛ مذبذب.start (0) ؛ oscillator.connect (السياق الوجهة) ؛ setTimeout (مذبذب. فصل ، 150 ، سياق الوجهة) ؛ }

الآن دعنا نفعل شيئًا مشابهًا باستخدام ملف صوتي بدلاً من ذلك:

const click = صوت جديد ('./ cowbell.mp3') ؛

كونست نبضة في الدقيقة = 60 ؛ const bpmInterval = 60 / نبضة في الدقيقة * 1000 ؛ // ms setInterval (beep، bpmInterval)؛ const beep = function () {click.play ()؛ setTimeout (() => {click.pause () ؛ click.currentTime = 0.0 ؛} ، 150) ؛ } ؛

أخيرًا إضافة المنطق الذي يتحكم بهم:

// JSlet isPlayerPlaying = خطأ ؛

دع bpmRepeaterId ؛ const togglePlayerOutput = الوظيفة () {زر const = document.querySelector ('. player button') ؛ إذا (! isPlayerPlaying) {button.innerHTML = '◼'؛ bpmRepeaterId = setInterval (تنبيه ، bpmInterval) ؛ } else {button.innerHTML = '▶'؛ clearInterval (bpmRepeaterId) ؛ } isPlayerPlaying =! isPlayerPlaying؛ } ؛

الخطوة 4: وضع كل ذلك معًا

الآن بتجميع كل الميزات معًا وإضافة القليل من التصميم (الذي لن أشرحه) ، لدينا هذا المنتج النهائي:

لا أعرف مقدار الشفرة التي يريد الأشخاص حقًا رؤيتها مباشرةً في المقالة ، لذا ابحث عن الشفرة الكاملة على

الخطوة 5: الاستخدام الفعال (مستخدمو OSX فقط)

إذا كنت قد استخدمت جهاز Mac من قبل ، فربما تكون قد عثرت على تطبيق Dashboard الأصلي ، ولكن من المحتمل أنك لن تبقى طويلاً.

لم أستخدمه أبدًا … حتى الآن. في Safari ، يمكنك النقر بزر الماوس الأيمن على الصفحة ، مما يؤدي أحيانًا إلى ظهور اختيار إجراء منبثق بما في ذلك الفتح في لوحة القيادة …

سيؤدي النقر فوق هذا إلى إظهار مُنشئ عنصر واجهة مستخدم لصفحة الويب. يمكنك تحديد جزء من الصفحة الذي ترغب في إضافته إلى لوحة التحكم الخاصة بك. هذه ميزة رائعة جدًا ، ولكن بالنسبة إلى حالتنا ، إنها ميزة رائعة للغاية. عند فتح عداد BPM الذي أنشأناه للتو ، يمكنك تحديد المربع مثل هذا:

الآن استخدم اختصار المفتاح F12. فقاعة. لم يكن إنشاء الأدوات بنفسك بهذه السهولة على الإطلاق ، بسرعة وسهولة.

الخطوة 6: ملاحظات

قد تتساءل عن سبب عدم تضمين هذا الخيار لميزة تشغيل المسرع. عندما حاولت استخدامه في لوحة القيادة ، لن يقوم البرنامج بتشغيل الصوت بشكل موثوق: (ولكن على الأقل يمكن أن يقوم Logic بهذا الجزء بسهولة.

والسبب في أنني أوضحت لك كيفية إنشاء الأصوات بطريقتين مختلفتين هو أن إصدار سياق الصوت باستخدام مُركِّب لن يعمل داخل لوحة القيادة.

أخيرًا ، لا يمكنك ببساطة النقر فوق F12 والمضي قدمًا في استخدام شريط المسافة للحصول على الإيقاع ، يجب عليك النقر فوق الزر مباشرةً ، وهو ما يعد رجوعًا إلى إصدار أقدم. لكنني أعتقد أن هذا قد يكون هو الطريقة التي أصنع بها أدوات صغيرة من الآن فصاعدًا. إذا كانت لديك أي أفكار رائعة لذلك ، أرني متى قمت بتنفيذها:)

إشترك بالقائمة البريدية الخاصة بنا!

ونعم ، تحقق من T3chFlicks - نحن نصنع الأشياء!