Łatwe tworzenie własnych widżetów - szybki licznik BPM: 6 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

Aplikacje internetowe są powszechne, ale aplikacje internetowe, które nie wymagają dostępu do Internetu, nie są.

W tym artykule pokażę, jak stworzyłem licznik BPM na prostej stronie HTML w połączeniu z waniliowym javascriptem (patrz tutaj). Po pobraniu ten widżet może być używany w trybie offline - idealny dla muzyków, którzy chcą tworzyć, ale nie zawsze mają dostęp do Internetu. Co więcej, korzystając z aplikacji pulpitu nawigacyjnego OSX (która nigdy wcześniej nie wydawała się tak przydatna), możemy sprawić, że ten licznik BPM będzie bardzo szybki w użyciu.

Krok 1: Jak to powinno wyglądać?

Oczywiście odpowiedź na pytanie jest kwestią opinii. Moje stanowisko jest takie, że powinno to być bardzo proste i robić tylko to, czego potrzebuje licznik BPM: liczyć uderzenia na minutę. Dlatego wystarczy tylko przycisk i wartość licznika.

Krok 2: Logika

Szacowanie BPM jest tak proste, jak mierzenie czasu między dwoma kolejnymi uderzeniami i obliczanie, ile z nich można zmieścić w ciągu minuty.

let prev_click = new Date();const getBPM = function (){ const currentTime = new Date(); const interval = (currentTime - prev_click)/1000; const bpm = 60/interwał; prev_click = aktualnyCzas; powrót uderzeń na minutę; } get_bpm(); // np. 120

Poszedłem dalej, uśredniając 3 poprzednie uderzenia w ten sposób:

const uśrednianie = 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 / interwał; prev_click = aktualnyCzas; while (prev_bpms.length > prev_bpm_list_max_length) { prev_bpms.shift(); } prev_bpms.push(bpm); średnie_bpm = prev_bpms.reduce((acc, cVal) => acc + cVal) / prev_bpms.length; powrót uderzeń na minutę; } get_bpm(); // np. 120

Poza tym nie każdy chce nacisnąć przycisk, ale może zamiast tego klawisz:

// spacja wyzwalacz

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

Teraz użytkownicy mogą również dotknąć za pomocą spacji, gdy tylko strona się załaduje.

Krok 3: Usłysz swój BPM

Nastawiłeś swój BPM, ale teraz chcesz go odtworzyć, aby móc jammować w swoim ulubionym tempie.

Aby to zrobić, musimy wydać dźwięk. Ale jak? Mamy dwie opcje wbudowane w przeglądarkę AudioAPI, użyj pliku dźwiękowego lub utwórz syntezator. Najpierw użyjemy syntezatora do stworzenia sygnału dźwiękowego:

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

niech kontekst, oscylator; const bpm = 60; const bpmInterval = 60/bpm * 1000; //mssetInterval(bip, bpmInterval); const beep = function(){ if(!context) context = new AudioContext(); oscylator = context.createOscillator(); oscylator.type = "sinus"; oscylator.start(0); oscylator.connect(kontekst.miejsce docelowe); setTimeout(oscillator.disconnect, 150, context.destination); }

Teraz zróbmy podobną rzecz, używając pliku audio:

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

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

Na koniec dodaj logikę, która je kontroluje:

// JSlet isPlayerPlaying = false;

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

Krok 4: Składanie wszystkiego razem

Teraz łącząc wszystkie funkcje i dodając trochę stylizacji (której nie będę wyjaśniał), mamy ten produkt końcowy:

Nie wiem, ile kodu ludzie naprawdę chcą zobaczyć bezpośrednio w artykule, więc znajdź pełny kod na

Krok 5: Efektywne użytkowanie (tylko użytkownicy OSX)

Jeśli wcześniej korzystałeś z komputera Mac, być może natknąłeś się na natywną aplikację Dashboard, ale prawdopodobnie nie zostaniesz długo.

Tak naprawdę nigdy go nie używałem… aż do teraz. W Safari możesz kliknąć prawym przyciskiem myszy na stronie, co czasami powoduje wyskakujące okienko wyboru akcji, w tym otwórz na pulpicie nawigacyjnym…

Kliknięcie tego spowoduje wyświetlenie kreatora widżetów strony internetowej. Możesz wybrać część strony, którą chcesz dodać do swojego pulpitu nawigacyjnego. To całkiem fajna funkcja, ale w naszym przypadku jest to super fajna funkcja. Otwierając licznik BPM, który właśnie stworzyliśmy, możesz wybrać pole w następujący sposób:

Teraz użyj skrótu klawisza F12. BUM. Samodzielne tworzenie widżetów nigdy nie było tak proste, szybkie i łatwe.

Krok 6: Notatki

Być może zastanawiasz się, dlaczego ten nie zawiera funkcji odtwarzania metronomu. Kiedy próbowałem go użyć na desce rozdzielczej, program nie odtwarzał dźwięku:(Ale przynajmniej Logic może z łatwością wykonać tę część.

Powodem, dla którego pokazałem wam, jak tworzyć dźwięki na dwa różne sposoby, jest to, że wersja Audio Context z syntezatorem nie działałaby wewnątrz deski rozdzielczej.

Wreszcie, nie możesz po prostu kliknąć F12 i przejść do używania spacji, aby uzyskać tempo, musisz bezpośrednio kliknąć przycisk, co oznacza obniżenie. Ale myślę, że od teraz mogę tworzyć małe widżety. Jeśli masz na to jakieś fajne pomysły, pokaż mi, kiedy je wdrożyłeś:)

Zapisz się na naszą listę mailingową!

I tak, sprawdź T3chFlicks - robimy rzeczy!