How to build an HTML audio player with Evenings

Evenings makes it simple to embed a live audio stream in any plain HTML page. This step‑by‑step guide shows you how to turn the snippet below into a fully functioning player—no frameworks required .

Step 01: Create your HTML file

  1. New file Create a file named index.html.

  2. Basic structure Paste in the standard HTML boilerplate:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Player Page</title>
  <style>
    /* Styles will go here */
  </style>
</head>
<body>
  <!-- Markup will go here -->
  <script>
    // JavaScript will go here
  </script>
</body>
</html>

Step 02: Add the markup

Inside the <body>, insert:

<div id="player" class="offline">Play Loading…</div>
<audio id="audio" style="display: none;"></audio>

  • #player shows the play/pause label and station name.

  • #audio holds the stream URL but stays hidden.

Step 03: Define your styles

In the <style> block, add:

#player {
  cursor: pointer;
}
#player.offline {
  opacity: 0.5;
}

  • The .offline class dims the label when the station is down.

Step 04: Implement the JavaScript

Replace the comment in your <script> with this snippet (using real variable names):

const stationSlug = "YOUR_SLUG_HERE";
const apiEndpoint = `https://api.evenings.co/v1/streams/${stationSlug}/public`;
const container = document.getElementById("player");
const audio = document.getElementById("audio");

let isPlaying = false;
let stationName = "Loading…";

async function fetchStationData() {
  try {
    const res = await fetch(apiEndpoint);
    const json = await res.json();

    if (json.online) {
      stationName = json.name;
      audio.src = json.streamUrl;
      container.classList.remove("offline");
    } else {
      stationName = "Offline";
      container.classList.add("offline");
    }
  } catch {
    stationName = "Offline";
    container.classList.add("offline");
  }
  updateLabel();
}

function updateLabel() {
  const action = isPlaying ? "Pause " : "Play ";
  container.textContent = action + stationName;
}

// Initial load + refresh every 3 seconds
fetchStationData();
setInterval(fetchStationData, 3000);

// Toggle play/pause on click
container.addEventListener("click", () => {
  if (!audio.src) return;
  if (isPlaying) audio.pause();
  else audio.play().catch(() => {});
  isPlaying = !isPlaying;
  updateLabel();
});

  • fetchStationData() polls the API and updates both UI and stream source.

  • setInterval ensures the status refreshes every 3 seconds.

  • The click handler toggles playback and updates the label accordingly.

Step 05: Preview and interact

  1. Open your index.html in any browser.

  2. Click the “Play …” label to start streaming.

  3. Watch the label switch between “Play” and “Pause” and reflect the station’s live status.

That’s it! You now have a bare‑bones, self‑refreshing audio player in plain HTML—perfect for any website. If you run into issues, email contact@evenings.email for help.

PreviousHow to stream with OBSNextHow to build a custom audio player with Framer

Last updated