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

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:

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:

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:

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

<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

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 and maintained by OverSu.

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

3 KiB Raw Blame History