Web-MP3-Player with HTML5, Flash and Playlist Support


This project provides a JavaScript constructor MyPlayer({...options...}) that can be used to embed lists of audio files as read from an index document or an M3U into a web document.

They will be displayed in a playback GUI with a playlist that can optionally be filled from the „title“ and „artist“ values of the files‘ ID3 tags (v1 and v2 are supported).

The player is „detachable“, meaning the user can open it in a new window, preventing that playback breaks when the user leaves the page.


You can read my commentary about this release below.


I feel this effort is well spent, because I now have a free software player that does exactly what I want, looks exactly how I want and which I can customize to my exact needs. None of this was possible with the existing players. This one I can (for example) teach to be detachable in a matter of hours.


Of course, thank you mediaelement.js and mep-feature-playlist that made the project possible.

Additional thanks go out to the colorzilla.com CSS Gradient Editor. 🙂


When detaching the player, the currently playing song number and elapsed playtime could be communicated to the new instance. Playback could then resume where it was before detaching, providing a seamless user experience. This is probably easily possible with the mejs-API, but it remains TODO.

Make the HTML comletely dynamic, with no more need for an individual index.html.

Package it all as a WordPress plugin provding a shortcode that will insert the <iframe> into an article.

Further observations:

Given the state of the existing software that is supposed to do this (finding out it is not working took me days alone), I can understand why most musicians prefer to use a cloud-service (very prominently soundcloud).

In addition, most re-usable softwares that promise to do the job offer zero integration and very little support at best. They unfortunately spend thought and complexity on how to generate revenue, making the software behave weird or erratically at unexpected times.

The building elements for a self-hosted, free, versatile web-player are there, but there are lots of site-specifics to consider. For example, in my specific case, I could save work and omit any sort of server-side file-scanning logic since I have the possibility to allow automatic directory indexes for my MP3-directory. Also, the look and feel and design of the player is strongly site-specific. Also, other sites have other requirements when it comes to playlists, file formats and the organisation of files on the webserver. Therefore, my solution is not easily applicable to other sites either.