Maak eenvoudig uw eigen widgets - Snelle BPM-teller - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Web-apps zijn gebruikelijk, maar web-apps waarvoor geen internettoegang nodig is, zijn dat niet.

In dit artikel laat ik je zien hoe ik een BPM Counter heb gemaakt in een simpele HTML-pagina gekoppeld aan vanilla javascript (zie hier). Indien gedownload, kan deze widget offline worden gebruikt - ideaal voor muzikanten die willen creëren, maar niet altijd toegang hebben tot internet. Sterker nog, door gebruik te maken van de OSX dashboard-app (die nog nooit zo handig leek), kunnen we deze BPM Counter extra snel in gebruik maken.

Stap 1: Hoe moet het eruit zien?

Uiteraard is het antwoord op de vraag een kwestie van mening. Mijn standpunt is dat het supereenvoudig moet zijn en alleen moet doen wat een BPM-teller moet doen: Beats Per Minute tellen. Daarom hoeft het alleen maar een knop en een telwaarde te zijn.

Stap 2: De logica

Het schatten van BPM is net zo eenvoudig als het meten van de tijd tussen twee opeenvolgende beats en het berekenen van hoeveel hiervan in een minuut passen.

let prev_click = new Date();const getBPM = function (){ const currentTime = new Date(); const interval = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = huidigeTijd; terug bpm; } get_bpm(); // bijv. 120

Ik ging verder door het gemiddelde te nemen van de 3 vorige beats als volgt:

const middeling = 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 / interval; prev_click = huidigeTijd; while (prev_bpms.length > prev_bpm_list_max_length) { prev_bpms.shift(); } prev_bpms.push(bpm); gemiddelde_bpm = prev_bpms.reduce((acc, cVal) => acc + cVal) / prev_bpms.length; terug bpm; } get_bpm(); // bijv. 120

Ook wil niet iedereen op de knop drukken, maar misschien in plaats daarvan een toets:

// spatiebalk trigger

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

Nu kunnen gebruikers ook tikken met de spatiebalk zodra de pagina is geladen.

Stap 3: Hoor uw BPM

Je hebt je BPM ingetikt, maar nu wil je het afspelen zodat je mee kunt jammen op je favoriete tempo.

Om dit te doen, moeten we geluid maken. Maar hoe? We hebben twee opties ingebouwd in de browser AudioAPI, een geluidsbestand gebruiken of een synthesizer maken. We gebruiken eerst de synthesizer om een pieptoon te maken:

const AudioContext = venster. AudioContext || venster.webkitAudioContext;

laat context, oscillator;const bpm = 60; const bpmInterval = 60/spm * 1000; //mssetInterval (pieptoon, bpmInterval); const beep = function (){ if(!context) context = new AudioContext(); oscillator = context.createOscillator(); oscillator.type = "sinus"; oscillator.start(0); oscillator.connect(context.bestemming); setTimeout(oscillator.disconnect, 150, context.destination); }

Laten we nu iets soortgelijks doen met een audiobestand:

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

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

Eindelijk de logica toevoegend die ze bestuurt:

// JSlet isPlayerPlaying = false;

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

Stap 4: Alles samenbrengen

Nu we alle functies samenvoegen en een beetje styling toevoegen (wat ik niet ga uitleggen), hebben we dit eindproduct:

Ik weet niet hoeveel code mensen echt direct in het artikel willen zien, dus vind de volledige code op

Stap 5: Effectief gebruik (alleen OSX-gebruikers)

Als je eerder een mac hebt gebruikt, ben je misschien de native Dashboard-app tegengekomen, maar je zult waarschijnlijk niet lang zijn gebleven.

Ik heb het nooit echt gebruikt … tot nu toe. In Safari kun je met de rechtermuisknop op de pagina klikken, waardoor er soms een actieselectie verschijnt, inclusief openen in dashboard …

Als u hierop klikt, wordt een maker van een webpagina-widget weergegeven. U kunt een deel van de pagina selecteren dat u aan uw dashboard wilt toevoegen. Dit is een behoorlijk coole functie, maar voor ons geval is het een super coole functie. Als je de BPM-teller opent die we zojuist hebben gemaakt, kun je het vakje als volgt selecteren:

Gebruik nu de sneltoets van de F12-toets. BOOM. Het was nog nooit zo eenvoudig om snel en eenvoudig zelf widgets te maken.

Stap 6: Opmerkingen

Je vraagt je misschien af waarom deze de functie voor het afspelen van metronoom niet bevat. Toen ik het in het dashboard probeerde te gebruiken, speelde het programma de audio niet betrouwbaar af: (Maar Logic kan dat deel tenminste gemakkelijk doen.

En de reden waarom ik je liet zien hoe je op twee verschillende manieren geluiden kunt maken, is omdat de Audio Context-versie met een synthesizer niet in het dashboard zou werken.

Ten slotte kun je niet gewoon op F12 klikken en doorgaan met het gebruiken van de spatiebalk om het tempo te krijgen, je moet direct op de knop klikken, wat een downgrade is. Maar ik denk dat dit de manier is waarop ik voortaan kleine widgets maak. Als je hier leuke ideeën voor hebt, laat me dan zien wanneer je ze hebt geïmplementeerd:)

Schrijf je in op onze mailinglijst!

En ja, kijk eens naar T3chFlicks - we maken dingen!