2024-11-11 08:24:44 +01:00
|
|
|
# MyPlayer - A Web-MP3-Player with Playlist Support
|
|
|
|
|
|
2024-11-13 07:58:26 +01:00
|
|
|
<div style="border-radius: .25 em; border: 1px solid #caba8a; background-color: #f8e8ba;">
|
|
|
|
|
*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>.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
## About
|
2024-11-11 08:24:44 +01:00
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
```
|
|
|
|
|
|
2024-11-13 07:42:01 +01:00
|
|
|
Sample instanciation reading playlist entries from a file `./mp3.m3u`:
|
2024-11-11 08:24:44 +01:00
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<div class="player"></div>
|
|
|
|
|
<script>
|
|
|
|
|
$(function(){ MyPlayer({
|
|
|
|
|
element: '.player',
|
|
|
|
|
mode: 'm3u',
|
|
|
|
|
detachable: false,
|
2024-11-13 07:42:01 +01:00
|
|
|
m3u: './mp3.m3u',
|
2024-11-11 08:24:44 +01:00
|
|
|
loop: true,
|
|
|
|
|
shuffle: false
|
|
|
|
|
})});
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Contributing
|
|
|
|
|
|
2024-11-13 07:47:11 +01:00
|
|
|
* Use `npm install` to install some JavaScript utilities.
|
|
|
|
|
* Use `make` to perform a build of the software.
|
2024-11-11 08:24:44 +01:00
|
|
|
* 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`.
|
2024-11-13 07:48:12 +01:00
|
|
|
* See subdirectory [css](./css) for CSS, specifically [local.css](src/local.css).
|
2024-11-11 08:24:44 +01:00
|
|
|
- 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
|
|
|
|
|
|
|
|
|
|
|
