Krijoni pajisjet tuaja me lehtësi - Numëruesi i shpejtë i BPM: 6 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Aplikacionet në internet janë vend i zakonshëm, por aplikacionet në internet që nuk kërkojnë qasje në internet nuk janë.

Në këtë artikull unë ju tregoj se si kam bërë një Counter BPM në një faqe të thjeshtë HTML të shoqëruar me vanilje javascript (shiko këtu). Nëse shkarkohet, ky widget mund të përdoret jashtë linje - ideale për muzikantët që duan të krijojnë, por jo gjithmonë kanë qasje në internet. Edhe më mirë, duke përdorur aplikacionin e pultit OSX (i cili kurrë nuk dukej aq i dobishëm më parë), ne mund ta bëjmë këtë Counter BPM shumë të shpejtë për t'u përdorur.

Hapi 1: Si duhet të duket?

Natyrisht, përgjigjja e pyetjes është çështje opinioni. Qëndrimi im është se ai duhet të jetë shumë i thjeshtë dhe të bëjë vetëm atë që i nevojitet një numëruesi BPM për të: numëruar Rrahjet në Minutë. Prandaj, gjithçka që duhet të jetë është një buton dhe një vlerë numërimi.

Hapi 2: Logjika

Vlerësimi i BPM është po aq i lehtë sa matja e kohës midis dy rrahjeve të njëpasnjëshme dhe llogaritja se sa prej tyre mund të përshtatni në një minutë.

le prev_click = Data e re (); const getBPM = funksioni () {const currentTime = Data e re (); intervali konstant = (koha e tanishme - prev_click)/1000; const bpm = 60/interval; prev_click = koha aktuale; kthimi i rrahjeve në minutë; } get_bpm (); // p.sh. 120

Unë e çova këtë më tej duke mesatarizuar 3 rrahjet e mëparshme si kjo:

mesatarja konstante = 3;

const prev_bpms = [60]; le prev_click = Data e re () const getBPM = funksioni () {const currentTime = Data e re (); intervali konstant = (koha e tanishme - prev_click) / 1000; const bpm = 60 / interval; prev_click = koha aktuale; ndërsa (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); mesatar_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; kthimi i rrahjeve në minutë; } get_bpm (); // p.sh. 120

Gjithashtu, jo të gjithë duan të shtypin butonin, por ndoshta një çelës:

// shkas i shiritit të hapësirës

window.addEventListener ('shtypja e tastit', (e) => {nëse (e.kodi === 32) getBPM ();}}); // aftësia e menjëhershme document.querySelector ('. butoni i klikuesit'). fokusi ();

Tani, përdoruesit gjithashtu mund të trokasin duke përdorur shiritin e hapësirës sapo faqja të jetë ngarkuar.

Hapi 3: Dëgjoni BPM -në tuaj

Ju keni trokitur në BPM tuaj, por tani doni ta riprodhoni atë në mënyrë që të mund të bllokoni ritmin tuaj të preferuar.

Për ta bërë këtë, ne duhet të bëjmë zë. Por si? Ne kemi dy opsione të integruara në shfletuesin AudioAPI, përdorni një skedar zanor ose krijoni një sintetizues. Së pari do të përdorim sintetizuesin për të krijuar një bip:

const AudioContext = dritare. AudioContext || dritare.webkitAudioContext;

le kontekst, oshilator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (biip, bpmInterval); const beep = funksioni () {nëse (! konteksti) konteksti = AudioContext i ri (); oshilator = kontekst.krijoniOscillator (); oshilator.type = "sinus"; oshilator.filloj (0); oshilator.lidhje (kontekst.destinimi); setTimeout (oshilator. shkëputje, 150, kontekst. destinacion); }

Tani le të bëjmë një gjë të ngjashme duke përdorur një skedar Audio në vend:

const click = audio e re (‘./ cowbell.mp3’);

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

Më në fund duke shtuar logjikën që i kontrollon ato:

// JSlet isPlayerPlaying = false;

le bpmRepeaterId; const togglePlayerOutput = funksioni () {const button = document.querySelector ('. butoni i lojtarit'); nëse (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (biip, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Hapi 4: Vendosja e të gjitha së bashku

Tani duke i bashkuar të gjitha tiparet dhe duke shtuar pak stilim (të cilin nuk do ta shpjegoj), ne kemi këtë produkt përfundimtar:

Unë nuk e di se sa kod njerëzit duan të shohin drejtpërdrejt në artikull, kështu që gjeni kodin e plotë në

Hapi 5: Përdorimi efektiv (Vetëm përdoruesit e OSX)

Nëse keni përdorur më parë një Mac, mund të keni hasur në Aplikacionin amtare të Panelit, por ndoshta nuk do të keni qëndruar gjatë.

Unë kurrë nuk e kam përdorur me të vërtetë … deri tani. Në Safari mund të klikoni me të djathtën në faqe, gjë që ndonjëherë shkakton që të shfaqet një përzgjedhje veprimi duke përfshirë hapjen në pult …

Klikimi mbi këtë do t'ju zbulojë një krijues widget të faqes në internet. Ju mund të zgjidhni një pjesë të faqes që dëshironi të shtoni në pultin tuaj. Ky është një tipar mjaft i lezetshëm, por për rastin tonë, është një veçori super e lezetshme. Duke hapur sportelin BPM që sapo kemi bërë, mund të zgjidhni kutinë si kjo:

Tani përdorni shkurtoren e tastit F12. BOOM Asnjëherë nuk ka qenë aq e lehtë për të krijuar pajisje shtesë, shpejt dhe me lehtësi.

Hapi 6: Shënime

Ju mund të pyesni veten pse kjo nuk përfshin funksionin e rishikimit të metronomeve. Kur u përpoqa ta përdorja në pult, programi nuk do të luante me besueshmëri audion: (Por të paktën Logic mund ta bëjë me lehtësi atë pjesë.

Dhe arsyeja pse ju tregova se si të krijoni tinguj në dy mënyra të ndryshme është sepse versioni Audio Context duke përdorur një sintetizues nuk do të funksiononte brenda pultit.

Së fundi, nuk mund të klikoni thjesht F12 dhe të vazhdoni të përdorni shiritin e hapësirës për të marrë ritmin, duhet të klikoni direkt në butonin, i cili është një zbritje. Por unë mendoj se kjo mund të jetë mënyra sesi bëj widget të vegjël tani e tutje. Nëse keni ndonjë ide interesante për këtë, më tregoni kur i keni zbatuar ato:)

Regjistrohuni në Listën tonë të Postimeve!

Dhe po, shikoni T3chFlicks - ne bëjmë gjëra!