Interaktywny Pad Muzyczny to mój projekt własny i jednocześnie sprawdzian tego, jak daleko da się zajść z dźwiękiem w przeglądarce. Bez wtyczek, bez instalacji, bez konta.
Powstał instrument z 16 padami, trzema trybami odtwarzania, wizualizacją dźwięku i nagrywaniem sesji, oparty na Web Audio API i Tone.js.
01 / WyzwaniePrzeglądarka nie jest oczywistym miejscem na instrument
Dźwięk w przeglądarce ma dwa problemy naraz. Techniczny: opóźnienie między naciśnięciem a dźwiękiem musi być na tyle małe, żeby dało się grać do rytmu. I projektowy: narzędzie muzyczne zwykle zakłada, że użytkownik już coś umie.
- Zbyt duże opóźnienie zamienia instrument w zabawkę, w której nie da się trafić w rytm.
- Interfejs oparty na myszce ogranicza do jednego dźwięku naraz.
- Osoba bez przygotowania muzycznego potrzebuje zagrać coś sensownego w pierwszej minucie, inaczej zamyka kartę.
Instrument, który wymaga instrukcji, przegrywa z instrumentem, na którym da się przypadkiem zagrać coś, co brzmi dobrze.
02 / RozwiązanieSzesnaście padów, klawiatura i natychmiastowa reakcja
Warstwa dźwiękowa stoi na Web Audio API z Tone.js, co pozwala trzymać opóźnienie na poziomie akceptowalnym do gry. Interfejs to siatka 16 padów, każdy z przypisanym dźwiękiem.
Trzy tryby zamiast jednego sposobu grania
Tryb normalny odtwarza dźwięk raz. Pulsujący powtarza go w rytmie. Ciągły trzyma go, dopóki pad jest aktywny. Te trzy zachowania wystarczają, żeby z pojedynczych dźwięków dało się złożyć coś, co ma strukturę.
Myszka obsługuje jeden pad naraz. Klawiatura pozwala trzymać kilka dźwięków jednocześnie i grać obiema rękami, czyli robić to, po co w ogóle sięga się po pad.
Wizualizacja i nagrywanie
Fala dźwiękowa pokazuje, co dzieje się w danym momencie, a nagrywanie pozwala zapisać sesję i wyeksportować ją. Bez tego drugiego całość zostałaby zabawką, a nie narzędziem.
03 / RezultatInstrument, który zaczyna się od kliknięcia w link
Pad działa w przeglądarce, na 16 padach, z trzema trybami odtwarzania i nagrywaniem. Nie zastępuje programu do produkcji muzyki, ale kasuje wszystko, co zwykle stoi między pomysłem a pierwszym dźwiękiem.
DodatkowoCo jeszcze przy okazji się udało
- Sterowanie z klawiatury, więc da się grać obiema rękami.
- Wizualizacja fali dźwiękowej pokazuje, co się właśnie dzieje.
- Sesję można nagrać i wyeksportować.
Zastanawiasz się, czy dana rzecz da się zrobić w przeglądarce zamiast w aplikacji do zainstalowania? Napisz do mnie. Odpowiedź jest częściej twierdząca, niż się wydaje.
