Crea facilmente i tuoi widget - Contatore BPM veloce: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

Le app Web sono un luogo comune, ma le app Web che non richiedono l'accesso a Internet non lo sono.

In questo articolo ti mostro come ho realizzato un contatore BPM in una semplice pagina HTML accoppiata a javascript vaniglia (vedi qui). Se scaricato, questo widget può essere utilizzato offline, ideale per i musicisti che desiderano creare ma non sempre hanno accesso a Internet. Ancora meglio, utilizzando l'app OSX dashboard (che non è mai sembrata così utile prima), possiamo rendere questo contatore BPM estremamente veloce da usare.

Passaggio 1: come dovrebbe essere?

Ovviamente, la risposta alla domanda è una questione di opinione. La mia posizione è che dovrebbe essere semplicissimo e fare solo ciò di cui un contatore BPM ha bisogno: contare i battiti al minuto. Pertanto, tutto ciò che deve essere è un pulsante e un valore di conteggio.

Passaggio 2: la logica

La stima del BPM è facile come misurare il tempo tra due battiti sequenziali e calcolare quanti di questi potresti inserire in un minuto.

let prev_click = new Date();const getBPM = function(){ const currentTime = new Date(); const interval = (currentTime - prev_click)/1000; const bpm = 60/intervallo; prev_click = oracorrente; ritorno bpm; } get_bpm(); // per esempio. 120

Mi sono spinto oltre facendo la media dei 3 battiti precedenti in questo modo:

const media = 3;

const prev_bpms = [60]; let prev_click = new Date() const getBPM = function() { const currentTime = new Date(); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / intervallo; prev_click = oracorrente; while (prev_bpms.length > prev_bpm_list_max_length) { prev_bpms.shift(); } prev_bpms.push(bpm); media_bpm = prev_bpms.reduce((acc, cVal) => acc + cVal) / prev_bpms.length; ritorno bpm; } get_bpm(); // per esempio. 120

Inoltre, non tutti vogliono premere il pulsante ma forse invece un tasto:

// grilletto della barra spaziatrice

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

Ora, gli utenti possono anche toccare utilizzando la barra spaziatrice non appena la pagina è stata caricata.

Passaggio 3: ascolta il tuo BPM

Hai inserito il tuo BPM, ma ora vuoi riprodurlo in modo da poter suonare al tuo tempo preferito.

Per fare questo, dobbiamo emettere suoni. Ma come? Abbiamo due opzioni integrate nel browser AudioAPI, usa un file audio o crea un sintetizzatore. Per prima cosa utilizzeremo il sintetizzatore per creare un segnale acustico:

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

let contesto, oscillatore;const bpm = 60; const bpmInterval = 60/bpm * 1000; //msetInterval(beep, bpmInterval); const beep = function(){ if(!context) context = new AudioContext(); oscillatore = context.createOscillator(); oscillator.type = "seno"; oscillatore.start(0); oscillator.connect(context.destination); setTimeout(oscillator.disconnect, 150, context.destination); }

Ora facciamo una cosa simile usando invece un file audio:

const click = new Audio('./cowbell.mp3');

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

Aggiungendo infine la logica che li controlla:

// JSlet isPlayerPlaying = false;

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

Passaggio 4: mettere tutto insieme

Ora mettendo insieme tutte le funzionalità e aggiungendo un po' di stile (che non spiegherò), abbiamo questo prodotto finale:

Non so quanto codice le persone vogliano davvero vedere direttamente nell'articolo, quindi trova il codice completo su

Passaggio 5: utilizzo effettivo (solo utenti OSX)

Se hai già usato un Mac, potresti esserti imbattuto nell'app Dashboard nativa, ma probabilmente non rimarrai a lungo.

Non l'ho mai usato davvero… fino ad ora. In Safari puoi fare clic con il pulsante destro del mouse sulla pagina, che a volte fa apparire una selezione di azioni, inclusa l'apertura nella dashboard…

Facendo clic su questo ti verrà mostrato un creatore di widget di una pagina web. Puoi selezionare la parte della pagina che desideri aggiungere alla tua dashboard. Questa è una funzionalità piuttosto interessante, ma per il nostro caso è una funzionalità super interessante. Aprendo il contatore BPM che abbiamo appena creato, puoi selezionare la casella in questo modo:

Ora usa la scorciatoia del tasto F12. BOOM. Non è mai stato così facile creare widget da soli, in modo rapido e semplice.

Passaggio 6: note

Potresti chiederti perché questo non include la funzione di riproduzione del metronomo. Quando ho tentato di usarlo nella dashboard, il programma non riproduceva in modo affidabile l'audio: (ma almeno Logic può facilmente fare quella parte.

E il motivo per cui ti ho mostrato come creare suoni in due modi diversi è perché la versione Audio Context che utilizza un sintetizzatore non funzionerebbe all'interno della dashboard.

Infine, non puoi semplicemente fare clic su F12 e continuare a utilizzare la barra spaziatrice per ottenere il tempo, devi fare clic direttamente sul pulsante, che è un downgrade. Ma penso che questo potrebbe essere il modo in cui realizzerò piccoli widget da ora in poi. Se hai qualche idea interessante per questo, fammi vedere quando le hai implementate:)

Iscriviti alla nostra mailing list!

E sì, dai un'occhiata a T3chFlicks: facciamo cose!