Lav nemt dine egne widgets - Hurtig BPM -tæller: 6 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Webapps er almindeligt, men webapps, der ikke kræver internetadgang, er ikke.

I denne artikel viser jeg dig, hvordan jeg lavede en BPM -tæller på en simpel HTML -side kombineret med vanilje -javascript (se her). Hvis downloadet, kan denne widget bruges offline - ideel til musikere, der ønsker at oprette, men ikke altid har internetadgang. Endnu bedre, ved at bruge OSX dashboard -appen (som aldrig virkede så nyttig før), kan vi gøre denne BPM -tæller ekstra hurtig at bruge.

Trin 1: Hvordan skal det se ud?

Svaret på spørgsmålet er naturligvis et spørgsmål om mening. Min holdning er, at den skal være super enkel og kun gøre, hvad en BPM -tæller skal: tælle slag pr. Minut. Derfor er alt, hvad det skal være en knap og en tælleværdi.

Trin 2: Logikken

Estimering af BPM er lige så let som at måle tiden mellem to sekventielle slag og beregne, hvor mange af disse du kunne passe på et minut.

lad prev_click = ny dato (); const getBPM = funktion () {const currentTime = ny dato (); const interval = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; retur bpm; } get_bpm (); // f.eks. 120

Jeg tog dette videre ved at beregne et gennemsnit af de 3 tidligere beats sådan:

const -gennemsnit = 3;

const prev_bpms = [60]; lad prev_click = ny dato () const getBPM = funktion () {const currentTime = ny dato (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = currentTime; mens (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; retur bpm; } get_bpm (); // f.eks. 120

Det er heller ikke alle, der vil trykke på knappen, men måske i stedet en tast:

// mellemrumstast udløser

window.addEventListener ('tastetryk', (e) => {if (e.code === 32) getBPM ();}); // document.querySelector ('. klik -knap'). fokus ();

Nu kan brugerne også trykke på med mellemrumstasten, så snart siden er indlæst.

Trin 3: Hør din BPM

Du har tappet i din BPM, men nu vil du afspille det, så du kan jamme med til dit yndlingstempo.

For at gøre dette skal vi lave lyd. Men hvordan? Vi har to muligheder indbygget i browseren AudioAPI, brug en lydfil eller opret en synthesizer. Vi bruger først synthesizeren til at oprette et bip:

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

lad kontekst, oscillator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (bip, 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); }

Lad os nu gøre en lignende ting ved hjælp af en lydfil i stedet:

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

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

Endelig tilføjer logikken, der styrer dem:

// JSlet isPlayerPlaying = false;

lad bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. player button'); hvis (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (bip, bpmInterval); } ellers {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Trin 4: Sæt det hele sammen

Når vi nu sætter alle funktionerne sammen og tilføjer en lille smule styling (som jeg ikke vil forklare), har vi dette slutprodukt:

Jeg ved ikke, hvor meget kode folk virkelig vil se direkte i artiklen, så find den fulde kode på

Trin 5: Effektiv brug (kun OSX -brugere)

Hvis du har brugt en mac før, er du muligvis faldet over den native Dashboard -app, men du har sandsynligvis ikke været længe.

Jeg har aldrig rigtig brugt det … indtil nu. I Safari kan du højreklikke på siden, hvilket nogle gange får et handlingsvalg til at dukke op, herunder åbent i instrumentbrættet …

Hvis du klikker på dette, vil du få vist en webside -widget -skaber. Du kan vælge en del af siden, som du gerne vil tilføje til dit dashboard. Dette er en ret cool funktion, men for vores tilfælde er det en super fed funktion. Når du åbner BPM -tælleren, vi lige har lavet, kan du vælge boksen sådan:

Brug nu genvejen til F12 -tasten. BOOM. Det har aldrig været så let at oprette widgets selv, hurtigt og nemt.

Trin 6: Noter

Du undrer dig måske over, hvorfor denne ikke inkluderer metronomafspilningsfunktionen. Da jeg forsøgte at bruge det i instrumentbrættet, ville programmet ikke afspille lyden pålideligt: (Men i det mindste kan Logic let klare den del.

Og grunden til, at jeg viste dig, hvordan du opretter lyde på to forskellige måder, er fordi Audio Context -versionen ved hjælp af en synthesizer ikke ville fungere inde i instrumentbrættet.

Endelig kan du ikke bare klikke på F12 og fortsætte med at bruge mellemrumstasten for at få tempoet, du skal klikke på knappen direkte, hvilket er en nedgradering. Men jeg tror, at det kan være sådan, jeg laver små widgets fra nu af. Hvis du har nogle fede ideer til dette, så vis mig det, når du har implementeret dem:)

Tilmeld dig vores mailingliste!

Og ja, tjek T3chFlicks - vi laver ting!