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

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

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

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

Korak 1: Kako bi to trebalo izgledati?

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

Korak 2: Logika

Procjena BPM -a 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; return bpm; } get_bpm (); // npr. 120

Otišao sam dalje prosjekom 3 prethodna otkucaja ovako:

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); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; return bpm; } get_bpm (); // npr. 120

Takođe, ne žele svi pritisnuti dugme, već možda tipku:

// okidač razmaknice

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // trenutna sposobnost document.querySelector ('. dugme za klikanje'). focus ();

Sada korisnici mogu dodirnuti i pomoću razmaknice čim se stranica učita.

Korak 3: Slušajte 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 opcije ugrađene u preglednik AudioAPI, koristite zvučnu datoteku ili stvorite sintisajzer. Prvo ćemo upotrijebiti sintisajzer za stvaranje zvučnog signala:

const AudioContext = window. 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 = context.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Učinimo sada sličnu stvar 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); };

Konačno dodajući logiku koja ih kontrolira:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('dugme playera'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (bip, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Korak 4: Sastavite sve zajedno

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 OSX korisnici)

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

Nikada ga 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 svoju nadzornu ploču. Ovo je prilično cool funkcija, ali za naš slučaj to je super cool funkcija. Otvaranjem BPM brojača koji smo upravo napravili, možete odabrati okvir ovako:

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

Korak 6: Napomene

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.

A razlog zašto sam vam pokazao kako stvarati zvukove na dva različita načina je to š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 da biste dobili tempo, morate pritisnuti dugme izravno, što je vraćanje na stariju verziju. Ali mislim da ću ovako možda od sada praviti 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!