ابزارک های خود را به راحتی بسازید - شمارنده BPM سریع: 6 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:52

برنامه های وب مکان متداولی هستند ، اما برنامه های وب که نیازی به دسترسی به اینترنت ندارند ، نیستند.

در این مقاله به شما نشان می دهم که چگونه یک BPM Counter را در یک صفحه ساده HTML همراه با جاوا اسکریپت وانیل ایجاد کردم (اینجا را ببینید). در صورت بارگیری ، این ویجت می تواند به صورت آفلاین استفاده شود - برای نوازندگانی که می خواهند ایجاد کنند اما همیشه به اینترنت دسترسی ندارند ، ایده آل است. حتی بهتر ، با استفاده از برنامه داشبورد OSX (که قبلاً هرگز مفید نبود) ، می توانیم از این شمارنده BPM سریعتر استفاده کنیم.

مرحله 1: چگونه باید باشد؟

بدیهی است که پاسخ به س questionال یک نظر است. موضع من این است که باید بسیار ساده باشد و تنها آنچه را که یک شمارنده BPM برای آن نیاز دارد انجام دهد: تعداد ضربان در دقیقه را بشمارد. بنابراین ، تنها چیزی که باید باشد یک دکمه و مقدار شمارش است.

مرحله 2: منطق

برآورد BPM به سادگی اندازه گیری زمان بین دو ضربه متوالی و محاسبه چند مورد از این تعداد در یک دقیقه است.

let prev_click = new date ()؛ const getBPM = function () {const currentTime = new date ()؛ const interval = (currentTime - prev_click)/1000 ؛ const bpm = 60/فاصله ؛ prev_click = currentTime؛ ضربان در دقیقه بازگشت ؛ } get_bpm ()؛ // به عنوان مثال. 120

من این کار را با میانگین 3 ضربه قبلی مانند این ادامه دادم:

میانگین const = 3؛

const prev_bpms = [60]؛ let prev_click = new Date () const getBPM = تابع () {const currentTime = تاریخ جدید ()؛ const interval = (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 ('. clicker button'). 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 = new Audio (‘./ 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 = تابع () {const button = document.querySelector ('دکمه پخش کننده') ؛ if (! isPlayerPlaying) {button.innerHTML = '◼'؛ bpmRepeaterId = setInterval (بیپ ، bpmInterval) ؛ } else {button.innerHTML = '▶'؛ clearInterval (bpmRepeaterId) ؛ } isPlayerPlaying =! isPlayerPlaying؛ }؛

مرحله 4: همه چیز را با هم ترکیب کنید

در حال حاضر همه ویژگی ها را کنار هم قرار داده و اندکی استایل (که قصد توضیح آن را ندارم) اضافه کرده ایم ، این محصول نهایی را داریم:

من نمی دانم مردم واقعاً چقدر می خواهند مستقیماً در مقاله ببینند ، بنابراین کد کامل را در https://gitlab.com/t3chflicks/bpm-counter پیدا کنید.

مرحله 5: استفاده موثر (فقط کاربران OSX)

اگر قبلاً از مک استفاده کرده اید ، ممکن است با برنامه داشبورد اصلی برخورد کرده باشید ، اما احتمالاً مدت زیادی نخواهید ماند.

من هرگز واقعاً از آن استفاده نکرده ام … تا کنون. در Safari می توانید روی صفحه راست کلیک کنید ، که گاهی باعث می شود یک انتخاب عمل ظاهر شود از جمله باز شدن در داشبورد…

با کلیک روی این مورد ، ایجاد کننده ویجت صفحه وب به شما نشان داده می شود. می توانید قسمتی از صفحه را که می خواهید به داشبورد خود اضافه کنید انتخاب کنید. این یک ویژگی بسیار جالب است ، اما در مورد ما ، این یک ویژگی فوق العاده عالی است. با باز کردن شمارنده BPM که ما تازه ساخته ایم ، می توانید جعبه را مانند این انتخاب کنید:

اکنون از میانبر کلید F12 استفاده کنید. رونق. هرگز ایجاد ویجت توسط خود ، به این راحتی و به آسانی نبوده است.

مرحله ششم: یادداشت ها

شاید برای شما این سوال پیش آمده باشد که چرا این ویژگی ویژگی پخش مترونوم را شامل نمی شود. وقتی سعی کردم از آن در داشبورد استفاده کنم ، برنامه صدا را به طور قابل اطمینان پخش نمی کرد: (اما حداقل منطق می تواند به راحتی آن قسمت را انجام دهد.

و دلیل اینکه نحوه ایجاد صداها را به دو روش متفاوت به شما نشان داد این است که نسخه Audio Context با استفاده از سینتی سایزر در داشبورد کار نمی کند.

در نهایت ، شما نمی توانید به سادگی روی F12 کلیک کنید و برای به دست آوردن سرعت از نوار فاصله استفاده کنید ، باید مستقیماً بر روی دکمه ، که یک رتبه پایین است ، کلیک کنید. اما من فکر می کنم شاید از این به بعد ویجت های کوچکی به این شکل باشد. اگر ایده جالبی در این زمینه دارید ، وقتی آنها را اجرا کردید به من نشان دهید:)

در لیست پست ما ثبت نام کنید!

و بله ، T3chFlicks را بررسی کنید - ما چیزهایی می سازیم!