Maak maklik u eie widgets - vinnige BPM -toonbank: 6 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Webprogramme is algemeen, maar webprogramme wat nie internettoegang benodig nie, is dit nie.

In hierdie artikel wys ek u hoe ek 'n BPM -teller gemaak het in 'n eenvoudige HTML -bladsy, tesame met vanielje -javascript (sien hier). As dit afgelaai is, kan hierdie widget vanlyn gebruik word - ideaal vir musikante wat wil skep, maar nie altyd internettoegang het nie. Nog beter, deur die OSX -dashboard -app te gebruik (wat nog nooit so nuttig gelyk het nie), kan ons hierdie BPM Counter ekstra vinnig maak om te gebruik.

Stap 1: Hoe moet dit lyk?

Dit is duidelik dat die antwoord op die vraag 'n mening is. My standpunt is dat dit super eenvoudig moet wees en net moet doen wat 'n BPM -toonbank nodig het: tel slae per minuut. Daarom is dit net 'n knoppie en 'n telwaarde.

Stap 2: Die logika

Die berekening van BPM is net so maklik as om die tyd tussen twee opeenvolgende slae te meet en te bereken hoeveel hiervan in 'n minuut kan pas.

laat prev_click = nuwe datum (); const getBPM = funksie () {const currentTime = nuwe datum (); const interval = (currentTime - prev_click)/1000; konst bpm = 60/interval; prev_click = currentTime; terugkeer bpm; } get_bpm (); // bv. 120

Ek het dit verder geneem deur die gemiddelde van die 3 vorige slae soos volg te maak:

const gemiddelde = 3;

const prev_bpms = [60]; laat prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click) / 1000; konst bpm = 60 / interval; prev_click = currentTime; terwyl (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; terugkeer bpm; } get_bpm (); // bv. 120

Nie almal wil ook op die knoppie druk nie, maar miskien 'n sleutel:

// spasiebalk sneller

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // onmiddellike vermoë document.querySelector ('. klikknoppie'). fokus ();

Nou kan gebruikers ook met die spasiebalk tik sodra die bladsy gelaai is.

Stap 3: Luister na u BPM

U het u BPM ingeskakel, maar nou wil u dit terugspeel sodat u na u gunsteling tempo kan kyk.

Om dit te kan doen, moet ons klank maak. Maar hoe? Ons het twee opsies ingebou in die blaaier AudioAPI, gebruik 'n klanklêer of skep 'n sintetiseerder. Ons gebruik eers die sintetiseerder om 'n piep te maak:

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

laat konteks, ossillator; const bpm = 60; konst bpmInterval = 60/bpm * 1000; // mssetInterval (piep, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); ossillator = context.createOscillator (); ossillator.tipe = "sinus"; ossillator.start (0); ossillator.koppel (konteksbestemming); setTimeout (oscillator.disconnect, 150, context.destination); }

Kom ons doen 'n soortgelyke ding in plaas daarvan met 'n oudiolêer:

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

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

Voeg uiteindelik die logika by wat hulle beheer:

// JSlet isPlayerPlaying = false;

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

Stap 4: Alles saamvoeg

As ons nou al die funksies bymekaar sit en 'n bietjie stilering byvoeg (wat ek nie gaan verduidelik nie), het ons hierdie finale produk:

Ek weet nie hoeveel kode mense regtig in die artikel wil sien nie, so vind die volledige kode op

Stap 5: Doeltreffende gebruik (slegs OSX -gebruikers)

As u voorheen 'n Mac gebruik het, het u moontlik die oorspronklike Dashboard -app raakgeloop, maar u sal waarskynlik nie lank gebly het nie.

Ek het dit nog nooit regtig gebruik nie … tot nou toe. In Safari kan u met die rechtermuisknop op die bladsy klik, wat soms veroorsaak dat 'n aksie -seleksie verskyn, insluitend oop in die paneelbord …

As u hierop klik, sal u 'n widget -skepper van die webblad aan u openbaar. U kan 'n deel van die bladsy wat u by u dashboard wil voeg, kies. Dit is 'n baie gawe funksie, maar vir ons geval is dit 'n super cool funksie. As u die BPM -toonbank oopmaak wat ons so pas gemaak het, kan u die kassie soos volg kies:

Gebruik nou die kortpad van die F12 -sleutel. BOOM. Dit was nog nooit so maklik om widgets self te maak nie, vinnig en maklik.

Stap 6: Notas

U wonder miskien waarom hierdie een nie die metronoom -afspeelfunksie bevat nie. Toe ek probeer om dit in die paneelbord te gebruik, sou die program die klank nie betroubaar afspeel nie: (Maar ten minste kan Logic die deel maklik doen.

En die rede waarom ek u op twee verskillende maniere gewys het hoe om klanke te skep, is omdat die Audio Context -weergawe met 'n sintetiseerder nie binne die paneelbord sou werk nie.

Uiteindelik kan u nie net op F12 klik nie en die spasiebalk gebruik om die tempo te kry; u moet direk op die knoppie klik, wat 'n afgradering is. Maar ek dink dit is moontlik hoe ek van nou af klein widgets kan maak. As u goeie idees hiervoor het, wys my dan wanneer u dit geïmplementeer het:)

Teken in op ons poslys!

En ja, kyk na T3chFlicks - ons maak goed!