Creați-vă propriile widgeturi cu ușurință - Contor BPM rapid: 6 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Aplicațiile web sunt un loc obișnuit, dar aplicațiile web care nu necesită acces la internet nu.

În acest articol vă arăt cum am creat un contor BPM într-o pagină HTML simplă cuplată cu javascript vanilat (a se vedea aici). Dacă este descărcat, acest widget poate fi folosit offline - ideal pentru muzicienii care doresc să creeze, dar care nu au întotdeauna acces la internet. Chiar și mai bine, folosind aplicația de bord OSX (care nu părea niciodată atât de utilă până acum), putem face acest contor BPM extrem de rapid de utilizat.

Pasul 1: Cum ar trebui să arate?

Evident, răspunsul la întrebare este o chestiune de opinie. Poziția mea este că ar trebui să fie foarte simplă și să facă doar ceea ce are nevoie un contor BPM: să numere bătăi pe minut. Prin urmare, tot ce trebuie să fie este un buton și o valoare de numărare.

Pasul 2: Logica

Estimarea BPM este la fel de ușoară ca măsurarea timpului dintre două bătăi secvențiale și calcularea câte dintre acestea s-ar putea încadra într-un minut.

let prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); interval const = (currentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = CurrentTime; retur bpm; } get_bpm (); // de exemplu. 120

Am luat mai departe acest lucru prin media celor 3 bătăi anterioare astfel:

media const = 3;

const prev_bpms = [60]; let prev_click = new Date () const getBPM = function () {const currentTime = new Date (); interval const = (currentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = CurrentTime; while (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; retur bpm; } get_bpm (); // de exemplu. 120

De asemenea, nu toată lumea vrea să apese butonul, dar poate o tastă:

// declanșator bara de spațiu

window.addEventListener ('tastă', (e) => {if (e.code === 32) getBPM ();}); // capacitate instant document.querySelector ('. buton clicker'). focus ();

Acum, utilizatorii pot atinge de asemenea folosind bara de spațiu imediat ce pagina s-a încărcat.

Pasul 3: Ascultați BPM

Ați introdus BPM-ul dvs., dar acum doriți să îl redați, astfel încât să vă puteți configura cu tempo-ul preferat.

Pentru a face acest lucru, trebuie să facem sunet. Dar cum? Avem două opțiuni încorporate în browserul AudioAPI, folosim un fișier de sunet sau creăm un sintetizator. Mai întâi vom folosi sintetizatorul pentru a crea un semnal sonor:

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

lăsați context, oscilator; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (beep, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); oscilator = context.createOscillator (); oscilator.tip = "sinus"; oscilator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Acum, să facem un lucru similar folosind în schimb un fișier audio:

const click = audio nou (‘./ 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); };

În cele din urmă adăugând logica care le controlează:

// JSlet isPlayerPlaying = false;

lasă bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. button button'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (bip, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Pasul 4: Puneți totul împreună

Acum, punând toate caracteristicile împreună și adăugând un pic de stil (pe care nu am de gând să-l explic), avem acest produs final:

Nu știu cât de mult doresc oamenii să vadă cu adevărat direct în articol, așa că găsiți codul complet la

Pasul 5: Utilizare eficientă (numai pentru utilizatorii OSX)

Dacă ați mai folosit un Mac înainte, este posibil să fi dat peste aplicația Dashboard nativă, dar probabil că nu ați rămas mult timp.

Nu l-am folosit niciodată … până acum. În Safari puteți face clic dreapta pe pagină, ceea ce face ca uneori să apară o selecție de acțiune, inclusiv deschidere în tabloul de bord …

Dacă faceți clic pe aceasta, veți descoperi un creator de widget-uri pentru pagini web. Puteți selecta o parte a paginii pe care doriți să o adăugați în tabloul de bord. Aceasta este o caracteristică destul de interesantă, dar pentru cazul nostru este o caracteristică super interesantă. Deschiderea contorului BPM pe care tocmai l-am creat, puteți selecta caseta astfel:

Acum utilizați comanda rapidă a tastei F12. BOOM. Nu a fost niciodată atât de ușor să creați singuri widget-uri, rapid și ușor.

Pasul 6: Note

S-ar putea să vă întrebați de ce acesta nu include funcția de redare a metronomului. Când am încercat să-l folosesc în tabloul de bord, programul nu ar reda în mod fiabil sunetul: (Dar cel puțin Logic poate face cu ușurință acea parte.

Iar motivul pentru care v-am arătat cum să creați sunete în două moduri diferite este că versiunea Audio Context folosind un sintetizator nu ar funcționa în interiorul tabloului de bord.

În cele din urmă, nu puteți să faceți clic pe F12 și să continuați să utilizați bara de spațiu pentru a obține tempo-ul, trebuie să faceți clic pe butonul direct, care este un downgrade. Dar cred că așa pot face widget-uri mici de acum înainte. Dacă aveți idei interesante pentru acest lucru, arătați-mi când le-ați implementat:)

Înscrieți-vă la lista noastră de distribuție!

Și da, verificați T3chFlicks - facem lucruri!