A Cross-browser MP3 and FLAC Player
It is implemented as a responsive two-page website which will display your music library as a wall of album-art. Clicking on an album displays the player page, and starts playing automatically at track 1. Progress is displayed graphically and you can click on any track number to play it.
It does not need a database and does not read file-tags: all info is gleaned from the folder structure and file-names. When you rip your CDs, autotaggers like Freedb may add weird characters to the filenames, so although filenames containing .,& etc are supported some unusual characters like ë or æ will trip it up. Simple enough, you just rename the file.
For security reasons php and js cannot automatically read files above root, so your music library must be below root: in this case in a "music" subfolder off the main web folder. This means it can't be used as a local music server without your music being below local root.
A working PHP, Apache setup and a browser. You can download a zip that contains all the files described below and should be fully working if unzipped to the root of your webserver (relocating it will need editing of settings.php). This includes a few sample music files created by yours-truly just to demonstrate the "album" features. DOWNLOAD ZIP. The rest of this page consists of explanatory notes.
Securing your Music Files
If you want to put this online, your music files must be web-accessible so what can you do to stop any Tom Dick or Harry simply finding and downloading your files? A Google search on this will take you all day and leave your head spinning. The bottom line is that ultimate security is impossible, but steps can be taken to make it extremely difficult for people to access your files. Most music can be found on Youtube anyway and is trivial to copy.
Jet5 takes the following pragmatic approach to securing on-line music files for personal use.
- A .htaccess file prevents file-listing
- Access to the Library page is password-protected
- Every time the Library page is accessed the music library is set to a random one-time URL
- The system is therefore single-user (any concurrent access will invalidate the URL).
- The Player page will not run if it can't find the files.
- Only put low-res copies of your music on-line — it's your bandwidth.
Your Music Library
Is put in a "music" subfolder and should have the following folder structure. Tracknames should have a prefix that ensures they are listed in the right order when ordered alphabetically. Most ripping software can be set up to do this for you.
Artist 1 Albumname 1 01 - Trackname 1 02 - Trackname 2 AnyNameAlbumArt.jpg/png Albumname 2 01 - Trackname 1 02 - Trackname 2 AnyNameAlbumArt.jpg/png Artist 2 ... etc etc
The project reflects my own coding style, where I use PHP includes to add functions, settings, and a PHP html5 page template. Fonts are served by Google Fonts. I use the PHP "heredoc" construct extensively. The folder and file structure is as follows:
localhost player index.php play.php .htaccess js aurora.js flac.js mp3.js settings settings.php jet5.css jet5-template.php system jet5-functions.php jet5-securepage.php music artists/albums/files as section above
The Key Files
This generates and displays the wall of album-art. First it includes some generic helper functions. The rest of the page is simply a directory and file-reading loop in php. This adds the page elements: albumart with associated anchor links. The page elements are incorporated in a string called $body which gets displayed on the last line by including the html template.