X Online Radio - aplikacja web

Witam.
Poełniłem taką małą aplikację web do słuchania stacji radiowych online. Prosiłbym o ocenę i pomysły/wskazówki.
Nie trzeba się logować. Ustawienia i lista stacji jest osobna dla każdego użytkownika.
Z góry dzięki.

Link: link

Fajne, bo z grubsza działa Parę razy mi przerwało, nie wiem czy to błędy w twoim kodzie. Rzecz, której mi zabrakło, to deeplinks do konkretnej stacji radiowej, Zapisuję sobie jakąś stację w zakładkach przeglądarki, klikam raz i działa.

fajne, dodaj PWA manifest żeby dało się zainstalować i daj opcje wyłączenia wizualizacji żeby nie zżerało bez sensu zasobów

i zabezpiecz ją lepiej, wygląda na to że wystawiłeś proxy na cały świat przez swoją aplikację bez żadnej weryfikacji:
https://www.canarias.uk/radio/api/proxy.php?url=https%3A%2F%2Fmyip.com
vibe coding?

lepiej zrób jakieś idki po stronie serwera i je mapuj na url, przy okazji nie wystawiasz adresów bezpośrednich do radia co pozwala ominąć całą aplikację

no i cały ruch przechodzi po prostu przez twój serwer (dwukrotnie jako ingress i egress), rozumiem że nie da się inaczej żeby dostać się do danych audio i zrobić wizualizację, ale ta apka raczej padłaby przy jakimkolwiek większym ruchu i narobiła ci kosztów / zużyła limity, minimalnie lepiej by było gdybyś łączył ze sobą słuchaczy, streamował tylko raz z zewnątrz i broadcastował to do wszystkich na raz, ale to już wyższa szkoła jazdy.
Możesz po prostu użyć elementu audio i streamować bezpośrednio z zewnątrz pomijając swój serwer (ale wtedy bez możliwości wizualizacji).

kiedyś cała ta aplikacja byłaby po prostu playlistą do winampa

piotrpo napisał(a):

Fajne, bo z grubsza działa Parę razy mi przerwało, nie wiem czy to błędy w twoim kodzie. Rzecz, której mi zabrakło, to deeplinks do konkretnej stacji radiowej, Zapisuję sobie jakąś stację w zakładkach przeglądarki, klikam raz i działa.

Dzięki za opinię. Przerwało bo wciąż walczę z buforem. Będzie wkrótce naprawione. Deeplinks w planie.

obscurity napisał(a):

fajne, dodaj PWA manifest żeby dało się zainstalować i daj opcje wyłączenia wizualizacji żeby nie zżerało bez sensu zasobów

i zabezpiecz ją lepiej, wygląda na to że wystawiłeś proxy na cały świat przez swoją aplikację bez żadnej weryfikacji:
https://www.canarias.uk/radio/api/proxy.php?url=https%3A%2F%2Fmyip.com
vibe coding?

lepiej zrób jakieś idki po stronie serwera i je mapuj na url, przy okazji nie wystawiasz adresów bezpośrednich do radia co pozwala ominąć całą aplikację

no i cały ruch przechodzi po prostu przez twój serwer (dwukrotnie jako ingress i egress), rozumiem że nie da się inaczej żeby dostać się do danych audio i zrobić wizualizację, ale ta apka raczej padłaby przy jakimkolwiek większym ruchu i narobiła ci kosztów / zużyła limity, minimalnie lepiej by było gdybyś łączył ze sobą słuchaczy, streamował tylko raz z zewnątrz i broadcastował to do wszystkich na raz, ale to już wyższa szkoła jazdy.
Możesz po prostu użyć elementu audio i streamować bezpośrednio z zewnątrz pomijając swój serwer (ale wtedy bez możliwości wizualizacji).

kiedyś cała ta aplikacja byłaby po prostu playlistą do winampa

Dzięki. Postaram się w niedługim czasie zaimplementować sugestie. A co do vibe coding to nie, chociaż może tak wyglądać.

jeszcze widzę że pobiera się okładka albumu, ale nigdzie się nie wyświetla bo ma display: none - niedokończony feature czy bug?

obscurity napisał(a):

jeszcze widzę że pobiera się okładka albumu, ale nigdzie się nie wyświetla bo ma display: none - niedokończony feature czy bug?

niedokończone feature

Świetna! Dodałem sobie do zakładek. Sugestie:

• dodanie stacji zagranicznych
• wyszukiwanie stacji po frazie

Stacje każdy może dodać sobie sam w liście stacji. Wyszukiwanie w planie.

wala napisał(a):

Stacje każdy może dodać sobie sam w liście stacji(...)

A czy jak użytkownik doda stację, to czy zostanie ona dodana globalnie dla wszystkich? A jeśli nie, to czy da się z tego zrobić feature?

