HomePage

Poems

• Replaced by
  'Poetry Aloud'

Music

Recipes

People

Gallery

~~ fPlayer ~~

HTML5 Web Music Player - with automatic playlist

This was an experiment in learning a few new tricks and a chance to put my friend Jeff Wilson's music up on a website.

This uses features built into HTML5 compliant browsers which is pretty much any recent browser.
The code is written in HTML, CSS, PHP and JavaScript.

Advantages of an HTM5 player:

• Works in all major browsers and many less common ones.
• Plays mp3, flac, wav, ogg, oga format files.
• As part of the browser, the user just clicks play, nothing to download/install.

What's different about fPlayer from other players?

• The player automatically builds a playlist in any folder/directory with audio files
• Gets information from the file name not ID3 tags allowing custom naming without editing ID3 tags.
• Playlist automatically adjusts to new files or changes in name (for changes in play-order)
  Okay, that's only after a page refresh...
• Uses user-defined Album Art
• Key files contained in one central directory - (JS, CSS, default GUI image etc.)
• then Rename one file, add it to the new directory with the fPlayer.php and it works!

HowTo:

• Download the zip archive with the necessary files: https://www.mimory.me/mimir/Code/fPlayer.zip
• unzip archive
• On your server create a "player" folder, such as here www.mimmory.me/mimir/player
• Copy the contents of the archive player folder to this new folder (no editing needed)
• at your root - e.g. here www.mimmory.me/ add a file named player.dir

• Copy fPlayer.php to the directory with your audio files
• (Optional) Put a 95x95px image as a cover-art thumbnail in that directory.
• Create an empty file in the same directory with the "Album" information
  • for a regular album    Artist_-_AlbumName_-_CoverArtFileName.tags
  e.g. Pink_Floyd_-_Dark_Side_of_the_Moon_-_CoverThumb.jpg.tags
  Note: each category is separated by _-_ (underscore hyphen underscore)

And you're done...
Well that's only if the files already have the right naming format:

Must be in this order:

(if used) - Artist name

(if used) - Album name (always with Artist also)

(required) - Track number

(required) - Song Title

e.g.    Pink_Floyd_-_Dark_Side_of_The_Moon_-_09_-_Eclipse.flac

or      Pink_Floyd_-_09_-_Eclipse.flac

or      09_-_Eclipse.flac

For Various Artist Albums use

          03_-_Pink_Floyd_-_Eclipse.flac

Other naming schemes without  _-_  will play, and display on the playlist but not show on the player.

This project includes material from http://www.script-tutorials.com/
Here's if Big Thank-You to them for getting me started!