Add a player

Display stations and play audio

Fetch the consumer endpoint from the browser:

const response = await fetch("/api/radio-stations");
if (!response.ok) {
  throw new Error("Could not load radio stations");
}
const { data: stations, pagination } = await response.json();

Display station names in a list or dropdown. Pass the selected station to a player:

<audio
  key={selectedStation.id}
  src={selectedStation.streamUrl}
  controls
  preload="none"
/>

The listener presses play. The browser connects directly to the broadcaster; neither the website backend nor the Naija Radio API needs to relay audio. In React, changing the key replaces the previous audio element when switching stations. Show a helpful message for playback errors.

The example requests the first 100 Nigerian stations. Follow pagination.nextOffset through your backend if you need additional pages; do not imply that the first page is the entire catalogue.