# MyPlayer - A Web-MP3-Player with Playlist Support

*Note:* I am about to abandon this project. The current mediaelement.js has too
many quirks to get the features i want with reasonable effort. I have instead
implemented an MP3 player using PHP and JavaScript/JQuery that does what i want
and looks how i want. It is featured as the "Electronic Music Archive" at
<https://tk-sls.de/musik>. What helped me a lot was the tutorial by Idorenyin
Udoh at <https://css-tricks.com/lets-create-a-custom-audio-player/>.

*Note:* MyPlayer is currently undergoing a major rewrite, where it being
updated to the latest version of mediaelement.js. This effort includes porting
the playlist feature to the playlist provided by mediaelement-plugins.

This iteraton of MyPlayer, as present in this GIT repository, has known issues,
especially when changing tracks in the playlist, and not all configuration
demos/source types have been extensively tested (i currently focus on the "m3u"
scenario).

Since i am doing this in my free time, i can not give you a roadmap or timeline
on when the rewrite will be done and the software fully tested. Until then, the
previous version of MyPlayer is available at
<https://tk-sls.de/ref/myplayer.dist.tar.gz>.

## About

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 it can start in a detached state or the user can open
it in a new window, preventing that playback breaks when the user leaves the page.

Tested Compatibility:

MP3: Firefox, Chrome, Internet Exploder
OGG Audio: Firefox, Chrome

## Usage

MyPlayer requires jQuery. See for example <https://www.w3schools.com/jquery/jquery_get_started.asp> on how to include a recent version.

MyPlayer requires the Javascript file from `dist/js` and the CSS and SVG files from `dist/css`.

Sample inclusions in an HTML document:

```html
<head>
    <link href="css/myplayer.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/myplayer.min.js"></script>
</head>
```

Sample instanciation reading playlist entries from a file `./mp3.m3u`:

```html
<div class="player"></div>
    <script>
        $(function(){ MyPlayer({
            element: '.player',
            mode: 'm3u',
            detachable: false,
            m3u: './mp3.m3u',
            loop: true,
            shuffle: false
        })});
    </script>
</div>
```

## Contributing

* Use `npm install` to install some JavaScript utilities.
* Use `make` to perform a build of the software.
* See subdirectory [src](./src) for javascript sources, specifically [player.js](src/player.js).
  - Use `src/build.sh` to re-generate the minified script `js/myplayer.min.js`.
* See subdirectory [css](./css) for CSS, specifically [local.css](src/local.css).
  - Use `css/build.sh` to re-generate the minified CSS `css/myplayer.min.css`.

## Author, Copyright and License

* Author: tilt@linuxfoo.de
* Release: Nov. 10 2024
* License: MIT


