small changes

This commit is contained in:
Tilman Kranz 2024-11-11 08:24:44 +01:00
parent ce1707eb80
commit ef9a5b70d3

133
README.md
View File

@ -1,66 +1,67 @@
# MyPlayer - A Web-MP3-Player with Playlist Support # MyPlayer - A Web-MP3-Player with Playlist Support
About: About:
This project provides a JavaScript constructor MyPlayer({...options...}) that can be used 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. 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 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). 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 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. it in a new window, preventing that playback breaks when the user leaves the page.
Tested Compatibility: Tested Compatibility:
MP3: Firefox, Chrome, Internet Exploder MP3: Firefox, Chrome, Internet Exploder
OGG Audio: Firefox, Chrome OGG Audio: Firefox, Chrome
## Usage ## Usage
MyPlayer requires jQuery. 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 `dis/css`. MyPlayer requires the Javascript file from `dist/js` and the CSS and SVG files from `dist/css`.
Sample inclusions in an HTML document: Sample inclusions in an HTML document:
```html ```html
<head> <head>
<link href="css/myplayer.min.css" type="text/css" rel="stylesheet" /> <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/jquery.min.js"></script>
<script type="text/javascript" src="js/myplayer.min.js"></script> <script type="text/javascript" src="js/myplayer.min.js"></script>
</head> </head>
``` ```
Sample instanciation: Sample instanciation:
```html ```html
<div class="player"></div> <div class="player"></div>
<script> <script>
$(function(){ MyPlayer({ $(function(){ MyPlayer({
element: '.player', element: '.player',
mode: 'm3u', mode: 'm3u',
detachable: false, detachable: false,
m3u: 'mp3.m3u', m3u: 'mp3.m3u',
mejs: { loop: true, shuffle: true } loop: true,
})}); shuffle: false
</script> })});
</div> </script>
``` </div>
```
See also [the demo page](demos/index.html) for several examples.
See also [the demo page](demos/index.html) for several examples.
## Contributing
## Contributing
* 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 [src](./src) for javascript sources, specifically [player.js](src/player.js).
* See subdirectory [css](./css) for CSS, specifically [local.js](src/local.js). - Use `src/build.sh` to re-generate the minified script `js/myplayer.min.js`.
- Use `css/build.sh` to re-generate the minified CSS `css/myplayer.min.css`. * See subdirectory [css](./css) for CSS, specifically [local.js](src/local.js).
- Use `css/build.sh` to re-generate the minified CSS `css/myplayer.min.css`.
## Author, Copyright and License
## Author, Copyright and License
* Author: tilt@linuxfoo.de
* Release: Nov. 10 2024 * Author: tilt@linuxfoo.de
* License: MIT * Release: Nov. 10 2024
* License: MIT