Ľahko si vytvorte vlastné widgety - rýchle počítadlo BPM: 6 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Webové aplikácie sú bežným miestom, ale webové aplikácie, ktoré nevyžadujú prístup na internet, nie sú.

V tomto článku vám ukážem, ako som vytvoril počítadlo BPM na jednoduchej stránke HTML spojenej s vanilkovým javascriptom (pozri tu). Ak si ho stiahnete, môžete ho použiť offline - ideálny pre hudobníkov, ktorí chcú tvoriť, ale nemajú vždy prístup na internet. Ešte lepšie je, že pomocou aplikácie dashboard OSX (ktorá sa nám nikdy predtým nezdala taká užitočná) dokážeme tento čítač BPM mimoriadne rýchlo používať.

Krok 1: Ako by mal vyzerať?

Je zrejmé, že odpoveď na otázku je vecou názoru. Môj postoj je, že by mal byť veľmi jednoduchý a robiť len to, čo potrebuje počítadlo BPM: počítať údery za minútu. Preto musí byť iba tlačidlo a hodnota počítania.

Krok 2: Logika

Odhad BPM je rovnako jednoduchý ako meranie času medzi dvoma sekvenčnými údermi a výpočet, koľko z nich by ste mohli zmestiť za minútu.

nech prev_click = nový dátum (); const getBPM = funkcia () {const currentTime = nový dátum (); interval interval = (currentTime - predchádzajúci_klik)/1000; konšt. bpm = 60/interval; prev_click = currentTime; vrátiť bpm; } get_bpm (); // napr. 120

Posunul som to ďalej a spriemeroval som tri predchádzajúce beaty takto:

priemer priemerov = 3;

const prev_bpms = [60]; nech prev_click = nový dátum () const getBPM = funkcia () {const currentTime = nový dátum (); interval interval = (currentTime - predchádzajúci_klik) / 1000; konšt. 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; vrátiť bpm; } get_bpm (); // napr. 120

Tiež nie každý chce stlačiť tlačidlo, ale namiesto toho možno kláves:

// medzerník

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // okamžitá schopnosť document.querySelector ('. tlačidlo klikača'). focus ();

Teraz môžu používatelia tiež klepnúť na medzerník hneď po načítaní stránky.

Krok 3: Počúvajte svoj BPM

Klepli ste na svoj BPM, ale teraz ho chcete prehrať, aby ste si mohli jamovať podľa svojho obľúbeného tempa.

Aby sme to urobili, musíme vydať zvuk. Ale ako? V prehliadači AudioAPI máme zabudované dve možnosti, použiť zvukový súbor alebo vytvoriť syntetizátor. Najprv použijeme syntetizátor na vytvorenie zvukového signálu:

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

nechajte kontext, oscilátor; konšt. bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (pípnutie, bpmInterval); konšt píp = funkcia () {if (! kontext) kontext = nový AudioContext (); oscilátor = kontext.createOscillator (); oscillator.type = "sine"; oscillator.start (0); oscilátor.pripojenie (kontext.destinácia); setTimeout (oscillator.disconnect, 150, context.destination); }

Teraz urobme podobnú vec pomocou zvukového súboru:

const click = nový zvuk („./ cowbell.mp3“);

konšt. bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (píp, bpmInterval); const píp = funkcia () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0,0;}, 150); };

Nakoniec pridáme logiku, ktorá ich ovláda:

// JSlet isPlayerPlaying = false;

nech bpmRepeaterId; const togglePlayerOutput = funkcia () {const button = document.querySelector ('. tlačidlo prehrávača'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pípnutie, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Krok 4: Dajte to všetko dohromady

Keď teraz spojíme všetky funkcie a pridáme trochu štýlu (čo nebudem vysvetľovať), máme tento konečný produkt:

Neviem, koľko kódu chcú ľudia skutočne vidieť priamo v článku, preto nájdete úplný kód na

Krok 5: Efektívne používanie (iba používatelia OSX)

Ak ste už používali mac, možno ste natrafili na natívnu aplikáciu Dashboard, ale pravdepodobne nezostanete dlho.

Nikdy som to nepoužil … až doteraz. V prehliadači Safari môžete kliknúť pravým tlačidlom na stránku, čo niekedy spôsobí, že sa otvorí výber akcie vrátane otvorenia na paneli …

Po kliknutí na toto tlačidlo sa vám zobrazí tvorca miniaplikácií na webovej stránke. Môžete vybrať časť stránky, ktorú chcete pridať na hlavný panel. Je to celkom skvelá funkcia, ale pre náš prípad je to super skvelá funkcia. Po otvorení počítadla BPM, ktoré sme práve vytvorili, môžete vybrať pole takto:

Teraz použite klávesovú skratku F12. BOOM. Nikdy nebolo také jednoduché vytvárať widgety sami, rýchlo a jednoducho.

Krok 6: Poznámky

Možno sa čudujete, prečo tento neobsahuje funkciu prehrávania metronómu. Keď som sa to pokúsil použiť na palubnej doske, program nebude spoľahlivo prehrávať zvuk: (Ale aspoň časť môže Logic ľahko zvládnuť.

Dôvod, prečo som vám ukázal, ako vytvárať zvuky dvoma rôznymi spôsobmi, je ten, že verzia zvukového kontextu pomocou syntetizátora by nefungovala na prístrojovej doske.

Nakoniec nemôžete jednoducho kliknúť na kláves F12 a pokračovať v používaní medzerníka na dosiahnutie tempa. Musíte kliknúť priamo na tlačidlo, ktoré je prechodom na staršiu verziu. Myslím si však, že odteraz môžem takto vytvárať malé miniaplikácie. Ak máte na to nejaké skvelé nápady, ukážte mi, keď ste ich implementovali:)

Zaregistrujte sa do nášho zoznamu adries!

A áno, pozrite sa na T3chFlicks - vyrábame veci!