JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Amplitudejs

    A Javascript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required)
    Filed under 

    • 🔾66%Overall
    • 2,867
    • 5.1 days
    • 🕩296
    • 👥10

    AmplitudeJS Logo

    Gitter npm version david-dm MIT License

    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.

    Demo

    MIT License
    Click the image above to go to the demo site or click here.

    Features

    • 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

    Browsers support

    | IE / Edge
    IE / Edge | Firefox
    Firefox | Chrome
    Chrome | Safari
    Safari | Opera
    Opera | | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| 4.0+| 3.5+| 4.0+| 10.5+|

    Installation

    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.

    Option 2: Automatic install via npm

    Download it via NPM to your existing project:

    npm install --save amplitudejs
    

    You will see the file under node_modules/amplitudejs/dist/amplitude.js.

    Option 3: Manual download

    Download the amplitude.js file from our releases page and include the file manually with your project.

    After install, you must initialize Amplitude.js

    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.

    Documentation & Usage

    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.

    Reporting Issues

    If you are experiencing any issues or if you have a feature request, please open up a new GitHub Issue

    Show All