Jednostavno napravite vlastite widgete - Brzi brojač BPM -a: 6 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

Web aplikacije su uobičajeno mjesto, ali web aplikacije koje ne zahtijevaju pristup internetu nisu.

U ovom članku pokazat ću vam kako sam napravio BPM brojač na jednostavnoj HTML stranici zajedno s vanilinom javascript (pogledajte ovdje). Ako se preuzme, ovaj se widget može koristiti izvanmrežno - idealan za glazbenike koji žele stvarati, ali nemaju uvijek pristup internetu. Još bolje, pomoću aplikacije nadzorne ploče OSX (koja se nikada prije nije činila tako korisnom), ovaj BPM brojač možemo učiniti izuzetno brzim za korištenje.

Korak 1: Kako bi to trebalo izgledati?

Očigledno je da je odgovor na pitanje stvar mišljenja. Moj je stav da bi trebao biti super jednostavan i raditi samo ono što BPM brojač treba: brojati otkucaje u minuti. Stoga sve što treba biti jest gumb i vrijednost brojanja.

Korak 2: Logika

Procjena BPM -a jednako je jednostavna kao i mjerenje vremena između dva uzastopna otkucaja i izračunavanje koliko njih možete uklopiti u minuti.

neka prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; povratni broj okretaja u minuti; } get_bpm (); // npr. 120

Ovo sam nastavio dalje tako što sam prosječno prikazao 3 prethodna takta:

const prosjek = 3;

const prev_bpms = [60]; neka prev_click = new Date () const getBPM = function () {const currentTime = new Date (); 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); prosječna_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; povratni broj okretaja u minuti; } get_bpm (); // npr. 120

Također, ne žele svi pritisnuti gumb, već možda tipku:

// okidač razmaknice

window.addEventListener ('pritiskanje tipke', (e) => {if (e.kod === 32) getBPM ();}); // trenutna sposobnost document.querySelector ('. gumb klikača'). focus ();

Sada korisnici također mogu dodirnuti pomoću razmaknice čim se stranica učita.

Korak 3: Čujte svoj BPM

Iskoristili ste svoj BPM, ali sada ga želite reproducirati kako biste mogli uskladiti svoj omiljeni tempo.

Da bismo to učinili, moramo proizvesti zvuk. Ali kako? Imamo dvije mogućnosti ugrađene u preglednik AudioAPI, upotrijebite zvučnu datoteku ili stvorite sintisajzer. Prvo ćemo upotrijebiti sintisajzer za stvaranje zvučnog signala:

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

neka kontekst, oscilator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (bip, bpmInterval); const bip = function () {if (! context) context = new AudioContext (); oscilator = kontekst.createOscillator (); oscilator.type = "sinus"; oscilator.start (0); oscilator.connect (context.destination); setTimeout (oscilator.disconnect, 150, context.destination); }

Učinimo sada nešto slično koristeći audio datoteku:

const click = new Audio (‘./ 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); };

Na kraju dodajući logiku koja ih kontrolira:

// JSlet isPlayerPlaying = false;

neka bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. gumb playera'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (zvučni signal, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Korak 4: Sve spojite

Sastavljajući sve značajke zajedno i dodajući malo stila (što neću objašnjavati), imamo ovaj konačni proizvod:

Ne znam koliko ljudi zaista žele vidjeti izravno u članku, pa cijeli kôd pronađite na

Korak 5: Učinkovita upotreba (samo korisnici OSX -a)

Ako ste već koristili Mac, možda ste naišli na izvornu aplikaciju Dashboard, ali vjerojatno nećete dugo ostati.

Nikad ga zapravo nisam koristio … do sada. U Safariju možete desnom tipkom miša kliknuti stranicu, što ponekad uzrokuje skok odabira radnje uključujući otvaranje na nadzornoj ploči …

Klikom na ovo otkrit će vam se kreator widgeta web stranice. Možete odabrati dio stranice koji želite dodati na nadzornu ploču. Ovo je prilično cool značajka, ali za naš slučaj, super cool značajka. Otvaranjem BPM brojača koji smo upravo napravili, možete odabrati okvir ovako:

Sada upotrijebite prečac tipke F12. BUM. Nikada nije bilo tako lako sami stvoriti widgete, brzo i jednostavno.

Korak 6: Bilješke

Možda se pitate zašto ovaj ne uključuje značajku reprodukcije metronoma. Kad sam ga pokušao upotrijebiti na nadzornoj ploči, program nije mogao pouzdano reproducirati zvuk: (Ali barem Logic može lako napraviti taj dio.

Razlog zašto sam vam pokazao kako stvarati zvukove na dva različita načina je taj što verzija Audio konteksta pomoću sintetizatora ne bi radila unutar nadzorne ploče.

Konačno, ne možete jednostavno kliknuti F12 i nastaviti koristiti razmaknicu za dobivanje tempa, morate pritisnuti gumb izravno, što je vraćanje na nižu razinu. Ali mislim da ću od sada nadalje stvarati male widgete. Ako imate neke dobre ideje za to, pokažite mi kada ste ih proveli:)

Prijavite se na našu mailing listu!

I da, pogledajte T3chFlicks - mi stvaramo stvari!