Madaling Gumawa ng Iyong Sariling Mga Widget - Mabilis na Counter ng BPM: 6 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ang mga web app ay karaniwang lugar, ngunit ang mga web app na hindi nangangailangan ng pag-access sa internet ay hindi.

Sa artikulong ito ipinapakita ko sa iyo kung paano ako gumawa ng isang BPM Counter sa isang simpleng pahina ng HTML na isinama sa vanilla javascript (tingnan dito). Kung na-download, ang widget na ito ay maaaring gamitin offline - mainam para sa mga musikero na nais lumikha ngunit hindi palaging may access sa internet. Kahit na mas mahusay, sa pamamagitan ng paggamit ng OSX dashboard app (na hindi gaanong kapaki-pakinabang dati), maaari nating gawing mas mabilis na magamit ang BPM Counter na ito.

Hakbang 1: Ano ang Dapat Mukhang Ito?

Malinaw na, ang sagot sa tanong ay isang bagay ng opinyon. Ang aking paninindigan ay dapat itong sobrang simple at gagawin lamang kung ano ang kailangan ng isang counter ng BPM: bilangin ang Beats Per Minute. Samakatuwid, ang kailangan lamang nito ay isang pindutan at isang halaga ng bilang.

Hakbang 2: Ang Lohika

Ang pagtantya sa BPM ay kasing dali ng pagsukat ng oras sa pagitan ng dalawang sunud-sunod na beats at pagkalkula kung ilan sa mga ito ang maaaring magkasya sa isang minuto.

hayaan ang prev_click = bagong Petsa (); const getBPM = function () {const currentTime = bagong Petsa (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / agwat; prev_click = currentTime; bumalik bpm; } get_bpm (); // hal. 120

Kinuha ko ito nang higit pa sa pamamagitan ng pag-average sa 3 nakaraang mga beats na tulad nito:

Const averaging = 3;

const prev_bpms = [60]; hayaan ang prev_click = bagong Petsa () const getBPM = function () {const currentTime = bagong Petsa (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / agwat; prev_click = currentTime; habang (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; bumalik bpm; } get_bpm (); // hal. 120

Gayundin, hindi lahat ay nais na pindutin ang pindutan ngunit marahil isang key:

// space bar trigger

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // instant kakayahang document.querySelector ('. clicker button'). focus ();

Ngayon, ang mga gumagamit ay maaari ring mag-tap gamit ang space bar sa lalong madaling pag-load ng pahina.

Hakbang 3: Pakinggan ang Iyong BPM

Na-tap mo ang iyong BPM, ngunit ngayon nais mong i-play ito muli upang makapag-jam ka sa iyong paboritong tempo.

Upang magawa ito, kailangan nating gumawa ng tunog. Pero paano? Mayroon kaming dalawang pagpipilian na naka-built sa browser na AudioAPI, gumamit ng isang file ng tunog o lumikha ng isang synthesizer. Gagamitin muna namin ang synthesizer upang lumikha ng isang beep:

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

hayaan ang konteksto, oscillator; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (beep, bpmInterval); Const beep = function () {kung (! konteksto) konteksto = bagong AudioContext (); oscillator = konteksto.createOscillator (); oscillator.type = "sine"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Gumawa tayo ngayon ng isang katulad na bagay gamit ang isang Audio file sa halip:

Const click = bagong Audio (‘./ 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); };

Sa wakas pagdaragdag ng lohika na kumokontrol sa kanila:

// JSlet isPlayerPlaying = false;

hayaan ang bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. player button'); kung (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (beep, bpmInterval); } iba pa {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Hakbang 4: Pagsasama-sama sa Lahat ng Ito

Pinagsasama ang lahat ng mga tampok at nagdaragdag ng kaunting istilo (na hindi ko ipaliwanag), mayroon kaming huling produktong ito:

Hindi ko alam kung magkano ang code na talagang nais na makita nang direkta sa artikulo, kaya hanapin ang buong code sa

Hakbang 5: Mabisang Paggamit (Mga Gumagamit lamang ng OSX)

Kung gumamit ka ng mac bago, maaaring nadapa ka sa katutubong Dashboard App, ngunit malamang na hindi ka magtatagal.

Hindi ko talaga ito nagamit … hanggang ngayon. Sa Safari maaari kang mag-right click sa pahina, na kung minsan ay sanhi ng pag-pop up ng isang pagpipilian ng pagkilos kasama na ang bukas sa dashboard …

Ang pag-click dito ay magpapakita sa iyo ng isang tagalikha ng widget sa web page. Maaari kang pumili ng bahagi ng pahina na nais mong idagdag sa iyong dashboard. Ito ay isang medyo cool na tampok, ngunit para sa aming kaso, ito ay isang napaka-cool na tampok. Pagbukas ng BPM counter na aming ginawa, maaari mong piliin ang kahon tulad nito:

Ngayon gamitin ang shortcut ng F12 key. BOOM. Hindi ganoong kadali lumikha ng iyong mga widget sa iyong sarili, mabilis at madali.

Hakbang 6: Mga Tala

Maaaring nagtataka ka kung bakit hindi isinasama ng isang ito ang tampok na metronome na pag-playback. Kapag sinubukan kong gamitin ito sa dashboard, ang programa ay hindi maaasahan na patugtugin ang audio: (Ngunit hindi bababa sa madaling mailagay ng Logic ang bahaging iyon.

At ang dahilan kung bakit ipinakita ko sa iyo kung paano lumikha ng mga tunog sa dalawang magkakaibang paraan ay dahil ang bersyon ng Audio Context na gumagamit ng isang synthesizer ay hindi gagana sa loob ng dashboard.

Sa wakas, hindi mo mai-click nang simple ang F12 at magpatuloy upang magamit ang space bar upang makuha ang tempo, dapat mong i-click ang pindutan nang direkta, na isang pag-downgrade. Ngunit sa palagay ko ito ay maaaring kung paano ako gumawa ng maliliit na widget mula ngayon. Kung mayroon kang anumang mga cool na ideya para dito, ipakita sa akin kapag ipinatupad mo ang mga ito:)

Mag-sign Up sa aming Mail List!

At oo, tingnan ang T3chFlicks - gumawa kami ng mga bagay-bagay!