Realizacja / Autorskie
PlasticSynth.
Instrumenty w przeglądarce
Zestaw 16 przeglądarkowych instrumentów — syntezatory, automaty perkusyjne i sekwencery, bez instalacji.
- Rodzaj projektu
- Autorskie
- Zakres
- Projekt, budowa i rozwój
- Rok
- 2026
- Obszar
- Instrumenty w przeglądarce
- Adres strony
- plasticsynth.com (otwiera nową kartę)
01 / Kontekst
Pomysł i zakres produktu
Kolekcja 16 grywalnych instrumentów — syntezatorów, automatów perkusyjnych, sekwencerów i samplerów — działających bez instalacji, w karcie przeglądarki. Tryb Studio pozwala nakładać instrumenty na siebie i budować z nich całe utwory.
03 / Wykonanie
Decyzje widoczne w szczegółach
Pomysł w działającym interfejsie
- Szesnaście instrumentów wybieranych z jednego ekranu, bez instalacji i bez konta
- Różne sposoby grania, nie warianty jednego: klawiatura, wstęga, siatka perkusyjna, theremin
- Osobna strona każdego instrumentu, żeby dało się trafić prosto do jednego
Szczegóły sposobu użycia
- Sekwencer, bas i progresje, żeby dało się złożyć całość, a nie tylko pojedyncze dźwięki
- Sampler na własne nagrania obok gotowych maszyn
- Tryb studio i jam oddzielone: jedno do budowania, drugie do grania
Zakres / pozostałe elementy
Co zostało zbudowane
- Akademia z 11 materiałami dla kogoś, kto pierwszy raz widzi sekwencer
- Galeria z tym, co zrobili inni, jako powód do powrotu
04 / Funkcje i technika
Co ta strona potrafi
Widać ją od razu
0,34 sGłówna treść pojawia się w 0,34 s — zanim ktokolwiek zdąży się zniecierpliwić i wrócić do wyników wyszukiwania.
LCP — largest contentful paint — czas do największego elementu
Da się z niej korzystać bez myszy
23 testówPlasticSynth przechodzi 23 automatyczne testy dostępności bez jednego poważnego błędu: obsłużysz ją klawiaturą, przeczyta ją czytnik ekranu.
WCAG 2.2 AA — wytyczne dostępności W3C, poziom AA
Działa bez zasięgu
PlasticSynth otworzy się nawet wtedy, gdy telefon zgubi zasięg — raz obejrzane strony zostają w pamięci przeglądarki.
Service worker — skrypt buforujący po stronie przeglądarki
Pod maską (5)
- W Google pokazuje więcej niż tytułaplikacja, oferta, lista ofert
- Wyszukiwarka czyta stąd gotowe dane: aplikacja, oferta i lista ofert — nie musi ich zgadywać z treści.schema.org — słownik danych strukturalnych
- Nie zjada transferu137 kB
- Pierwsze wejście pobiera 137 kB — mniej niż jedno zdjęcie z telefonu, więc strona otwiera się też na słabym zasięgu i starszym sprzęcie.< 500 kB — waga strony przy pierwszym wejściu
- Zdjęcia dopasowane do ekranu3 zdjęcia
- 3 zdjęcia podawane są w nowoczesnym formacie i w rozmiarze dobranym do ekranu, a te niżej doładowują się dopiero przy przewijaniu.WebP · srcset — nowoczesny format i zestaw rozmiarów
- Trudniej ją podrobić7 nagłówków bezpieczeństwa
- Odpowiada 7 nagłówkami bezpieczeństwa, które wymuszają szyfrowanie i ograniczają, co obcy kod może na niej zrobić.CSP · HSTS — polityka bezpieczeństwa treści i wymuszone HTTPS
- Przygotowana dla wyszukiwarek98 adresów w mapie strony
- Mapa strony podaje Google 98 adresów, więc nowa podstrona nie czeka, aż robot trafi na nią sam.robots.txt · sitemap.xml — instrukcje dla robotów i mapa strony
Data i sposób weryfikacji
Zmierzone na działającej stronie, 12 września 2026. Odczyty dotyczą sprawdzonych publicznych stron: pomiar ładowania w przeglądarce, kontrola dostępności axe-core, nagłówków HTTP, manifestu aplikacji i mapy strony. To stan z dnia pomiaru, nie obietnica wyników biznesowych. Zakres kontroli zależy od pokazanej funkcji.
Jak została zbudowana
Instrumenty grają w całości w przeglądarce — dźwięk generowany na bieżąco po stronie użytkownika, bez wtyczek i bez instalacji.
