# HTML5 audio player with playlist

A compact audio player built with HTML, CSS and vanilla JavaScript. It creates its controls from a simple playlist in the page and does not require a JavaScript framework.

[Open the live demo](https://streaming.nnsprod.com/?MP3=Naheulbeuk)

## Features

- play, pause, previous and next controls;
- seek bar with elapsed and total time;
- volume control and mute button;
- track title, artist and optional cover artwork;
- automatic playback of the next track;
- sequential and random playback modes;
- collapsible album and playlist sections;
- responsive layout.

## Quick start

Clone the repository and open `index.html` in a browser:

```bash
git clone https://nnsprod.com/git/oversu/html5-css3-audio-player-with-playlist.git
cd html5-css3-audio-player-with-playlist
```

No build step is required. For reliable audio loading, serving the directory through a small local HTTP server is preferable to opening it with a `file://` URL:

```bash
python3 -m http.server 8080
```

Then visit <http://localhost:8080>.

## Define the playlist

Each track is represented by an item in `.apwp-playlist`. The audio URL is stored in `data-src`; the title and artist use `.apwp-source` and `.apwp-desc`:

```html
<li>
    <span
        class="apwp-source"
        data-src="https://example.org/audio/my-track.mp3"
        data-cover="https://example.org/images/my-cover.webp"
    >
        My track
    </span>
    <span class="apwp-desc">Artist name</span>
</li>
```

`data-cover` is optional. Replace the demonstration URLs in `index.html` with audio files you are allowed to distribute.

## Player options

The player reads a JSON object from the `data-config` attribute:

```html
<div
    id="apwp"
    class="apwple-audio-player"
    data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'
>
    <!-- playlist -->
</div>
```

| Option | Effect |
|---|---|
| `auto_load` | Loads the first track as soon as the player starts. |
| `shide_top` | Starts with the album information collapsed. |
| `shide_btm` | Starts with the playlist collapsed. |

The `shide_*` names are retained for compatibility with the existing script.

## Integration notes

- Include `style.css` and load `script.js` after the player markup.
- The supplied stylesheet imports Font Awesome 4.7 from a CDN for the control icons.
- Remote audio servers must permit playback from your site. Browsers can block cross-origin resources or insecure `http://` tracks on an HTTPS page.
- The current script initializes the player whose identifier is `apwp`.

## Project structure

```text
index.html  Demonstration playlist and player container
style.css   Player layout, controls and responsive styles
script.js   Playback, playlist and volume behaviour
LICENSE     GNU General Public License v3
```

## Credits and license

This project is derived from the player by [Sekedus](https://codepen.io/sekedus/pen/ExxjZEz) and maintained by [OverSu](https://oversu.fr).

It is distributed under the GNU General Public License v3. See [LICENSE](LICENSE) for the complete terms.