Készítse el egyszerűen a kütyüit - Gyors BPM -számláló: 6 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

A webalkalmazások gyakoriak, de azok az internetes alkalmazások, amelyek nem igényelnek internet -hozzáférést, nem azok.

Ebben a cikkben megmutatom, hogyan készítettem BPM számlálót egy egyszerű HTML -oldalon, vanília javascript -tel kombinálva (lásd itt). Letöltés esetén ez a widget offline is használható - ideális zenészek számára, akik alkotni szeretnének, de nem mindig rendelkeznek internet -hozzáféréssel. Még jobb, ha az OSX műszerfal alkalmazást használva (amely korábban soha nem tűnt olyan hasznosnak), rendkívül gyorsá tehetjük ezt a BPM számlálót.

1. lépés: Milyennek kell lennie?

Nyilvánvaló, hogy a kérdés megválaszolása vélemény kérdése. Az én álláspontom az, hogy szuper egyszerűnek kell lennie, és csak azt kell elvégeznie, amire egy BPM számlálónak szüksége van: az ütések számát percenként. Ezért csak egy gomb és egy számérték szükséges.

2. lépés: A logika

A BPM becslése olyan egyszerű, mint a két egymást követő ütés közötti idő mérése és annak kiszámítása, hogy ezek közül hány fér el egy perc alatt.

let prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const intervallum = (aktuális idő - prev_click)/1000; const bpm = 60/intervallum; prev_click = aktuális idő; visszatérő bpm; } get_bpm (); // például. 120

Ezt továbbvittem az előző 3 ütem átlagolásával:

const átlagolás = 3;

const prev_bpms = [60]; let prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const intervallum = (aktuális idő - prev_click) / 1000; const bpm = 60 / intervallum; prev_click = aktuális idő; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (ütés / perc); átlagos_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; visszatérő bpm; } get_bpm (); // például. 120

Ezenkívül nem mindenki akarja megnyomni a gombot, hanem talán egy gombot:

// szóköz billentyű

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // azonnali képesség document.querySelector ('. clicker button'). focus ();

Most a felhasználók a szóköz használatával is koppinthatnak, amint az oldal betöltődött.

3. lépés: Hallgassa meg BPM -jét

Megérintette a BPM -et, de most vissza akarja játszani, hogy kedvenc tempójához illeszkedjen.

Ehhez hangot kell adnunk. De hogyan? Két lehetőségünk van az AudioAPI böngészőbe, hangfájl használata vagy szintetizátor létrehozása. Először a szintetizátort használjuk hangjelzés létrehozásához:

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

legyen kontextus, oszcillátor, const bpm = 60; const bpmInterval = 60/ütés/perc * 1000; // mssetInterval (hangjelzés, bpmInterval); const beep = function () {if (! context) kontextus = new AudioContext (); oszcillátor = kontextus.createOscillator (); oszcillátor.type = "szinusz"; oszcillátor.indítás (0); oszcillátor.csatlakozás (kontextus.cél); setTimeout (oscillator.disconnect, 150, context.destination); }

Most tegyünk hasonlót egy audió fájl használatával:

const click = új hang (‘./ cowbell.mp3’);

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

Végül hozzá kell adni az őket vezérlő logikát:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function () {const gomb = document.querySelector ('. játékos gomb'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (hangjelzés, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

4. lépés: Az összes összerakása

Most az összes funkció összeállítása és egy kis stílus hozzáadása (amit nem fogok megmagyarázni), ez a végtermék:

Nem tudom, mennyi kódot akarnak látni az emberek közvetlenül a cikkben, ezért keresse meg a teljes kódot a https://gitlab.com/t3chflicks/bpm-counter címen.

5. lépés: Hatékony használat (csak OSX felhasználók)

Ha már használt Mac -et, akkor talán a natív irányítópult -alkalmazásban találkozott, de valószínűleg nem marad sokáig.

Sosem használtam … eddig. A Safari -ban jobb gombbal kattinthat az oldalra, ami néha azt eredményezi, hogy megjelenik egy műveletválasztás, beleértve a megnyitást az irányítópulton …

Ha erre kattint, egy weboldal -widget -készítő jelenik meg. Kiválaszthatja az oldal egy részét, amelyet hozzá szeretne adni az irányítópulthoz. Ez egy nagyon jó funkció, de a mi esetünkben ez egy szuper jó funkció. Ha megnyitjuk a BPM számlálót, amelyet most készítettünk, akkor a következőképpen jelölheti ki a dobozt:

Most használja az F12 billentyű parancsikonját. BUMM. Soha nem volt ilyen egyszerű a widgetek gyors, egyszerű létrehozása.

6. lépés: Megjegyzések

Lehet, hogy vajon miért nem tartalmazza ez a metronóm lejátszási funkciót. Amikor megpróbáltam használni a műszerfalon, a program nem játszotta le megbízhatóan a hangot: (De legalább a Logic könnyen meg tudja csinálni ezt a részt.

Az ok, amiért megmutattam, hogyan kell két különböző módon hangokat létrehozni, az az, hogy a szintetizátort használó Audio Context verzió nem működik a műszerfalon.

Végül nem kattinthat egyszerűen az F12 gombra, és nem használhatja a szóköz billentyűt a tempó leolvasásához, hanem közvetlenül a gombra kell kattintania, ami leminősítés. De azt hiszem, ezentúl így készíthetek kis kütyüket. Ha van valami jó ötleted erre, mutasd meg, ha megvalósítottad:)

Iratkozzon fel levelezőlistánkra!

És igen, nézze meg a T3chFlicks -t - mi készítünk dolgokat!