Öz Widget'larınızı asanlıqla yaradın - Sürətli BPM Sayacı: 6 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:43

Veb tətbiqləri ümumi bir yerdir, ancaq internetə ehtiyacı olmayan veb tətbiqləri belə deyil.

Bu yazıda vanil javascript ilə birləşdirilmiş sadə bir HTML səhifəsində BPM sayğacını necə hazırladığımı sizə göstərəcəyəm (bura baxın). Yüklənərsə, bu widget oflayn istifadə edilə bilər - yaratmaq istəyən, lakin həmişə internetə çıxışı olmayan musiqiçilər üçün idealdır. Daha yaxşı, OSX tablosuna tətbiqini istifadə edərək (əvvəllər bu qədər faydalı görünməmişdi) bu BPM Sayğacını daha sürətli istifadə edə bilərik.

Addım 1: Nəyə bənzəməlidir?

Aydındır ki, sualın cavabı fikirdir. Mənim mövqeyim çox sadə olmalı və yalnız BPM sayğacının ehtiyac duyduğu şeyi etməlidir: Beats Per Minute. Buna görə də, lazım olan hər şey bir düymə və bir sayma dəyəridir.

Addım 2: Məntiq

BPM -ni hesablamaq, iki ardıcıl atış arasındakı vaxtı ölçmək və bir dəqiqədə bunlardan neçə -nə sığa biləcəyinizi hesablamaq qədər asandır.

prev_click = yeni tarix (); const getBPM = function () {const currentTime = yeni tarix (); const intervalı = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; dönüş bpm; } get_bpm (); // məs. 120

Əvvəlki 3 vuruşu ortalamaqla bunu daha da irəli apardım:

const ortalaması = 3;

const prev_bpms = [60]; prev_click = new Date () const getBPM = function () {const currentTime = new Date () edək; const interval = (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; dönüş bpm; } get_bpm (); // məs. 120

Ayrıca, hər kəs düyməni basmaq istəmir, ancaq bunun əvəzinə bir düymə ola bilər:

// boşluq tetiği

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // ani qabiliyyət document.querySelector ('. tıklama düyməsi'). fokus ();

İndi istifadəçilər səhifə yüklənən kimi boşluq çubuğundan istifadə edə bilərlər.

Addım 3: BPM -ni dinləyin

BPM -ə toxundunuz, amma indi onu oynamaq istəyərsiniz ki, sevdiyiniz tempə davam edə biləsiniz.

Bunun üçün səs çıxarmalıyıq. Amma necə? AudioAPI brauzerində iki seçim var, səs faylı istifadə edin və ya sintezator yaradın. Bir səs siqnalı yaratmaq üçün əvvəlcə sintezatordan istifadə edəcəyik:

const AudioContext = pəncərə. AudioContext || window.webkitAudioContext;

kontekstə, osilatora icazə verin; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (bip, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); osilator = kontekst.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); osilator.connect (kontekst. təyinat); setTimeout (oscillator.disconnect, 150, context.destination); }

İndi bir Audio faylı istifadə edərək oxşar bir şey edək:

const klik = yeni Səs (‘./ cowbell.mp3’);

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

Nəhayət onları idarə edən məntiqi əlavə edin:

// JSlet isPlayerPlaying = yalan;

bpmRepeaterId icazə verin; const togglePlayerOutput = function () {const düyməsi = document.querySelector ('. oyunçu düyməsi'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (bip, bpmInterval); } başqa {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Addım 4: Hamısını bir yerə yığın

İndi bütün xüsusiyyətləri bir araya gətirərək və bir az üslub əlavə edərək (izah etməyəcəyəm) bu son məhsula sahibik:

İnsanların doğrudan da məqalədə nə qədər kod görmək istədiklərini bilmirəm, buna görə də tam kodu https://gitlab.com/t3chflicks/bpm-counter ünvanında tapa bilərsiniz.

Addım 5: Effektiv İstifadə (Yalnız OSX İstifadəçiləri üçün)

Daha əvvəl bir mac istifadə etmisinizsə, yerli Tablosuna Tətbiqində büdrəyə bilərdiniz, amma yəqin ki, uzun müddət qalmayacaqsınız.

İndiyə qədər heç vaxt istifadə etməmişəm … Safari -də səhifəni sağ vura bilərsiniz ki, bu da bəzən idarə panelində açıq olmaq da daxil olmaqla bir hərəkət seçiminin açılmasına səbəb olur …

Bunun üzərinə tıkladığınızda bir veb səhifəsi vidjet yaradıcısı görünəcək. Tablonuza əlavə etmək istədiyiniz səhifənin bir hissəsini seçə bilərsiniz. Bu olduqca sərin bir xüsusiyyətdir, amma bizim vəziyyətimiz üçün çox gözəl bir xüsusiyyətdir. Yeni hazırladığımız BPM sayğacını açaraq aşağıdakı kimi qutuyu seçə bilərsiniz:

İndi F12 düyməsinin qısa yolunu istifadə edin. PARTLAMA. Tez və asanlıqla vidjetlər yaratmaq heç vaxt asan olmamışdır.

Addım 6: Qeydlər

Bunun niyə metronome çalma xüsusiyyətini içermədiyini merak edə bilərsiniz. İdarə panelində istifadə etməyə çalışdığımda, proqram proqramı etibarlı şəkildə səsləndirə bilməz: (Ancaq ən azı Məntiq o hissəni asanlıqla edə bilər.

Səslərin iki fərqli şəkildə necə yaradılacağını göstərməyimin səbəbi, sintezatordan istifadə edən Audio Kontekst versiyasının tablosunda işləməməsidir.

Nəhayət, F12 düyməsini basa və tempi əldə etmək üçün boşluq çubuğundan istifadə etməyə davam edə bilməzsən, aşağı düşmə olan düyməni birbaşa vurmalısan. Ancaq düşünürəm ki, bundan sonra kiçik vidjetlər hazırlamağım belə ola bilər. Bunun üçün maraqlı fikirləriniz varsa, bunları həyata keçirdiyiniz zaman göstərin:)

Poçt siyahımıza daxil olun!

Bəli, T3chFlicks -ə baxın - biz məhsullar hazırlayırıq!