A Cross-browser MP3 and FLAC Player

A web audio-player for FLAC and MP3 written in PHP and javascript. It uses the the aurora.js library from audiocogs, and their javascript codecs: flac.js and mp3.js. Other codecs are available from audiocogs if you use different file formats. It would not have happened without the valuable snippets of code and discussion at Github and Stackoverflow so a big thanks to the developer community!

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.

Tutorial

Basics

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

Folder Structure

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

index.php

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.

play.php

This displays an album (title, artist, and albumart) and a clickable list of track numbers. The inline-javascript automatically starts playing the first track, then when it ends chains through the rest of the tracks. The track display is ajaxed to the page.