Amplitude.js is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required). Amplitude.js is available under the MIT License.
Click the image above to go to the demo site or click here.
- Completely independent library (no jQuery required)
- 100% customizable design of all player elements
- Available by CDN or single command install:
npm install --save amplitudejs - Multiple playlist support on single page
- Song meta data display
- Soundcloud integration
- Live streaming support
- Call back functions for events
- Play/Pause
- Stop
- Next Song
- Previous Song
- Shuffle
| 
IE / Edge | 
Firefox | 
Chrome |
Safari | 
Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE9, IE10, IE11, Edge| 4.0+| 3.5+| 4.0+| 10.5+|
Option 1: Use CDN from jsDelivr
No installation is required to use Amplitude.js. All you need to do is include a single line in your <head> section of your HTML page.
Replace {{version-number}} with the exact version number that you would like to use (see our releases for what version number to use):
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/amplitudejs@{{version-number}}/dist/amplitude.js"></script>NOTE: It's best to set your version number manually to make sure you have full control of what version you are running. If you need to upgrade in the future, just change {{version-number}} to the latest version.
Download it via NPM to your existing project:
npm install --save amplitudejsYou will see the file under node_modules/amplitudejs/dist/amplitude.js.
Download the amplitude.js file from our releases page and include the file manually with your project.
To initialize Amplitude.js, you must call the Amplitude.init() method and pass in an object that
contains an array of songs and settings. Amplitude.js will then take care of configuring and setting up your
player by finding all of the Amplitude elements (defined later in the docs) and binding the appropriate
event handlers.
To configure Amplitude.js, you need to call the init function on the Amplitude object and you can pass it a JSON object of configuration variables ( we will go through ALL of these in the documentation ). At the bare minimum, you need to pass it all of the song objects that your page will be using. More information about the song object next.
Amplitude.init({
"songs": [
{
"name": "Song Name 1",
"artist": "Artist Name",
"album": "Album Name",
"url": "/song/url.mp3",
"cover_art_url": "/cover/art/url.jpg"
},
{
"name": "Song Name 2",
"artist": "Artist Name",
"album": "Album Name",
"url": "/song/url.mp3",
"cover_art_url": "/cover/art/url.jpg"
},
{
"name": "Song Name 3",
"artist": "Artist Name",
"album": "Album Name",
"url": "/song/url.mp3",
"cover_art_url": "/cover/art/url.jpg"
}
]
});This configuration will set up Amplitude.js to work the way you want it. The config JSON is used heavily to configure and optimize Amplitude.js for what your app needs.
There are a lot more features that are explained in greater detail in our latest documentation. If you find errors or places for improvement on our documentation, submit a pull request with the documentation located at /docs/DOCUMENTATION.md. The documentation site reads directly from the GitHub Repo.
If you are experiencing any issues or if you have a feature request, please open up a new GitHub Issue