Enostavno naredite svoje pripomočke - hiter števec BPM: 6 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Spletne aplikacije so običajno, vendar spletne aplikacije, ki ne potrebujejo dostopa do interneta, niso.

V tem članku vam bom pokazal, kako sem naredil števec BPM na preprosti strani HTML skupaj z javascript vanilije (glejte tukaj). Če ga prenesete, ga lahko uporabite brez povezave - idealen za glasbenike, ki želijo ustvarjati, vendar nimajo vedno dostopa do interneta. Še bolje, z uporabo aplikacije nadzorne plošče OSX (ki se prej nikoli ni zdela tako uporabna), lahko naredimo ta števec BPM zelo hiter za uporabo.

1. korak: Kako naj bi izgledalo?

Očitno je odgovor na vprašanje stvar mnenja. Moje stališče je, da bi moralo biti zelo preprosto in narediti le tisto, kar mora števec BPM: šteti udarce na minuto. Zato mora biti le gumb in številska vrednost.

2. korak: Logika

Ocena BPM je tako enostavna kot merjenje časa med dvema zaporednima utripoma in izračun, koliko od teh bi lahko vklopili v minuti.

naj prev_click = nov datum (); const getBPM = function () {const currentTime = nov datum (); const interval = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; povratni utrip / min; } get_bpm (); // npr. 120

To sem nadaljeval s povprečjem treh prejšnjih taktov:

povprečje const = 3;

const prev_bpms = [60]; naj prev_click = nov Date () const getBPM = function () {const currentTime = nov Date (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = currentTime; medtem ko (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); povprečna_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; povratni utrip / min; } get_bpm (); // npr. 120

Prav tako ne želijo vsi pritisniti gumba, ampak morda tipko:

// sprožilec preslednice

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

Zdaj se lahko uporabniki dotaknejo tudi preslednice, takoj ko se stran naloži.

3. korak: Poslušajte svoj BPM

Izbrali ste svoj BPM, zdaj pa ga želite predvajati, da se lahko pridružite svojemu najljubšemu tempu.

Za to moramo ustvariti zvok. Ampak kako? V brskalnik AudioAPI imamo vgrajeni dve možnosti, uporabite zvočno datoteko ali ustvarite sintetizator. Najprej bomo s sintetizatorjem ustvarili pisk:

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

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

Zdaj pa naredimo podobno stvar z uporabo zvočne datoteke:

const click = nov zvok (‘./ cowbell.mp3’);

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

Na koncu dodamo logiko, ki jih nadzira:

// JSlet isPlayerPlaying = false;

naj bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('gumb predvajalnika'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pisk, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Korak: Združite vse skupaj

Zdaj, ko združimo vse funkcije in dodamo malce stylinga (ki ga ne bom razlagal), imamo ta končni izdelek:

Ne vem, koliko kode si ljudje resnično želijo ogledati neposredno v članku, zato poiščite celotno kodo na

5. korak: Učinkovita uporaba (samo za uporabnike OSX)

Če ste že uporabljali mac, ste morda naleteli na domačo aplikacijo Dashboard, vendar verjetno ne boste dolgo ostali.

Nikoli ga res nisem uporabljal … do sedaj. V Safariju lahko z desno miškino tipko kliknete stran, kar včasih povzroči pojav dejanja, vključno z odpiranjem na nadzorni plošči …

S klikom na to se vam odpre ustvarjalec gradnikov spletnih strani. Izberete lahko del strani, ki ga želite dodati na nadzorno ploščo. To je precej kul funkcija, v našem primeru pa super kul funkcija. Če odprete pravkar izdelani števec BPM, lahko polje izberete takole:

Zdaj uporabite bližnjico tipke F12. BOOM. Nikoli ni bilo tako enostavno ustvariti pripomočkov sami, hitro in preprosto.

6. korak: Opombe

Morda se sprašujete, zakaj ta ne vključuje funkcije predvajanja metronoma. Ko sem ga poskušal uporabiti na armaturni plošči, program ne bi zanesljivo predvajal zvoka: (Toda vsaj Logic lahko zlahka opravi ta del.

In razlog, zakaj sem vam pokazal, kako ustvarjati zvoke na dva različna načina, je, da različica zvočnega konteksta s sintetizatorjem ne bi delovala znotraj armaturne plošče.

Končno ne morete preprosto klikniti F12 in nadaljevati s presledkom, da dobite tempo, morate pritisniti gumb neposredno, kar je znižanje. Mislim pa, da bom odslej tako delal male pripomočke. Če imate kakšne kul ideje za to, mi jih pokažite, ko jih uresničite:)

Prijavite se na naš poštni seznam!

In ja, poglejte T3chFlicks - izdelujemo stvari!