96 lines
3 KiB
Markdown
96 lines
3 KiB
Markdown
# 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.
|