bakunet napisał(a):

wala napisał(a):

Stacje każdy może dodać sobie sam w liście stacji(...)

A czy jak użytkownik doda stację, to czy zostanie ona dodana globalnie dla wszystkich? A jeśli nie, to czy da się z tego zrobić feature?

Nie zostanie dodana dla wszystkich tylko dla danego użytkownika. Jest lista master i jest kopiowana dla każdego użytkownika w momencie zapisywania zmian.

wala napisał(a):

Nie zostanie dodana dla wszystkich tylko dla danego użytkownika. Jest lista master i jest kopiowana dla każdego użytkownika w momencie zapisywania zmian.

Szkoda, gdyby dodawało wszędzie, to by lista rosła, byłoby w czym wybierać, ale to taka luźna sugestia

Pomyślę nad globalną listą, którą każdy użytkownik będzie mógł uzupełniać i kopiować stacje z niej do osobistej listy

Super robota!
Schludnie, ładnie. Gra muzyka! Powodzenia w rozwijaniu projektu.

Wizualizacja moim zdaniem średnio oddaje rytm muzyki, to raczej animacja.
Po co pokazywana jest długość bufora? I tak nie można go zmienić...

Pepe napisał(a):

Super robota!
Schludnie, ładnie. Gra muzyka! Powodzenia w rozwijaniu projektu.

Wizualizacja moim zdaniem średnio oddaje rytm muzyki, to raczej animacja.
Po co pokazywana jest długość bufora? I tak nie można go zmienić...

Wizualizacja na niektórych przeglądarkach wygląda jak animacja... na razie nie wiem jak to naprawić... Na Edge reaguje na muzykę. Długośc bufora jest pokazywana tymczasowo.

Kilka zmian i nowości:

1. Dodana możliwość dodania stacji do master listy dostępnej dla wszystkich
2. Dodana możliwość dodania stacji z master listy do własnej listy
3. Dodana możliwość bezpowrotnego usunięcia swoich ustawień i listy
4. Dodane deeplinki - można dodać stację do ulubionych
5. Jeżeli w metadanych streamu znajdują się informacje o utworze to wyświetlana jest nazwa i okładka. Po kliknięciu w okłądkę wyświetla się zawartość albumu
6. Dodano możliwość zainstalowania aplikacji
7. Dodano możliwość wyłączenia wizualizacji
8. Dodano kilka nowych wizualizacji
   To-do:
9. Naprawić wizualizacje wyświetlające animowaną symulację na przeglądarkach, które blokują dostęp do audio. Jeśli ktoś ma pomysł jak to ominąc na przykład na safari to proszę o wskazówki.

Próbowałem dodać 2 radia:

• https://player.antyradio.pl/
• https://www.bbc.com/audio/play/live/bbc_radio_fourfm

I jest komunikat: Błąd odtwarzania Brak danych

Co mogę robić źle?

Antyradio jest na master list a BBC muszę sprawdzić. Problem polega na tym, że apka przyjmuje na ten moment tylko streamy w formacie mp3.

Zmiany:

1. Dodano obsługę streamów mpd (MPEG-DASH) (antyradio i bbc radio 4 dodane do master listy)
2. Master list jest posortowana alfabetycznie natomiast listy prywatne każdy moze poukładac po swojemu (w trybie edycji)

Baza tysięcy streamów z całego świata: link

wala napisał(a):

Baza tysięcy streamów z całego świata: link

Nie ukrywam, że są oni dość mocną konkurencją dla Twojej stronki ;)

Zgadzam się ale nie traktuję tego jako konkurencję gdyż moja strona ma charakter hobbystyczny. Jest kilkaset stron ze strameamami więc tylko kwestia wyglądu, prostoty obsługi i „przyjemności” z użytkowania decyduje o wyborze danego rozwiązania przez użytkownika. Każdy wybierze to, co mu pasuje najbardziej.

Prosta i użyteczna aplikacja. Design bardzo mi odpowiada.
Chętnie bym zobaczył ile osób słucha tej samej stacji - realtime.
Może nawet bym z nimi pogadał na czacie. W końcu nic nie łączy bardziej niż muzyka... ;-)

@wala: Racja. Pod linkiem który podałeś nie ma nazw granych piosenek, u Ciebie to już na plus, to tego niektórym może się spodobać wizualizacja

Kilka najświeższych zmian:

1. Dodano podgląd podobnych albumów w podglądzie zawartości albumu
2. Dodano logo stacji (nadawcy)
3. Dodawanie stacji z i do master listy odbywa się przez drag&drop
4. Dodano equalizer, którego ustawienia zapisywane są w ustawieniach użytkownika
5. Dodano logo stacji do listy oraz wskaźnik bieżąco odtwarzanej pozycji na liście
6. Dodano opcję exportu/importu ustawień użytkownika

