Obsah:
- Krok 1: Ako by mal vyzerať?
- Krok 2: Logika
- Krok 3: Počúvajte svoj BPM
- Krok 4: Dajte to všetko dohromady
- Krok 5: Efektívne používanie (iba používatelia OSX)
- Krok 6: Poznámky
Video: Ľ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!
Odporúča:
Vytvorte si vlastné mapy pre svoj Garmin GPS: 8 krokov (s obrázkami)
Vytvorte si vlastné mapy pre svoj Garmin GPS: Ak máte GPS Garmin určený na turistiku a iné outdoorové aktivity (vrátane GPSMAP, eTrex, Colorado, Dakota, Oregon a Montana, okrem iných), nemusíte uspokojte sa s mapami holých kostí, ktoré boli na ňom vopred načítané. E
Vytvorte si vlastné retro Nixie hodiny s RTC!: 7 krokov (s obrázkami)
Vytvorte si vlastné retro nixie hodiny s RTC!: V tomto projekte vám ukážem, ako vytvoriť retro nixie hodiny. To znamená, že vám ukážem, ako môžete ovládať nixie elektrónky pomocou vysokonapäťového zdroja jednosmerného prúdu, a potom spojím 4 nixie elektrónky s Arduino, hodinami v reálnom čase (RTC) a cu
Vytvorte si vlastné okolité osvetlenie s Raspberry Pi Zero: 5 krokov (s obrázkami)
Vytvorte si vlastné okolité osvetlenie s Raspberry Pi Zero: V tomto projekte vám ukážem, ako skombinovať Raspberry Pi Zero s niekoľkými doplnkovými časťami, aby ste do televízora pridali efekt okolitého osvetlenia, ktorý zvyšuje zážitok zo sledovania. Začnime
Vytvorte si vlastné ESC: 5 krokov (s obrázkami)
Vytvorte si vlastné ESC: V tomto projekte najskôr ukážem, ako funguje bežný ESC, a potom vytvorím obvod pozostávajúci z Arduino Nano, integrovaného obvodu ovládača motora L6234 a niekoľkých doplnkových komponentov na vybudovanie ESC pre domácich majstrov. Začnime
DIY musiLED, synchronizované LED diódy s hudbou s jediným kliknutím pre aplikácie Windows a Linux (32-bitové a 64-bitové). Ľahko sa obnovuje, ľahko sa používa a ľahko sa prenáša: 3 kroky
DIY musiLED, synchronizované LED diódy s hudbou s jediným kliknutím pre aplikácie Windows a Linux (32-bitové a 64-bitové). Ľahko sa obnovuje, ľahko sa používa a ľahko sa prenáša: Tento projekt vám pomôže pripojiť 18 LED diód (6 červených + 6 modrých + 6 žltých) k doske Arduino a analyzovať signály zvukovej karty počítača v reálnom čase a prenášať ich do LED diódy, ktoré ich rozsvietia podľa rytmických efektov (Snare, High Hat, Kick)