How to build an HTML audio player with Evenings
Evenings
Step 01: Create your HTML file
-
New file
Create a file namedindex.html. -
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>
#playershows the play/pause label and station name.#audioholds 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
.offlineclass 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.setIntervalensures the status refreshes every 3 seconds.- The click handler toggles playback and updates the label accordingly.
Step 05: Preview and interact
- Open your
index.htmlin any browser. - Click the “Play …” label to start streaming.
- 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.