RadioVibe — radio internetowe on air
Studium przypadku strony dla RadioVibe — radia internetowego działającego w ciemnym, neonowym stylu. To nie jest zwykła wizytówka: strona musi utrzymywać żywy stream audio, pokazywać aktualnie grany utwór, przyjmować pozdrowienia dla słuchaczy i zgłoszenia do castingu, a wszystko to na dziewięciu podstronach i bez wysypywania się na ograniczeniach dostawcy streamu.
Wyzwanie
Strona radia internetowego musi robić więcej niż informować — musi działać jak część odtwarzacza. Słuchacz powinien słyszeć stream niezależnie od tego, którą podstronę otworzy, wiedzieć, co gra „teraz”, i mieć prostą ścieżkę, żeby wysłać pozdrowienia albo zgłosić się do castingu. Do tego dostawca danych o utworach (Shoutcast) i panel radiowy stoją za Cloudflare, który przy niewłaściwym odpytywaniu blokuje adres IP hostingu — więc integracja musiała być odporna na nadużycie, a nie tylko „działająca raz”.
Cel projektu
- stały odtwarzacz dostępny na każdej z 9 podstron, bez przerywania odsłuchu przy przechodzeniu między nimi,
- pokazywanie aktualnie granego utworu w czasie rzeczywistym,
- prosta ścieżka zgłoszeń: kontakt i rekrutacja do zespołu radia,
- pozdrowienia dla słuchaczy — zarówno wyświetlane na stronie, jak i czytane na antenie,
- zgodność z RODO i szybkie działanie przy minimalnej liczbie zapytań do zewnętrznych serwisów.
Zakres prac
- projekt i wdrożenie 9 podstron (start, panel radia, panel DJ, rekrutacja, pozdrowienia, ramówka, kontakt, partnerzy, polityka prywatności) na wspólnych szablonach PHP — nagłówek, stopka i ikony w jednym miejscu, więc zmiana w menu nie wymaga edycji dziewięciu plików,
- stały mini-player na dole każdej strony, podłączony pod stream audio, z zapamiętywaniem stanu odtwarzania w przeglądarce,
- własny skrypt czytający aktualnie grany utwór z metadanych strumienia, z cache i limitem transferu, żeby nie powtórzyć wcześniejszej blokady po stronie dostawcy,
- dwa osobne formularze pozdrowień — te wyświetlane na stronie i te czytane na antenie na żywo — oraz formularze kontakt/rekrutacja wysyłane przez SMTP, z zabezpieczeniem antyspamowym i zgodą RODO,
- osadzenie widżetu pozdrowień z zewnętrznego panelu radiowego, przystylizowanego do ciemnego motywu strony,
- ikonografia wyłącznie jako sprite SVG (zero emoji), ciemny neonowy motyw dopasowany do charakteru radia,
- self-hosted fonty i domyślnie wyłączone cookies analityczne do czasu zgody użytkownika.
Zastosowane rozwiązania
Radio, nie tylko strona
Stały odtwarzacz i aktualnie grany utwór widoczne na każdej podstronie — strona zachowuje się jak rozszerzenie odtwarzacza radia, a nie osobna wizytówka.
Odporność na ograniczenia dostawcy
Własny cache i limit odpytywania metadanych strumienia, żeby integracja z danymi „na żywo” nie powtórzyła wcześniejszej blokady adresu IP.
Dwa rodzaje pozdrowień
Rozdzielenie pozdrowień wyświetlanych na stronie od tych czytanych na antenie — każde z własnym formularzem i limitem znaków, bez pomyłek między nimi.
Jeden szablon, dziewięć stron
Wspólne części PHP na nagłówek, stopkę i ikony — zmiana pozycji w menu albo danych w stopce to edycja jednego pliku, nie dziewięciu.
RODO bez kompromisów
Self-hosted fonty, brak zbędnych trackerów i zgoda na cookies zanim ruszy analityka — zero niepotrzebnych zapytań do zewnętrznych serwerów.
Rekrutacja i kontakt bez wtyczek
Formularze wysyłane przez SMTP, z zabezpieczeniem antyspamowym i zgodą użytkownika, bez zewnętrznych serwisów formularzowych.
Efekt
Powstała strona, która działa jak cyfrowe centrum radia: słuchacz może odtworzyć stream, zobaczyć aktualnie grany utwór, sprawdzić ramówkę, wysłać pozdrowienia albo zgłoszenie do castingu — a wszystko to na dopracowanym, ciemnym neonowym motywie zgodnym z RODO. Odtwarzacz towarzyszy odwiedzającemu na każdej podstronie, a struktura oparta na wspólnych szablonach pozwala szybko rozwijać stronę o kolejne funkcje bez powielania kodu.
Jak strona wygląda na różnych urządzeniach
Poniżej znajdziesz żywy podgląd realizacji radiovibe.pl — dokładnie tak, jak wyświetla się na ekranie laptopa, tabletu i telefonu.
Otwórz stronę na żywo ↗Podgląd ładuje żywą wersję strony w ramkach (iframe) i skaluje ją do rozmiaru każdego urządzenia. Jeśli któraś ramka jest pusta, otwórz stronę przyciskiem powyżej.
Chcesz podobny projekt?
Napisz do nas, jeśli potrzebujesz strony ze streamingiem audio, panelem na żywo albo integracją z zewnętrznym serwisem.
Powiązane strony lokalne
Strony internetowe Gniezno • SEO Gniezno • Google Ads Gniezno
Strony internetowe Gniezno – ile kosztują? • SEO Gniezno – jak zdobyć klientów?