Viegli izveidojiet savus logrīkus - ātrs BPM skaitītājs: 6 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:51

Tīmekļa lietotnes ir izplatīta vieta, bet nav tādas tīmekļa lietotnes, kurām nav nepieciešama piekļuve internetam.

Šajā rakstā es jums parādīšu, kā es izveidoju BPM skaitītāju vienkāršā HTML lapā kopā ar vaniļas javascript (skatiet šeit). Ja šis logrīks ir lejupielādēts, to var izmantot bezsaistē - ideāli piemērots mūziķiem, kuri vēlas radīt, bet kuriem ne vienmēr ir piekļuve internetam. Vēl labāk, izmantojot OSX informācijas paneļa lietotni (kas iepriekš nekad nav šķitusi tik noderīga), mēs varam padarīt šo BPM skaitītāju īpaši ātri lietojamu.

1. solis: kādam tam vajadzētu izskatīties?

Acīmredzot atbilde uz jautājumu ir viedokļa jautājums. Mana nostāja ir tāda, ka tai vajadzētu būt ļoti vienkāršai un darīt tikai to, kas nepieciešams BPM skaitītājam: saskaitīt sitienus minūtē. Tāpēc viss, kas tam nepieciešams, ir poga un skaitīšanas vērtība.

2. solis: loģika

BPM novērtēšana ir tikpat vienkārša kā laika mērīšana starp diviem secīgiem sitieniem un aprēķināšana, cik no tiem jūs varētu ievietot minūtē.

ļaujiet prev_click = jauns datums (); const getBPM = funkcija () {const currentTime = jauns datums (); const intervāls = (pašreizējais laiks - iepriekšējais klikšķis)/1000; const bpm = 60/intervāls; prev_click = pašreizējais laiks; atgriešanās bpm; } get_bpm (); // piem. 120

Es turpināju to, vidēji aprēķinot 3 iepriekšējos sitienus šādi:

konst vidējā vērtība = 3;

const prev_bpms = [60]; ļaujiet prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const intervāls = (pašreizējais laiks - iepriekšējais klikšķis) / 1000; const bpm = 60 / intervāls; prev_click = pašreizējais laiks; kamēr (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (sitieni minūtē); vidēji_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; atgriešanās bpm; } get_bpm (); // piem. 120

Turklāt ne visi vēlas nospiest pogu, bet varbūt taustiņu:

// atstarpes taustiņš

window.addEventListener ('taustiņu nospiešana', (e) => {ja (e.kods === 32) getBPM ();}); // tūlītējās iespējas document.querySelector ('. klikšķinātāja poga'). focus ();

Tagad lietotāji var arī pieskarties, izmantojot atstarpes taustiņu, tiklīdz lapa ir ielādēta.

3. darbība. Klausieties savu BPM

Jūs esat pieskāries savam BPM, bet tagad vēlaties to atskaņot, lai varētu iestrēgt līdz savam iecienītākajam tempam.

Lai to izdarītu, mums ir jārada skaņa. Bet kā? Mums ir divas iespējas, kas iebūvētas pārlūkprogrammā AudioAPI, izmantot skaņas failu vai izveidot sintezatoru. Vispirms izmantosim sintezatoru, lai izveidotu pīkstienu:

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

ļaujiet kontekstam, oscilatoram, konst bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (pīkstiens, bpmInterval); const pīkstiens = funkcija () {ja (! konteksts) konteksts = jauns AudioContext (); oscilators = konteksts.createOscillator (); oscilators.tips = "sine"; oscilators.start (0); oscilators.savienojums (konteksts.mērķis); setTimeout (oscilators.disconnect, 150, konteksts.mērķis); }

Tagad darīsim līdzīgu lietu, izmantojot audio failu:

const noklikšķiniet = jauns audio (‘./ cowbell.mp3’);

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

Visbeidzot pievienojot loģiku, kas tos kontrolē:

// JSlet isPlayerPlaying = nepatiess;

let bpmRepeaterId; const togglePlayerOutput = funkcija () {const poga = document.querySelector ('. atskaņotāja poga'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pīkstiens, bpmInterval); } cits {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

4. solis: salieciet visu kopā

Tagad, apkopojot visas funkcijas un pievienojot nedaudz stila (ko es neskaidrošu), mums ir šāds gala produkts:

Es nezinu, cik daudz koda cilvēki patiešām vēlas redzēt tieši rakstā, tāpēc atrodiet pilnu kodu vietnē

5. darbība. Efektīva lietošana (tikai OSX lietotājiem)

Ja iepriekš esat izmantojis Mac, iespējams, esat paklupis vietējā informācijas paneļa lietotnē, taču, iespējams, ilgi nebūsit.

Es nekad to īsti neesmu izmantojis … līdz šim. Safari varat ar peles labo pogu noklikšķināt uz lapas, kas dažkārt izraisa darbību atlases parādīšanos, tostarp atvēršanu informācijas panelī …

Noklikšķinot uz tā, jūs atklāsit tīmekļa lapu logrīku veidotāju. Varat atlasīt lapas daļu, kuru vēlaties pievienot informācijas panelim. Šī ir diezgan forša funkcija, taču mūsu gadījumā tā ir ļoti forša funkcija. Atverot tikko izveidoto BPM skaitītāju, varat atlasīt šādu lodziņu:

Tagad izmantojiet taustiņa F12 īsceļu. BOOM. Nekad nav bijis tik viegli izveidot logrīkus ātri un viegli.

6. darbība. Piezīmes

Jums var rasties jautājums, kāpēc šajā nav iekļauta metronoma atskaņošanas funkcija. Kad es mēģināju to izmantot informācijas panelī, programma nevarēja droši atskaņot audio: (Bet vismaz Loģika to var viegli izdarīt.

Un iemesls, kāpēc es jums parādīju, kā radīt skaņas divos dažādos veidos, ir tas, ka audio konteksta versija, izmantojot sintezatoru, nedarbotos informācijas panelī.

Visbeidzot, jūs nevarat vienkārši noklikšķināt uz F12 un izmantot atstarpes taustiņu, lai iegūtu tempu, jums ir jānoklikšķina tieši uz pogas, kas ir pazemināšana. Bet es domāju, ka no šī brīža es varētu veidot mazus logrīkus. Ja jums ir foršas idejas, parādiet man, kad esat tās īstenojis:)

Reģistrējieties mūsu adresātu sarakstam!

Un jā, pārbaudiet T3chFlicks - mēs gatavojam lietas!