Skip to content
Loads your music library in a web page using HTML5
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

This is a basic HTML5 music player
This was made to be a simple music player with all the basic features a music player should have as well as have a mobile friendly layout

Loop: Play the current track over and over again.
Shuffle: Play tracks at random instead of in order.
Repeat: Allow tracks to repeat (When un-checked every track much be played once before it can be played again; saved between sessions; Played tracks are marked as in the playlist)
Next/Back: This feature now uses a play history log, this is not saved between sessions (max length is the size of your playlist)
Note: Clicking on a track after using the back feature will bump your historic playback to the present, for example say you hit back 5 times(history at -5) and you click a track, your history will be bumped back up to the present(history at 0)
Note: Changing the number of tracks in the playlist will reset session data
Note: Tracks will not mark a track as played unless it is at least 15% complete
Note: ID3 (meta data from audio files) data is not displayed on very low screen widths (tiny smart phone)
Note: Playback can be restricted to a single folder by double clicking it


Keyboard shortcuts:

pause          - Spacebar
volume up      - Plus on the number keypad
volume down    - Minus on the number keypad
next song      - Left arrow key
previous song  - Right arrow key
skip 5s        - Up arrow key
rewind 5s      - Down arrow key
toggle shuffle - S key
toggle repeat  - R key
toggle loop    - L key


  1. Add the index.html, player.js, player.css, and playlist.php files to a folder on your web server
  2. Create a folder called library in that folder, this folder should contain your music
    this folder can be a symlink to your main music folder
  3. If you would like to have have ID3 support look in playlist.php for the notes (it is a optional feature)

Any files/folders starting with a "." will be ignored in addition to ".txt" files
Cover images should be named cover (not case sensitive), they should be in png, jpg/jpeg, or gif format, basically anything a web browser can display
Cover images are optional
Any file not called cover will be treated as a audio file
All files should have a file extension (eg .png, .mp3, .ogg, etc)
This uses 5 icons from the apache web server, if you are using a different web service, grab these icons and save them as the following:

You can’t perform that action at this time.