Feu els vostres propis ginys fàcilment: comptador BPM ràpid: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:11

Les aplicacions web són un lloc habitual, però les aplicacions web que no requereixen accés a Internet no.

En aquest article us mostro com he creat un comptador BPM en una pàgina HTML simple juntament amb javascript de vainilla (vegeu aquí). Si es descarrega, aquest giny es pot utilitzar fora de línia, ideal per a músics que vulguin crear però que no sempre tinguin accés a Internet. Encara millor, mitjançant l’aplicació del tauler de control OSX (que abans no semblava tan útil), podem fer que aquest comptador BPM sigui més ràpid d’utilitzar.

Pas 1: com hauria de ser?

Viouslybviament, la resposta a la pregunta és una qüestió d’opinió. La meva postura és que hauria de ser súper senzill i fer només allò que necessita un comptador de BPM: comptar pulsacions per minut. Per tant, tot el que ha de ser és un botó i un valor de recompte.

Pas 2: la lògica

Estimar el BPM és tan fàcil com mesurar el temps entre dos batecs seqüencials i calcular quants d’aquests podríeu encabir en un minut.

let prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); interval de constància = (CurrentTime - prev_click) / 1000; const bpm = 60 / interval; prev_click = CurrentTime; retorn bpm; } get_bpm (); // per exemple. 120

Vaig anar més enllà fent una mitjana de les tres pulsacions anteriors així:

mitjana de const = 3;

const prev_bpms = [60]; let prev_click = new Date () const getBPM = function () {const currentTime = new Date (); interval de constància = (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; retorn bpm; } get_bpm (); // per exemple. 120

A més, no tothom vol prémer el botó, sinó una tecla:

// activador de la barra espaiadora

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // habilitat instantània document.querySelector ('. botó de clic'). focus ();

Ara, els usuaris també poden tocar amb la barra espaiadora tan bon punt s'ha carregat la pàgina.

Pas 3: escolteu el vostre BPM

Heu introduït el vostre BPM, però ara voleu reproduir-lo perquè pugueu reproduir el vostre tempo preferit.

Per fer-ho, hem de fer sonar. Però com? Tenim dues opcions integrades al navegador AudioAPI, utilitzar un fitxer de so o crear un sintetitzador. Primer farem servir el sintetitzador per crear un so:

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

deixem context, oscil·lador; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (pitit, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); oscil·lador = context.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Ara fem una cosa similar mitjançant un fitxer d'àudio:

const clic = àudio 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); };

Finalment afegint la lògica que els controla:

// JSlet isPlayerPlaying = fals;

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

Pas 4: ajuntar-ho tot

Ara, reunint totes les funcions i afegint una mica d’estil (cosa que no explicaré), tenim aquest producte final:

No sé quant de codis volen veure la gent directament a l'article, així que trobeu el codi complet a

Pas 5: ús efectiu (només per a usuaris d’OSX)

Si ja heu utilitzat un Mac, és possible que hagueu topat amb l’aplicació nativa Dashboard, però probablement no us haureu quedat molt de temps.

Mai l’he utilitzat mai … fins ara. A Safari podeu fer clic amb el botó dret a la pàgina, cosa que de vegades fa que aparegui una selecció d'accions, inclosa l'obertura al tauler …

En fer-hi clic, apareixerà un creador de widgets per a pàgines web. Podeu seleccionar una part de la pàgina que vulgueu afegir al tauler. Aquesta és una característica força interessant, però per al nostre cas, és una característica fantàstica. En obrir el comptador de BPM que acabem de fer, podeu seleccionar la casella així:

Ara utilitzeu la drecera de la tecla F12. BOOM. Mai ha estat tan fàcil crear vostès widgets de forma ràpida i senzilla.

Pas 6: Notes

És possible que us pregunteu per què aquest no inclou la funció de reproducció de metrònoms. Quan vaig intentar fer-lo servir al tauler, el programa no reproduïa àudio de manera fiable: (però almenys Logic pot fer fàcilment aquesta part.

I la raó per la qual us vaig mostrar com crear sons de dues maneres diferents és que la versió del context d'àudio que utilitza un sintetitzador no funcionaria dins del tauler.

Finalment, no podeu fer clic a F12 i continuar fent servir la barra espaiadora per obtenir el tempo, sinó que heu de fer clic directament al botó, que és una versió inferior. Però crec que és possible que a partir d’ara facin petits ginys. Si teniu alguna idea interessant per a això, mostreu-me quan les heu implementat:)

Inscriviu-vos a la nostra llista de correu!

I sí, fes un cop d'ull a T3chFlicks: fem coses.