Installation

1. NPM


npm install amstramgrammediaplayer

Then in your javascript :


/***    COMMONJS     ***/

const AmstramgramMediaPlayer = require('AmstramgramMediaPlayer');


/***		   OR	 	***/
/*** 	ES2015 	***/

import AmstramgramMediaPlayer from 'AmstramgramMediaPlayer';

... And in your SASS :


@use "../node_modules/amstramgrammediaplayer/src/scss/amstramgramMediaPlayer";

Note however that if you just need audio players, you should rather do :


/***    COMMONJS     ***/

const AmstramgramAudioPlayer = require('AmstramgramMediaPlayer/AmstramgramAudioPlayer');


/***		   OR	 	***/
/*** 	ES2015 	***/

import AmstramgramAudioPlayer from 'AmstramgramMediaPlayer/AmstramgramAudioPlayer';

... And in your SASS :


@use "../node_modules/amstramgrammediaplayer/src/scss/amstramgramAudioPlayer";

If you want to play with sources, you can also do :


/*** 	ES2015 	***/

import AmstramgramMediaPlayer from 'AmstramgramMediaPlayer/AmstramgramMediaPlayer_src';

2. Manually

- Download the dist folder.
- Somewhere in your document : 


<link rel="stylesheet" href="css/amstramgramMediaPlayer.min.css">
<script src="js/amstramgramMediaPlayer.min.js"></script>

Or even better (see here why) :

					
HTML



<link rel="stylesheet" href="css/amstramgramMediaPlayer.min.css">
<script type="module">
	import AmstramgramMediaPlayer from './js/esm/amstramgramMediaPlayer.min.js'
	window.AmstramgramMediaPlayer = AmstramgramMediaPlayer
</script>
<script nomodule src="js/amstramgramMediaPlayer.min.js"></script>

And if you just need audio players :

					
HTML



<link rel="stylesheet" href="css/amstramgramAudioPlayer.min.css">
<script type="module">
	import AmstramgramAudioPlayer from './js/esm/amstramgramAudioPlayer.min.js'
	window.AmstramgramAudioPlayer = AmstramgramAudioPlayer
</script>
<script nomodule src="js/amstramgramAudioPlayer.min.js"></script>

Usage


const myMediaPlayer = new AmstramgramMediaPlayer(element, options, callback)

//Or if there is no option but a callback :
const myMediaPlayer = new AmstramgramMediaPlayer(element, callback)	

//Or just :
const myMediaPlayer = new AmstramgramMediaPlayer(element)

element is a HTML media element (<audio> or <video>).
options is an object that can have a large number of keys as you can see here.
callback a function called after the player initialization.

Or, if you only use audio players : 


const myAudioPlayer = new AmstramgramAudioPlayer(element, options, callback)

//Or if there is no option but a callback :
const myAudioPlayer = new AmstramgramAudioPlayer(element, callback)	

//Or just :
const myAudioPlayer = new AmstramgramAudioPlayer(element)

element is a HTML audio element.
options is an object that can have a large number of keys as you can see here.
callback a function called after the player initialization.

Philosophy

All starts with the AmstramgramAudioPlayer class which extends a small utility EventEmitter class.
This is the only one you need if you just use audio players.

An AmstramgramVideoPlayer class extends AmstramgramAudioPlayer and adds all the features needed for playing videos.

Finally, the AmstramgramMediaPlayer class extends the basic EventEmitter class and wraps together audio and video classes, calling the right one accordingly to the HTML media element passed as parameter.
This is what you need if you use video players or a mix of audio and video players.

Note that the EventEmitter class allows each player to emit events and listen to them. These events are detailed here.