Kilka nowych rzeczy w playerze:

1. Lista ulubionych utwórów - można dodać aktualnie odtwarzany utwór do listy ulubionych. Eksport/Import ustawień użytkownika zachowuja także listę ulubionych utworów i okładki albumów na których się znajdują. Opcja widoczna jedynie gdy dostępna jest okładka albumu i informacje o utworze w streamie.
2. Jeżeli jest dostępny tekst dla odtwarzanego utworu, można go zobaczyć.

Dodatkowo kilka tweaków pod maską i kilka smaczków graficznych.

@wala budujesz X Online radio totalnie for fun czy masz w głowie cel w postaci późniejszej monetyzacji?

pradoslaw napisał(a):

@wala budujesz X Online radio totalnie for fun czy masz w głowie cel w postaci późniejszej monetyzacji?

Jako fun i zdobywanie doświadczenia. Nie widzę jakoś możliwości monetyzacji - ewentualnie wyświetlanie reklam przychodzi mi do głowy ale to zniszczyłoby wrażenie użytkownika. Płatne opcje? Marne szanse, że ktoś wykupoi płatne opcje w takiej aplikacji. poza tym jestem z pokolenia, gdzie w internecie wszystko było za free

obscurity napisał(a):

no i cały ruch przechodzi po prostu przez twój serwer (dwukrotnie jako ingress i egress), rozumiem że nie da się inaczej żeby dostać się do danych audio i zrobić wizualizację, ale ta apka raczej padłaby przy jakimkolwiek większym ruchu i narobiła ci kosztów / zużyła limity

zauważyłem że "konkurencja" w ogóle nie ma żadnego proxy tylko bezpośrednio przesyła strumień ze źródła.
Okazuje się że większość lub nawet wszystkie radia online są na tyle miłe że w standardzie obsługują CORS, sprawdziłem i zmodyfikowałem twoją aplikację zmieniając

`api/proxy.php?url=${encodeURIComponent(station.location)}`;

na bezpośrednio

station.location;

i wszystko dalej działa tak samo łącznie z wizualizacją. Tytuły piosenek też możesz pobierać javascriptem, a ustawienia chować w localStorage (bo i tak nie są przenośne między sprzętami). Wygląda na to że ta aplikacja prawdopodobnie w ogóle nie potrzebuje backendu.
W każdym razie tak piszę bo wygląda na to że zupełnie niepotrzebnie zużywasz transfer na swojej maszynie przerzucając ruch i apka by nie udźwignęła większej ilości userów a nie musi tak być.
Nie wiem też czy jeszcze masz problemy z buforowaniem, ale mogły być spowodowane timeoutami w proxy, więc jak się go pozbędziesz to odejdą dwa problemy na raz. Można też zawsze zachować fallback do proxy jeśli serwer odrzuci zapytanie cross origin.

obscurity napisał(a):

obscurity napisał(a):

no i cały ruch przechodzi po prostu przez twój serwer (dwukrotnie jako ingress i egress), rozumiem że nie da się inaczej żeby dostać się do danych audio i zrobić wizualizację, ale ta apka raczej padłaby przy jakimkolwiek większym ruchu i narobiła ci kosztów / zużyła limity

zauważyłem że "konkurencja" w ogóle nie ma żadnego proxy tylko bezpośrednio przesyła strumień ze źródła.
Okazuje się że większość lub nawet wszystkie radia online są na tyle miłe że w standardzie obsługują CORS, sprawdziłem i zmodyfikowałem twoją aplikację zmieniając

Kopiuj

`api/proxy.php?url=${encodeURIComponent(station.location)}`;

na bezpośrednio

Kopiuj

station.location;

i wszystko dalej działa tak samo łącznie z wizualizacją. Tytuły piosenek też możesz pobierać javascriptem, a ustawienia chować w localStorage (bo i tak nie są przenośne między sprzętami). Wygląda na to że ta aplikacja prawdopodobnie w ogóle nie potrzebuje backendu.
W każdym razie tak piszę bo wygląda na to że zupełnie niepotrzebnie zużywasz transfer na swojej maszynie przerzucając ruch i apka by nie udźwignęła większej ilości userów a nie musi tak być.
Nie wiem też czy jeszcze masz problemy z buforowaniem, ale mogły być spowodowane timeoutami w proxy, więc jak się go pozbędziesz to odejdą dwa problemy na raz. Można też zawsze zachować fallback do proxy jeśli serwer odrzuci zapytanie cross origin.

Dzięki. Postaram się dzisiaj zaimplementować Twoją sugestię/zmianę.

@obscurity ustawienia są przenośne między sprzętami - wystarczy wyeksportować na jednym urządzeniu i importować na innym