tgtje / html5-music-player

Loads your music library in a web page using HTML5

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

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

Overview:

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

Setup:

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:
/icons/open.folder.png
/icons/folder.png
/icons/sound2.png
/icons/small/back.png
/icons/down.png