Lag dine egne widgets enkelt - Rask BPM -teller: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:21

Nettprogrammer er vanlig, men det er ikke nettapper som ikke krever internettilgang.

I denne artikkelen viser jeg deg hvordan jeg laget en BPM -teller i en enkel HTML -side kombinert med vanilje -javascript (se her). Hvis den er lastet ned, kan denne widgeten brukes offline - ideell for musikere som ønsker å lage, men ikke alltid har internettilgang. Enda bedre, ved å bruke OSX dashboard -appen (som aldri virket så nyttig før), kan vi gjøre denne BPM -telleren ekstra rask å bruke.

Trinn 1: Hvordan skal det se ut?

Svaret på spørsmålet er åpenbart et spørsmål om mening. Min holdning er at den skal være superenkel og bare gjøre det en BPM -teller trenger: telle slag per minutt. Derfor er alt det trenger å være en knapp og en telleverdi.

Trinn 2: Logikken

Å estimere BPM er like enkelt som å måle tiden mellom to sekvensielle slag og beregne hvor mange av disse du kunne passe på et minutt.

la prev_click = ny dato (); const getBPM = funksjon () {const currentTime = ny dato (); const intervall = (currentTime - prev_click)/1000; const bpm = 60/intervall; prev_click = currentTime; retur bpm; } get_bpm (); // f.eks. 120

Jeg tok dette videre ved å gjennomsnitte de 3 foregående slagene slik:

const gjennomsnitt = 3;

const prev_bpms = [60]; la prev_click = ny dato () const getBPM = funksjon () {const currentTime = ny dato (); const intervall = (currentTime - prev_click) / 1000; const bpm = 60 / intervall; prev_click = currentTime; mens (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); gjennomsnittlig_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; retur bpm; } get_bpm (); // f.eks. 120

Det er heller ikke alle som vil trykke på knappen, men kanskje i stedet en tast:

// mellomromstaster

window.addEventListener ('tastetrykk', (e) => {if (e.code === 32) getBPM ();}); // umiddelbar evne document.querySelector ('. klikkerknapp'). fokus ();

Nå kan brukere også trykke på mellomromstasten så snart siden er lastet inn.

Trinn 3: Hør BPM

Du har trykket på BPM, men nå vil du spille den av igjen, slik at du kan fortsette til ditt favoritt tempo.

For å gjøre dette må vi lage lyd. Men hvordan? Vi har to alternativer innebygd i nettleseren AudioAPI, bruk en lydfil eller lag en synthesizer. Vi bruker først synthesizeren til å lage et pip:

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

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

La oss gjøre en lignende ting ved å bruke en lydfil i stedet:

const click = ny lyd (‘./ cowbell.mp3’);

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

Til slutt legger du til logikken som styrer dem:

// JSlet isPlayerPlaying = false;

la bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. player button'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pip, bpmInterval); } annet {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Trinn 4: Sett alt sammen

Når vi setter sammen alle funksjonene og legger til litt styling (som jeg ikke skal forklare), har vi dette sluttproduktet:

Jeg vet ikke hvor mye kode folk virkelig vil se direkte i artikkelen, så finn hele koden på

Trinn 5: Effektiv bruk (bare OSX -brukere)

Hvis du har brukt en mac før, har du kanskje snublet over den opprinnelige Dashboard -appen, men du har sannsynligvis ikke holdt deg lenge.

Jeg har egentlig aldri brukt det … før nå. I Safari kan du høyreklikke på siden, noe som noen ganger får et handlingsvalg til å dukke opp, inkludert åpning i dashbordet …

Hvis du klikker på dette, får du opp en widgetskaper for en webside. Du kan velge en del av siden du vil legge til i oversikten. Dette er en ganske kul funksjon, men for vårt tilfelle er det en superkul funksjon. Å åpne BPM -telleren vi nettopp har laget, kan du velge boksen slik:

Bruk nå snarveien til F12 -tasten. BOOM. Det har aldri vært så enkelt å lage widgets selv, raskt og enkelt.

Trinn 6: Notater

Du lurer kanskje på hvorfor denne ikke inkluderer metronomavspillingsfunksjonen. Da jeg prøvde å bruke det i dashbordet, ville ikke programmet spille av lyden på en pålitelig måte: (Men i det minste kan Logic enkelt gjøre den delen.

Og grunnen til at jeg viste deg hvordan du lager lyder på to forskjellige måter, er fordi Audio Context -versjonen som bruker en synthesizer ikke ville fungere inne i dashbordet.

Til slutt kan du ikke bare klikke F12 og fortsette å bruke mellomromstasten for å få tempoet, du må klikke på knappen direkte, som er en nedgradering. Men jeg tror dette kan være hvordan jeg lager små widgets fra nå av. Hvis du har noen kule ideer til dette, vis meg når du har implementert dem:)

Registrer deg på vår adresseliste!

Og ja, sjekk ut T3chFlicks - vi lager ting!