AmplitudeJS

Amplitude.js is a library that allows designers to fully control the look and feel of an HTML5 audio player using CSS and HTML attributes, bypassing the browser's default playback interface.

Key capabilities include:

• Custom Styling: Control player design by applying specific classes and/or attributes to any page elements.
• Playlist Management: Built-in support for playlist features such as next, previous, and shuffle.
• Enhanced Metadata: Support for song metadata and audio visualizations.
• Mobile Support: Automatically detects mobile devices and applies touchstart event listeners instead of click for better responsiveness.

Amplitude FX elements are specialized components used to create audio waveforms and visualizations. These elements leverage the Web Audio API to provide advanced fine-tuning capabilities and visual feedback for audio players.

Browser Support Requirements: Because FX elements rely on the Web Audio API, the user's browser must support it. Most modern browsers support this API. If the browser does not support the Web Audio API, Amplitudejs will gracefully degrade by simply not using the FX features in your player.

When using volume increment and decrement buttons, you can specify how much the volume changes per click by using the volume_increment and volume_decrement keys in your Amplitude.init() configuration. These values are treated as percentage adjustments. The default value for both is 5.

Amplitude.init({
    "songs": [...],
    "volume_increment": 10,
    "volume_decrement": 10
});

To automatically display playlist metadata (like title or author) in your interface, add an element to your HTML with the following attribute:

data-amplitude-playlist-info="{key}"

Replace {key} with the unique key of the playlist you wish to display information for.

Depending on your needs, you can access different levels of support:

• Community Support: Since AmplitudeJS is open source (MIT license), you can seek assistance from the community.
• Professional Support: For time-sensitive requests or direct contact with the creators, you can request professional support at https://serversideup.net/get-help/?quick_question=amplitudejs.

Before running the application, you must create a .env file by copying the provided example file and filling in the required environment variables.

cp .env.example .env

By default, AmplitudeJS automatically plays the next song in a list or playlist once the current song finishes. To prevent this behavior and stop playback entirely after a song ends, set the continue_next configuration flag to false during initialization.

Amplitude.init({
    "songs": [...],
    "continue_next": false
});

AmplitudeJS uses elements identified by classes prefixed with amplitude- to handle audio playback controls and metadata display.

• Interactive elements: Elements that trigger events (e.g., play, next).
• Metadata elements: Elements that are automatically populated with information about the active audio (e.g., album art, song titles).

Styling Note: Most elements can be any HTML tag and can be styled via their class or specific IDs. However, the album art element must be an <img> tag.