Lengvai sukurkite savo valdiklius - greitas BPM skaitiklis: 6 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Žiniatinklio programos yra įprasta vieta, tačiau žiniatinklio programos, kurioms nereikia prieigos prie interneto, nėra tokios.

Šiame straipsnyje aš jums parodysiu, kaip sukūriau BPM skaitiklį paprastame HTML puslapyje kartu su vaniliniu „JavaScript“(žr. Čia). Atsisiuntus šį valdiklį galima naudoti neprisijungus - idealiai tinka muzikantams, norintiems kurti, bet ne visada turintiems prieigą prie interneto. Dar geriau, naudodami OSX prietaisų skydelio programą (kuri anksčiau niekada nebuvo tokia naudinga), mes galime padaryti šį BPM skaitiklį ypač greitą naudoti.

1 žingsnis: kaip tai turėtų atrodyti?

Akivaizdu, kad atsakymas į klausimą yra nuomonės klausimas. Mano pozicija yra tokia, kad ji turėtų būti labai paprasta ir atlikti tik tai, ko reikia BPM skaitikliui: skaičiuoti smūgius per minutę. Todėl tereikia mygtuko ir skaičiavimo vertės.

2 žingsnis: logika

Įvertinti BPM yra taip paprasta, kaip išmatuoti laiką tarp dviejų nuoseklių dūžių ir apskaičiuoti, kiek iš jų galėtumėte sutalpinti per minutę.

tegul prev_click = nauja data (); const getBPM = funkcija () {const currentTime = nauja data (); const intervalas = (dabartinis laikas - prev_click)/1000; const bpm = 60/intervalas; prev_click = dabartinis laikas; grįžti bpm; } get_bpm (); // pvz. 120

Toliau tai padariau vidutiniškai 3 ankstesnius smūgius:

konst vidurkis = 3;

const prev_bpms = [60]; tegul prev_click = new Data () const getBPM = function () {const currentTime = new Date (); const intervalas = (dabartinis laikas - prev_click) / 1000; const bpm = 60 / intervalas; prev_click = dabartinis laikas; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); vidurkis_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; grįžti bpm; } get_bpm (); // pvz. 120

Be to, ne visi nori paspausti mygtuką, o gal vietoj to klavišas:

// tarpo klavišas

window.addEventListener ('klavišo paspaudimas', (e) => {jei (el. kodas === 32) getBPM ();}); // momentinės galimybės document.querySelector ('. spragtelėjimo mygtukas'). focus ();

Dabar vartotojai taip pat gali paliesti naudodami tarpo klavišą, kai tik puslapis įkeliamas.

3 žingsnis: išgirskite savo BPM

Paspaudėte savo BPM, bet dabar norite jį atkurti, kad galėtumėte įstrigti pagal mėgstamą tempą.

Norėdami tai padaryti, turime padaryti garsą. Bet kaip? Turime dvi parinktis, integruotas į naršyklę „AudioAPI“, naudoti garso failą arba sukurti sintezatorių. Pirmiausia panaudosime sintezatorių pypsėjimui sukurti:

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

tegul kontekstas, osciliatorius, const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (pyptelėjimas, bpmInterval); const pyptelėjimas = funkcija () {jei (! kontekstas) kontekstas = naujas garso kontekstas (); osciliatorius = context.createOscillator (); osciliatorius.type = "sinusas"; osciliatorius.pradėti (0); osciliatorius.prijungti (kontekstas.destination); setTimeout (osciliatorius.disconnect, 150, context.destination); }

Dabar darykime panašų dalyką naudodami garso failą:

const spustelėkite = naujas garso įrašas (‘./ cowbell.mp3’);

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

Galiausiai pridėkite juos valdančią logiką:

// JSlet isPlayerPlaying = false;

tegul bpmRepeaterId; const togglePlayerOutput = function () {const mygtukas = document.querySelector ('. grotuvo mygtukas'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pyptelėjimas, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

4 žingsnis: surinkite viską kartu

Dabar, sujungę visas funkcijas ir pridėję šiek tiek stiliaus (ko aš neketinu paaiškinti), turime šį galutinį produktą:

Nežinau, kiek kodų žmonės iš tikrųjų nori matyti tiesiogiai straipsnyje, todėl visą kodą rasite adresu

5 veiksmas: efektyvus naudojimas (tik OSX vartotojams)

Jei anksčiau naudojote „Mac“, galbūt suklupote vietinėje prietaisų skydelio programoje, tačiau tikriausiai ilgai neužsibusite.

Aš niekada jo nenaudojau … iki šiol. „Safari“galite dešiniuoju pelės mygtuku spustelėti puslapį, todėl kartais pasirodo veiksmų pasirinkimas, įskaitant atidarymą prietaisų skydelyje …

Spustelėję tai parodysite tinklalapio valdiklio kūrėją. Galite pasirinkti puslapio dalį, kurią norite įtraukti į prietaisų skydelį. Tai gana šauni funkcija, tačiau mūsų atveju tai labai šauni funkcija. Atidarę ką tik pagamintą BPM skaitiklį, galite pasirinkti tokį langelį:

Dabar naudokite klavišo F12 nuorodą. BOOM. Dar niekada nebuvo taip paprasta greitai ir lengvai sukurti valdiklius patiems.

6 žingsnis: pastabos

Jums gali būti įdomu, kodėl šiame nėra metronomo atkūrimo funkcijos. Kai bandžiau jį naudoti prietaisų skydelyje, programa patikimai neatskleis garso: (Bet bent jau „Logic“gali lengvai atlikti šią dalį.

Priežastis, kodėl aš jums parodžiau, kaip kurti garsus dviem skirtingais būdais, yra ta, kad garso kontekstinė versija naudojant sintezatorių neveiks prietaisų skydelyje.

Galiausiai, jūs negalite tiesiog spustelėti F12 ir toliau naudoti tarpo klavišo, kad gautumėte tempą, turite spustelėti mygtuką, kuris yra ankstesnis. Bet aš manau, kad nuo šiol taip galiu kurti mažus valdiklius. Jei turite kokių puikių idėjų, parodykite, kada jas įgyvendinote:)

Užsiregistruokite mūsų pašto adresų sąraše!

Taip, patikrinkite „T3chFlicks“- mes gaminame daiktus!