O'zingizning vidjetlaringizni osongina yarating - BPM tez hisoblagichi: 6 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:23

Veb -ilovalar keng tarqalgan joy, lekin Internetga kirishni talab qilmaydigan veb -ilovalar emas.

Ushbu maqolada men sizga oddiy HTML -sahifada vanil javascript bilan BPM hisoblagichini qanday yaratganimni ko'rsataman (bu yerga qarang). Agar yuklangan bo'lsa, bu vidjetni oflayn rejimda ishlatish mumkin - bu yaratmoqchi bo'lgan, lekin har doim ham Internetga kira olmaydigan musiqachilar uchun ideal. Yaxshisi, OSX asboblar paneli ilovasidan foydalanib (bu hech qachon unchalik foydali bo'lmagan), biz bu BPM hisoblagichini ishlatishni tezlashtirishimiz mumkin.

1 -qadam: Qanday ko'rinishi kerak?

Shubhasiz, savolga javob - bu fikr. Mening pozitsiyam shundan iboratki, bu juda oddiy va faqat BPM hisoblagichiga kerak bo'lgan narsani bajarishi kerak: Beats Per Minute. Shuning uchun, faqat tugma va hisoblash qiymati bo'lishi kerak.

2 -qadam: Mantiq

BPMni hisoblash, ketma -ket ikki zarba orasidagi vaqtni o'lchash va bir daqiqada qancha soniga to'g'ri kelishini hisoblash kabi oson.

prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const oralig'i = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; bpm qaytarish; } get_bpm (); // masalan 120

Men oldingi 3 ta zarbani quyidagicha o'rtacha hisoblab, oldinga qadam tashladim:

const o'rtacha = 3;

const prev_bpms = [60]; prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const oralig'i = (currentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = currentTime; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; bpm qaytarish; } get_bpm (); // masalan 120

Bundan tashqari, hamma ham tugmani bosishni xohlamaydi, balki uning o'rniga kalit bo'lishi mumkin:

// bo'sh joy tugmasi

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // lahzali qobiliyat document.querySelector ('. bosish tugmasi'). focus ();

Endi foydalanuvchilar sahifa yuklangach, bo'sh joydan foydalanishlari mumkin.

3 -qadam: BPM -ni tinglang

Siz BPM -ni tanladingiz, lekin endi siz uni ijro qilishni xohlaysiz, shunda siz o'zingiz yoqtirgan tempga o'tishingiz mumkin.

Buning uchun biz ovoz chiqarishimiz kerak. Lekin qanday? AudioAPI brauzerida ikkita variant bor, ovozli faylni ishlatish yoki sintezator yaratish. Biz birinchi navbatda sintezatordan foydalanib ovozli signal chiqaramiz:

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

kontekst, osilator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (signal, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); osilator = kontekst.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); osilator.konnekt (kontekst. maqsad); setTimeout (oscillator.disconnect, 150, context.destination); }

Endi audio fayl yordamida shunga o'xshash ishni qilaylik:

const click = yangi audio (‘./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (signal, bpmInterval); const bip = funksiya () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Nihoyat, ularni boshqaradigan mantiqni qo'shish:

// JSlet isPlayerPlaying = noto'g'ri;

bpmRepeaterId ruxsat bering; const togglePlayerOutput = function () {const tugma = document.querySelector ('. o'yinchi tugmasi'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (signal, bpmInterval); } boshqa {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

4 -qadam: Hammasini bir joyga to'plash

Endi biz barcha funktsiyalarni birlashtiramiz va ozgina uslubni qo'shamiz (men buni tushuntirmayman), bizda oxirgi mahsulot bor:

Odamlar to'g'ridan-to'g'ri maqolada qancha kodni ko'rishni xohlashini bilmayman, shuning uchun to'liq kodni https://gitlab.com/t3chflicks/bpm-counter saytidan toping.

5 -qadam: Samarali foydalanish (faqat OSX foydalanuvchilari uchun)

Agar siz ilgari mac ishlatgan bo'lsangiz, siz boshqaruv paneli ilovasida qoqilib qolgandirsiz, lekin ehtimol siz uzoq qolmaysiz.

Men hozirgacha uni hech qachon ishlatmaganman … Safari -da siz sahifani o'ng tugmasini bosishingiz mumkin, bu ba'zida harakatlar tanlovi paydo bo'lishiga olib keladi, shu jumladan asboblar panelida ochiladi …

Buni bosish sizga veb -sahifa vidjetlarini yaratuvchisini ochib beradi. Siz boshqaruv paneliga qo'shmoqchi bo'lgan sahifaning bir qismini tanlashingiz mumkin. Bu juda ajoyib xususiyat, lekin biz uchun bu juda zo'r xususiyatdir, biz hozir ishlab chiqargan BPM hisoblagichini ochib, siz shunday qutini tanlashingiz mumkin:

Endi F12 tugmachasini ishlating. BOOM. Vidjetlarni o'zingiz tez va oson yaratish hech qachon oson bo'lmagan.

6 -qadam: Eslatmalar

Siz nima uchun bu metronomni ijro etish xususiyatini o'z ichiga olmaydi, degan savol tug'ilishi mumkin. Men uni asboblar panelida ishlatmoqchi bo'lganimda, dastur ovozni ishonchli tarzda ijro eta olmaydi: (Lekin hech bo'lmaganda "Mantiq" bu qismni osonlikcha bajarishi mumkin).

Sizga tovushlarni ikki xil usulda qanday yaratishni ko'rsatganimning sababi shundaki, sintezatordan foydalangan holda Audio Context versiyasi asboblar panelida ishlamaydi.

Va nihoyat, siz F12 tugmachasini bosa olmaysiz va tezlikni olish uchun bo'sh joydan foydalanishni davom ettira olmaysiz, bu tugmani to'g'ridan -to'g'ri bosishingiz kerak, bu past darajaga tushish. Ammo menimcha, bundan buyon kichik vidjetlar yasashim mumkin. Agar sizda bu borada ajoyib fikrlar bo'lsa, ularni qachon amalga oshirganingizni ko'rsating:)

Bizning pochta ro'yxatimizga a'zo bo'ling!

Ha, T3chFlicks -ni ko'rib chiqing - biz narsalar tayyorlaymiz!