Najprościej osadzić publiczny widget stacji lub element audio z adresem strumienia HTTPS. Użyj linku dla słuchaczy, nie adresu panelu ani danych nadawania. Zapewnij przycisk Play zamiast polegać na autoplay.
Wybierz odtwarzacz odpowiedni dla stacji
Publiczny widget panelu radiowego jest dobry, gdy chcesz szybko udostępnić odtwarzanie i funkcje przygotowane przez dostawcę. Własny element audio daje prosty interfejs, który łatwo umieścić w istniejącej stronie. Nie potrzebujesz rozbudowanej wtyczki WordPressa, aby dodać sam przycisk odtwarzania.
Wybór zależy od oczekiwań: sam dźwięk, aktualny tytuł, historia utworów czy zamawianie piosenek? Zacznij od minimum, które działa na komputerze i telefonie. Dodatkowe funkcje dołączaj po przetestowaniu podstawowego odsłuchu.
Skąd wziąć właściwy adres strumienia?
Otwórz publiczną stronę stacji lub sekcję linków odsłuchowych w panelu. W AzuraCast jedna stacja może udostępniać kilka punktów montowania z różnym formatem i bitrate. Wybierz konkretny strumień przeznaczony dla słuchaczy i sprawdź go poza panelem administratora.
Nie wklejaj adresu do nadawania ani hasła streamera do kodu strony. Publiczny HTML jest dostępny dla odwiedzających. Nie myl też pliku playlisty M3U lub PLS z bezpośrednim strumieniem audio. Jeżeli adres otwiera stronę logowania, nie jest gotowym źródłem do odtwarzacza.
Prosty player HTML
Poniższy przykład używa dokumentacyjnej domeny. Zastąp cały adres wartością z panelu, zachowując poprawny protokół i ścieżkę.
<section aria-labelledby="radio-title">
<h2 id="radio-title">Posłuchaj naszego radia</h2>
<audio controls preload="none" aria-label="Radio na żywo"
src="https://radio.example.com/listen/stacja/radio.mp3">
Twoja przeglądarka nie obsługuje odtwarzacza audio.
</audio>
<p><a href="https://radio.example.com/listen/stacja/radio.mp3">
Otwórz bezpośredni strumień radia
</a></p>
</section>
W WordPressie taki fragment można umieścić w bloku „Własny HTML”, jeśli uprawnienia konta pozwalają zapisać użyte elementy. Sprawdź opublikowaną stronę, nie tylko podgląd edytora. Atrybut preload="none" ogranicza pobieranie przed rozpoczęciem odsłuchu. Natywne kontrolki umożliwiają użytkownikowi sterowanie dźwiękiem.
Widget AzuraCast i HTTPS
Jeżeli panel udostępnia gotowy kod osadzania, skopiuj go dla swojej stacji i wklej w miejsce obsługujące HTML. Dostosuj szerokość do kontenera, a ramce iframe nadaj zrozumiały tytuł, jeśli go brakuje. Nie usuwaj parametrów widgetu bez sprawdzenia ich znaczenia.
Na stronie działającej przez HTTPS używaj również strumienia i widgetu HTTPS. Przeglądarka może próbować podnieść niezabezpieczone żądanie audio do HTTPS; jeśli serwer tego nie obsługuje, odsłuch się nie uda. Sama zamiana liter w adresie nie uruchamia certyfikatu ani usługi na odpowiednim porcie.
Dlaczego radio nie włącza się samo?
Przeglądarki ograniczają automatyczne odtwarzanie słyszalnego dźwięku. Nie traktuj zablokowanego autoplay jako awarii serwera radiowego. Zaprojektuj widoczny przycisk i poproś użytkownika o rozpoczęcie odsłuchu. Nawet poprawnie osadzony widget nie gwarantuje automatycznego startu na każdym telefonie.
Zwykły element audio nie wyświetli sam tytułu aktualnego utworu. Do metadanych potrzebny jest widget lub osobna integracja. Jeśli pobierasz dane JavaScriptem z innej domeny, sprawdź również zasady CORS dla tego API. To odrębny problem od podstawowego odtwarzania dźwięku.
Test przed publikacją
Otwórz stronę w trybie prywatnym, kliknij Play i sprawdź odsłuch przez kilka minut. Powtórz test na telefonie w sieci komórkowej. Oceń czytelność przycisków, możliwość zatrzymania dźwięku i zachowanie po odświeżeniu. Przy przechodzeniu między podstronami zwykły player zostanie przeładowany — ciągły odsłuch wymaga innego projektu nawigacji.
Jeśli dopiero uruchamiasz stację, sprawdź serwery radiowe Castpol i dobierz emisję wraz z AutoDJ. Działający publiczny odtwarzacz jest ostatnim odcinkiem całego procesu: źródło audio i sam strumień muszą wcześniej działać poprawnie.
Dalsza lektura
Przejdź do kolejnego kroku: Radio gra, ale player nie pokazuje utworu lub DJ-a — co sprawdzić?.