# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://evenings.gitbook.io/evenings-api/guides/how-to-build-an-html-audio-player-with-evenings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
