Gör dina egna widgets enkelt - Snabb BPM -räknare: 6 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:37

Webbappar är vanligt förekommande, men det gör inte webbappar som inte kräver internetåtkomst.

I den här artikeln visar jag dig hur jag gjorde en BPM -räknare på en enkel HTML -sida i kombination med vaniljjavascript (se här). Om den är nedladdad kan denna widget användas offline - perfekt för musiker som vill skapa men inte alltid har tillgång till internet. Ännu bättre, genom att använda OSX -instrumentpanelen (som aldrig verkade så användbar tidigare) kan vi göra denna BPM -räknare extra snabb att använda.

Steg 1: Hur ska det se ut?

Svaret på frågan är uppenbarligen en åsiktsfråga. Min ståndpunkt är att det ska vara superenkelt och bara göra vad en BPM -räknare behöver: räkna slag per minut. Därför behöver det bara vara en knapp och ett räkningsvärde.

Steg 2: Logiken

Att uppskatta BPM är lika enkelt som att mäta tiden mellan två sekventiella slag och beräkna hur många av dessa du kan passa på en minut.

låt prev_click = nytt datum (); const getBPM = funktion () {const currentTime = nytt datum (); const -intervall = (currentTime - prev_click)/1000; const bpm = 60/intervall; prev_click = currentTime; retur bpm; } get_bpm (); // t.ex. 120

Jag tog det här ytterligare genom att snitta de 3 föregående slagen i genomsnitt så här:

const medelvärde = 3;

const prev_bpms = [60]; låt prev_click = nytt datum () const getBPM = funktion () {const currentTime = nytt datum (); const -intervall = (currentTime - prev_click) / 1000; const bpm = 60 / intervall; prev_click = currentTime; medan (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); genomsnitt_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; retur bpm; } get_bpm (); // t.ex. 120

Inte alla vill också trycka på knappen men kanske istället en knapp:

// mellanslagstrigger

window.addEventListener ('tangenttryckning', (e) => {if (e.code === 32) getBPM ();}); // omedelbar förmåga document.querySelector ('. klickarknapp'). fokus ();

Nu kan användare också trycka på med mellanslagstangenten så snart sidan har laddats.

Steg 3: Hör din BPM

Du har tryckt på din BPM, men nu vill du spela upp det så att du kan fortsätta till ditt favorittempo.

För att göra detta måste vi göra ljud. Men hur? Vi har två alternativ inbyggda i webbläsaren AudioAPI, använd en ljudfil eller skapa en synt. Vi använder först synthesizern för att skapa ett pip:

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

låt kontext, oscillator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (pip, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); oscillator = context.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Låt oss nu göra en liknande sak med en ljudfil istället:

const click = nytt ljud (‘./ cowbell.mp3’);

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

Slutligen lägger jag till logiken som styr dem:

// JSlet isPlayerPlaying = false;

låt bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. player button'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pip, bpmInterval); } annat {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Steg 4: Att sätta ihop allt

Nu lägger vi ihop alla funktioner och lägger till lite styling (vilket jag inte kommer att förklara), vi har den här slutprodukten:

Jag vet inte hur mycket kod folk verkligen vill se direkt i artikeln, så hitta hela koden på

Steg 5: Effektiv användning (endast OSX -användare)

Om du har använt en Mac tidigare kanske du har snubblat över den inbyggda Dashboard -appen, men du kommer förmodligen inte ha stannat länge.

Jag har aldrig riktigt använt det … förrän nu. I Safari kan du högerklicka på sidan, vilket ibland får ett åtgärdsval att dyka upp inklusive öppet i instrumentpanelen …

Om du klickar på detta visas en skapare av en widget för en webbsida. Du kan välja en del av sidan som du vill lägga till i din instrumentpanel. Det här är en ganska cool funktion, men för vårt fall är det en superkul funktion. Öppna BPM -räknaren vi just gjorde kan du välja rutan så här:

Använd nu genvägen till F12 -tangenten. BOM. Det har aldrig varit så enkelt att skapa widgets själv, snabbt och enkelt.

Steg 6: Anteckningar

Du kanske undrar varför den här inte inkluderar metronomuppspelningsfunktionen. När jag försökte använda den i instrumentpanelen skulle programmet inte spela upp ljudet på ett tillförlitligt sätt: (Men åtminstone Logic kan enkelt göra den delen.

Och anledningen till att jag visade dig hur du skapar ljud på två olika sätt är att Audio Context -versionen med en synthesizer inte skulle fungera inuti instrumentpanelen.

Slutligen kan du inte bara klicka på F12 och fortsätta använda mellanslagstangenten för att få tempot, du måste klicka på knappen direkt, vilket är en nedgradering. Men jag tror att det kan vara så här jag gör små widgets från och med nu. Om du har några coola idéer för detta, visa mig när du har implementerat dem:)

Anmäl dig till vår e -postlista!

Och ja, kolla in T3chFlicks - vi gör saker!