# How to build an HTML audio player with Evenings

***

## Step 01: Create your HTML file

1. **New file**\
   Create a file named `index.html`.
2. **Basic structure**\
   Paste in the standard HTML boilerplate:

   ```html
   <!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:

```html
<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:

```css
#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):

```js
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.
