Snadné vytváření vlastních widgetů - rychlé počítadlo BPM: 6 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:18

Webové aplikace jsou běžným místem, ale webové aplikace, které nevyžadují přístup k internetu, nejsou.

V tomto článku vám ukážu, jak jsem vytvořil počítadlo BPM na jednoduché stránce HTML spojené s vanilkovým javascriptem (viz zde). Pokud si tento widget stáhnete, lze jej použít offline - ideální pro hudebníky, kteří chtějí tvořit, ale nemají vždy přístup k internetu. Ještě lépe, pomocí aplikace na řídicím panelu OSX (která se nikdy předtím nezdála tak užitečná) můžeme tento čítač BPM udělat velmi rychle použitelným.

Krok 1: Jak by měl vypadat?

Je zřejmé, že odpověď na otázku je věcí názoru. Můj postoj je, že by měl být velmi jednoduchý a dělat pouze to, co počítadlo BPM potřebuje: počítat údery za minutu. Proto musí být pouze tlačítko a hodnota počítání.

Krok 2: Logika

Odhadnout BPM je stejně snadné jako změřit čas mezi dvěma sekvenčními údery a vypočítat, kolik z nich se vám vejde za minutu.

nechte prev_click = nové Datum (); konst getBPM = funkce () {konst aktuálníČas = nové Datum (); konstantní interval = (currentTime - předchozí_klik)/1000; konst. bpm = 60/interval; prev_click = currentTime; návrat bpm; } get_bpm (); // např. 120

Posunul jsem to dále průměrováním 3 předchozích úderů takto:

průměrování konstant = 3;

const prev_bpms = [60]; nechte prev_click = nové datum () const getBPM = funkce () {const currentTime = nové Datum (); konstantní interval = (aktuální čas - předchozí_klik) / 1000; konst. 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; návrat bpm; } get_bpm (); // např. 120

Také ne každý chce stisknout tlačítko, ale možná místo toho klávesu:

// mezerník spoušť

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // okamžitá schopnost document.querySelector ('. tlačítko klikače'). focus ();

Nyní mohou uživatelé také klepnout pomocí mezerníku, jakmile se stránka načte.

Krok 3: Poslechněte si svůj BPM

Klepli jste na svůj BPM, ale nyní si jej chcete přehrát, abyste si mohli jamovat podle svého oblíbeného tempa.

K tomu musíme vydat zvuk. Ale jak? V prohlížeči AudioAPI máme zabudovány dvě možnosti, použít zvukový soubor nebo vytvořit syntetizátor. Nejprve použijeme syntetizátor k vytvoření pípnutí:

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

nechte kontext, oscilátor; konst. bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (píp, bpmInterval); konst pípnutí = funkce () {if (! kontext) kontext = nový AudioContext (); oscilátor = kontext.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); oscillator.connect (kontext.destinace); setTimeout (oscillator.disconnect, 150, context.destination); }

Nyní uděláme místo toho podobnou věc pomocí zvukového souboru:

const click = nový zvuk (‘./ cowbell.mp3’);

konst. bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (píp, bpmInterval); konst píp = funkce () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0,0;}, 150); };

Nakonec přidáme logiku, která je ovládá:

// JSlet isPlayerPlaying = false;

nechte bpmRepeaterId; const togglePlayerOutput = funkce () {const tlačítko = document.querySelector ('. tlačítko přehrávače'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (píp, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Krok 4: Dát to všechno dohromady

Když nyní spojíme všechny funkce a přidáme trochu stylu (což nebudu vysvětlovat), máme tento konečný produkt:

Nevím, kolik kódu lidé opravdu chtějí vidět přímo v článku, takže úplný kód najdete na

Krok 5: Efektivní používání (pouze uživatelé OSX)

Pokud jste dříve používali mac, možná jste narazili na nativní aplikaci Dashboard, ale pravděpodobně nezůstanete dlouho.

Nikdy jsem to opravdu nepoužil … až dosud. V prohlížeči Safari můžete na stránku kliknout pravým tlačítkem, což někdy způsobí vyskočení výběru akce, včetně otevření na hlavním panelu …

Kliknutím na toto tlačítko se vám zobrazí tvůrce widgetu webové stránky. Můžete vybrat část stránky, kterou chcete přidat na hlavní panel. Je to docela skvělá funkce, ale pro náš případ je to super skvělá funkce. Otevření počítadla BPM, které jsme právě vytvořili, můžete vybrat takto:

Nyní použijte klávesovou zkratku F12. VÝLOŽNÍK. Nikdy nebylo tak snadné vytvářet widgety sami, rychle a snadno.

Krok 6: Poznámky

Možná si říkáte, proč tento neobsahuje funkci přehrávání metronomu. Když jsem se to pokusil použít na palubní desce, program by spolehlivě nepřehrál zvuk: (Ale alespoň Logic tuto část snadno zvládne.

A důvod, proč jsem vám ukázal, jak vytvářet zvuky dvěma různými způsoby, je ten, že verze Audio Context pomocí syntetizátoru by nefungovala uvnitř palubní desky.

Nakonec nemůžete jednoduše kliknout na F12 a pokračovat v používání mezerníku k získání tempa, musíte kliknout přímo na tlačítko, což je downgrade. Ale myslím si, že od této chvíle mohu dělat malé widgety. Pokud na to máte nějaké skvělé nápady, ukažte mi je, až je implementujete:)

Zaregistrujte se do našeho seznamu adresátů!

A jo, podívejte se na T3chFlicks - děláme věci!