### Start Nuxt 3 Development Server
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/README.md
Starts the Nuxt 3 development server, typically accessible at http://localhost:3000. This command is used for local development and hot-reloading. It requires dependencies to be installed. Supported package managers include npm, pnpm, yarn, and bun.
```bash
# npm
npm run dev
```
```bash
# pnpm
pnpm run dev
```
```bash
# yarn
yarn dev
```
```bash
# bun
bun run dev
```
--------------------------------
### Complete Player Example
Source: https://context7.com/serversideup/amplitudejs/llms.txt
A full HTML and JavaScript example demonstrating how to integrate and use Amplitude.js for an audio player.
```APIDOC
## HTML Structure and Amplitude.js Integration
### Description
This example shows a complete HTML page with CSS styling and JavaScript to initialize and control an audio player using Amplitude.js.
### Method
HTML, JavaScript, CSS
### Endpoint
N/A (Client-side implementation)
### Parameters
See Amplitude.init() for JavaScript parameters.
### Request Example
```html
My Audio Player
```
#### Success Response (200)
N/A (Client-side implementation)
#### Response Example
N/A (Client-side implementation)
```
--------------------------------
### Install AmplitudeJS via CDN or NPM
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Instructions for installing AmplitudeJS using either a Content Delivery Network (CDN) link or via NPM for project integration. The CDN method is suitable for quick setup, while NPM is for more structured projects.
```html
```
```bash
npm install --save amplitudejs
```
```javascript
import Amplitude from 'amplitudejs';
```
--------------------------------
### Install Dependencies using Package Managers
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/README.md
Installs project dependencies using common package managers like npm, pnpm, yarn, and bun. Ensure you have the chosen package manager installed on your system. This step is essential before running the development server or building the application.
```bash
# npm
npm install
```
```bash
# pnpm
pnpm install
```
```bash
# yarn
yarn install
```
```bash
# bun
bun install
```
--------------------------------
### Install AmplitudeJS with NPM
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/1.installation/1.index.md
This command installs AmplitudeJS into your existing project using npm. After installation, the AmplitudeJS file will be located under `node_modules/amplitudejs/dist/amplitude.js`.
```sh
npm install --save amplitudejs
```
--------------------------------
### Initialize with Specific Starting Playlist in AmplitudeJS
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/014.start-song-start-playlist.md
Defines which playlist AmplitudeJS should begin playback with. The `starting_playlist` parameter accepts the key of the desired playlist from the `playlists` object. This is useful for managing multiple distinct music collections.
```javascript
Amplitude.init({
songs: ["..."],
playlists: {
"key_of_starting_playlist": ["..."]
},
starting_playlist: "key_of_starting_playlist"
});
```
--------------------------------
### Initialize with Specific Starting Song within a Playlist in AmplitudeJS
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/014.start-song-start-playlist.md
Allows setting both the starting playlist and a specific song within that playlist. Uses `starting_playlist` to identify the playlist and `starting_playlist_song` for the song's index within that playlist. Enables precise control over initial playback.
```javascript
Amplitude.init({
songs: ["..."],
playlists: {
"key_of_starting_playlist": ["..."]
},
starting_playlist: "key_of_starting_playlist",
starting_playlist_song: 3
});
```
--------------------------------
### Initialize with Specific Starting Song in AmplitudeJS
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/014.start-song-start-playlist.md
Sets the initial song that AmplitudeJS will play upon initialization. The `start_song` parameter takes the index of the desired song within the `songs` array. Defaults to the first song (index 0).
```javascript
Amplitude.init({
songs: ["..."],
start_song: 3
});
```
--------------------------------
### AmplitudeJS Stop Callback Example
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/010.callbacks.md
This JavaScript code demonstrates how to use the 'stop' callback in AmplitudeJS. When the audio playback is stopped, the provided function will be executed, logging a message to the console. This example also shows the basic structure for initializing AmplitudeJS with songs.
```javascript
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"
}
],
callbacks: {
stop: function(){
console.log("Audio has been stopped.")
}
}
});
```
--------------------------------
### Play
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Starts playback of the currently active song.
```APIDOC
## Play
### Description
This simply plays whatever song is active.
### Method
POST
### Endpoint
`/api/playback/play`
### Parameters
None
### Request Example
```
POST /api/playback/play
```
### Response
#### Success Response (200)
- **message** (string) - A confirmation message.
#### Response Example
```json
{
"message": "Playback started."
}
```
```
--------------------------------
### Prepare Environment: Copy .env.example
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/README.md
Copies the example environment file to a new file named '.env'. This is a crucial first step to configure project-specific settings before running any commands. No external dependencies are required.
```bash
cp .env.example .env
```
--------------------------------
### Build Nuxt 3 Application for Production
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/README.md
Builds the Nuxt 3 application for production deployment. This command optimizes and bundles the application assets. It requires dependencies to be installed and is available for npm, pnpm, yarn, and bun.
```bash
# npm
npm run build
```
```bash
# pnpm
pnpm run build
```
```bash
# yarn
yarn build
```
```bash
# bun
bun run build
```
--------------------------------
### JavaScript Initialization with Song Configuration
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Example of initializing AmplitudeJS with an array of song objects. Demonstrates configuration options for song name, artist, URL, and special properties like `live` for live streams, `visualization`, and integration with SoundCloud.
```javascript
Amplitude.init({
songs: [
{
name: "Live Stream",
artist: "Radio Station",
url: "https://stream.example.com/live",
live: true // Mark as live stream
},
{
name: "Song with Visualization",
artist: "Artist",
url: "/songs/song.mp3",
visualization: "bars_visualization"
},
{
name: "SoundCloud Track",
artist: "SoundCloud Artist",
url: "https://soundcloud.com/artist/track"
}
],
soundcloud_client: "YOUR_SOUNDCLOUD_CLIENT_ID",
soundcloud_use_art: true
});
```
--------------------------------
### Get Version
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Fetches the current version of the AmplitudeJS library being used.
```APIDOC
## Get Version
### Description
Returns the version of AmplitudeJS being used.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getVersion()
```
### Response
#### Success Response (200)
- **version** (string) - The version string of AmplitudeJS.
#### Response Example
```json
{
"version": "5.2.1"
}
```
```
--------------------------------
### Complete HTML Audio Player Example with Amplitude.js
Source: https://context7.com/serversideup/amplitudejs/llms.txt
A full HTML document showcasing a functional audio player using Amplitude.js. It includes the necessary CDN link, basic CSS for styling player elements, and HTML structure for song information, playback controls, playlist, and volume adjustment. The JavaScript section initializes Amplitude with song data, callbacks, and player settings.
```html
My Audio Player
```
--------------------------------
### Initialize Amplitude.js with Playlists
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Initializes Amplitude.js with a list of songs and predefined playlists. Playlists can contain song indices or full song objects. This setup is crucial for organizing and accessing music within the player.
```javascript
Amplitude.init({
songs: [
{
name: "Risin' High",
artist: "Ancient Astronauts",
url: "/songs/risin-high.mp3",
cover_art_url: "/album-art/we-are-to-answer.jpg"
},
{
name: "The Gun",
artist: "Lorn",
url: "/songs/the-gun.mp3",
cover_art_url: "/album-art/ask-the-dust.jpg"
},
{
name: "First Snow",
artist: "Emancipator",
url: "/songs/first-snow.mp3",
cover_art_url: "/album-art/soon-it-will-be-cold.jpg"
}
],
playlists: {
ancient_astronauts: {
songs: [0],
title: 'Best of Ancient Astronauts',
author: 'Curator Name'
},
trip_hop: {
songs: [1, 2],
title: 'Trip Hop Mix 2024',
author: 'DJ Name',
description: 'Best trip hop tracks'
},
special_mix: {
songs: [
0,
1,
{
name: "Exclusive Track",
artist: "Secret Artist",
url: "/songs/exclusive.mp3",
cover_art_url: "/art/exclusive.jpg"
}
],
title: 'Special Edition Mix'
}
}
});
```
--------------------------------
### Include AmplitudeJS via CDN
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/1.installation/1.index.md
This code snippet shows how to include AmplitudeJS in the `` section of your HTML file using a CDN link from jsDelivr. Replace `{{'version-number'}}` with the specific version you wish to use. Manual version setting is recommended for control over updates.
```html
```
--------------------------------
### Get Buffered
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Returns the buffered percentage of the currently playing song, indicating readiness for playback.
```APIDOC
## Get Buffered
### Description
Returns the buffered percentage of the now playing song. This can be used to show how much of the song has been buffered and is ready to be played.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getBuffered()
```
### Response
#### Success Response (200)
- **bufferedPercentage** (float) - The percentage of the song that has been buffered (0-100).
#### Response Example
```json
{
"bufferedPercentage": 75.5
}
```
```
--------------------------------
### Set Initial Volume in AmplitudeJS
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/006.volume.md
Configure the starting volume for the AmplitudeJS player. This is set as a percentage (0-100) within the initialization object. The default value is 100%.
```javascript
Amplitude.init({
"songs": [...],
"volume": 35
});
```
--------------------------------
### Configure Volume Settings on Initialization
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Sets initial volume-related parameters when Amplitude.js is first initialized. This includes the starting volume level and the increments/decrements used for volume adjustments.
```javascript
Amplitude.init({
songs: [...],
volume: 70,
volume_increment: 10,
volume_decrement: 10
});
```
--------------------------------
### Song Progress and Time Information
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Functions to get detailed information about the current song's progress, duration, and buffered time.
```APIDOC
## Progress Information
### Description
Provides methods to retrieve and manipulate the playback progress of the current song.
### Method
`Amplitude.getSongPlayedPercentage()`
`Amplitude.setSongPlayedPercentage(percentage)`
`Amplitude.getSongPlayedSeconds()`
`Amplitude.getSongDuration()`
`Amplitude.getBuffered()`
### Parameters
#### Path Parameters
- **percentage** (number) - Required - The desired playback position as a percentage (0-100).
### Response
#### Success Response (200)
- **percentage** (number) - The percentage of the song that has been played (0-100).
- **secondsPlayed** (number) - The number of seconds played in the current song.
- **duration** (number) - The total duration of the current song in seconds.
- **buffered** (number) - The amount of the song that has been buffered, in seconds.
### Request Example
```javascript
const percentagePlayed = Amplitude.getSongPlayedPercentage();
Amplitude.setSongPlayedPercentage(50); // Jump to 50% of the song
const secondsPlayed = Amplitude.getSongPlayedSeconds();
const duration = Amplitude.getSongDuration();
const bufferedAmount = Amplitude.getBuffered();
```
```
--------------------------------
### Initialize AmplitudeJS with Playback Speed
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/012.playback-speed.md
Sets the default playback speed for AmplitudeJS upon initialization. This allows the player to start at a speed other than the default 1.0x. Requires the AmplitudeJS library to be included and configured.
```javascript
Amplitude.init({
songs: ["..."],
playback_speed: 2.0
});
```
--------------------------------
### Initialize AmplitudeJS with Debug Mode Enabled
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/008.debug.md
Enables verbose logging during AmplitudeJS initialization by setting the 'debug' flag to true within the configuration object. This is useful for observing the initial setup and state of the player.
```javascript
Amplitude.init({
songs: [...],
debug: true
})
```
--------------------------------
### Get Analyser
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Returns the Web Audio API Analyser node, allowing integration with audio visualization.
```APIDOC
## Get Analyser
### Description
Returns the Web Audio API Analyser. This allows for the user to bind to the active audio through the web audio API.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getAnalyser()
```
### Response
#### Success Response (200)
- **analyserNode** (AnalyserNode) - The Web Audio API AnalyserNode object.
#### Response Example
```json
{
"analyserNode": { /* AnalyserNode object details */ }
}
```
```
--------------------------------
### Volume Control
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Functions to manage the audio playback volume, including setting, getting, and configuring volume increments.
```APIDOC
## Volume Management
### Description
Controls the audio volume level for playback.
### Method
`Amplitude.getVolume()`
`Amplitude.setVolume(volumeLevel)`
### Parameters
#### Path Parameters
- **volumeLevel** (number) - Required - The desired volume level, ranging from 0 (mute) to 100 (max volume).
### Response
#### Success Response (200)
- **currentVolume** (number) - The current volume level (0-100).
### Request Example
```javascript
const currentVolume = Amplitude.getVolume();
Amplitude.setVolume(50); // Set volume to 50%
Amplitude.setVolume(0); // Mute volume
```
## Volume Configuration
### Description
Configures volume settings during AmplitudeJS initialization.
### Method
`Amplitude.init(config)`
### Parameters
#### Request Body
- **volume** (number) - Optional - The initial volume level (0-100).
- **volume_increment** (number) - Optional - The amount to increase/decrease volume with each step.
- **volume_decrement** (number) - Optional - The amount to decrease volume with each step.
### Request Example
```javascript
Amplitude.init({
songs: [...],
volume: 70,
volume_increment: 10,
volume_decrement: 5
});
```
```
--------------------------------
### HTML Next and Previous Button Controls for AmplitudeJS
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Demonstrates the use of HTML buttons for navigating between tracks in AmplitudeJS. Examples cover global next/previous track controls as well as controls specific to a particular playlist.
```html
```
--------------------------------
### AmplitudeJS Visualization Template (JavaScript)
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/6.fx/2.visualizations.md
This JavaScript template provides the basic structure and required methods for creating a custom visualization object for AmplitudeJS. It includes methods for initialization, setting preferences, starting, and stopping the visualization, along with defining the visualization's ID and name. Users can extend this template with their own logic and styling.
```javascript
/*
This is a template for how to build a visualization for
AmplitudeJS. The visualization should be modular contain
the methods and variables outlined. You can add any additional
methods or variables inside of the object.
*/
/*
Replace 'VisualizationObjectName' with the proper object
name for your visualization.
*/
function VisualizationObjectName(){
/*
Define the ID of your visualization. This is used to apply
visualizations to songs, playlists, and default. It is a JSON
key so make sure you use `_`
*/
this.id = 'visualization_id';
/*
Define a clean name for your visualization.
*/
this.name = 'Visualization Name';
/*
Initialize the container. This will get set to the element passed in
when you start the visualization.
*/
this.container = '';
/*
Define any settings that your visualization will need. This is JSON so
make sure it's clearly defined and standards are followed. These should be
able to be overwritten by the user when they pass in their preferences.
*/
this.preferences = {
}
/*
Initialize the analyser for the visualization. This will be set when the
visualization is started.
*/
this.analyser = '';
/*
Returns the ID of the visualization. Do not overwrite this, this is necessary
for registering the visualization.
*/
this.getID = function(){
return this.id;
}
/*
Returns the name of the visualization.
*/
this.getName = function(){
return this.name;
}
/*
Merge the user defined preferences with the preferences for the visualization.
*/
this.setPreferences = function( userPreferences ){
for( var key in this.preferences ){
if( userPreferences[ key ] != undefined) {
this.preferences[key] = userPreferences[key];
}
}
}
/*
Start the visualization. Do not over write this. This is how the visualization
gets kicked into gear. The element passed in is the container element where you
will insert canvas' or whatever works.
*/
this.startVisualization = function( element ){
this.analyser = Amplitude.getAnalyser();
this.container = element;
/*
Your code here
*/
}
/*
Stop the visualization. Do not over write this. This gets called when the
visualization is stopped so there's no infinite loops in memory. You should
clear all animation frames and all timed callbacks here.
This will clear the container as well so when the visualization starts again
it can be different than before if needed.
*/
this.stopVisualization = function(){
this.container.innerHTML = '';
}
}
```
--------------------------------
### AmplitudeJS Get Config
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Retrieves the current configuration settings of the AmplitudeJS player. This function is useful for inspecting or logging the player's state.
```javascript
Amplitude.getConfig();
```
--------------------------------
### Get All Songs
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Retrieves all songs currently defined in the AmplitudeJS player's global song array.
```APIDOC
## Get songs
### Description
This method returns all of the songs defined in AmplitudeJS. It can be used for a variety of different functions. It's extremely helpful if you are AJAX loading songs and want to see the contents of the song array.
### Method
GET
### Endpoint
`/api/songs`
### Parameters
None
### Request Example
```
GET /api/songs
```
### Response
#### Success Response (200)
- **songs** (array) - An array of all song objects.
#### Response Example
```json
[
{
"url": "path/to/song1.mp3",
"title": "Song One",
"artist": "Artist A"
},
{
"url": "path/to/song2.mp3",
"title": "Song Two",
"artist": "Artist B"
}
]
```
```
--------------------------------
### Standardized AmplitudeJS Element Definitions by Scope
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/8.migrations/1.index.md
AmplitudeJS 4.0+ standardizes element definitions using a combination of class names and data attributes to specify the scope (global, playlist, song, or song in playlist). This simplifies attribute management across different levels of control.
```html
```
--------------------------------
### Initialize AmplitudeJS with Song Delay
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/011.delay.md
Configure the time delay between consecutive audio tracks when initializing AmplitudeJS. This setting controls how long the player waits before starting the next song. The delay is provided in milliseconds.
```javascript
Amplitude.init({
songs: ["..."],
delay: 3000
});
```
--------------------------------
### HTML Play, Pause, and Stop Button Controls for AmplitudeJS
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Provides examples of HTML buttons that can be used to control audio playback with AmplitudeJS. These include global play/pause, separate play and pause buttons, stop buttons, and options for controlling specific playlists or songs by index.
```html
```
--------------------------------
### AmplitudeJS Attributes with HTML5 Dataset Prefix
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/8.migrations/1.index.md
In AmplitudeJS 4.0+, all attributes related to songs and playlists are prefixed with 'data-' to comply with HTML5 dataset API standards. This change affects how you reference elements for songs and playlists. For example, 'amplitude-song-index' is now 'data-amplitude-song-index'.
```html
Play/Pause
```
--------------------------------
### Initialize AmplitudeJS with Song Data and Settings
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Demonstrates the basic initialization of AmplitudeJS. It involves passing a configuration object that includes an array of song objects with metadata, playback settings like volume, and default album art.
```javascript
Amplitude.init({
songs: [
{
name: "Risin' High",
artist: "Ancient Astronauts",
album: "We Are to Answer",
url: "/songs/risin-high.mp3",
cover_art_url: "/album-art/we-are-to-answer.jpg"
},
{
name: "The Gun",
artist: "Lorn",
album: "Ask The Dust",
url: "/songs/the-gun.mp3",
cover_art_url: "/album-art/ask-the-dust.jpg"
}
],
volume: 70,
volume_increment: 5,
volume_decrement: 5,
continue_next: true,
default_album_art: "/images/default-cover.jpg"
});
```
--------------------------------
### Get AmplitudeJS Version - JavaScript
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/2.help-and-support/1.index.md
Retrieves the current version of the AmplitudeJS library. This function is crucial for debugging and ensuring compatibility when seeking support. It is called directly within the browser's developer console.
```javascript
Amplitude.getVersion()
```
--------------------------------
### Manage Playlist State and Metadata
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Provides methods to retrieve and update information about the currently active playlist and its metadata. This includes getting the active playlist's key, its title and author, and setting new metadata for any playlist.
```javascript
// Get active playlist key
const activePlaylist = Amplitude.getActivePlaylist();
console.log('Currently playing playlist:', activePlaylist);
// Get active playlist metadata
const playlistMeta = Amplitude.getActivePlaylistMetadata();
console.log(`Playlist: ${playlistMeta.title} by ${playlistMeta.author}`);
// Update playlist metadata
Amplitude.setPlaylistMetaData('trip_hop', {
title: 'Updated Trip Hop Mix',
year: 2024
});
```
--------------------------------
### Register Custom Visualization in JavaScript
Source: https://context7.com/serversideup/amplitudejs/llms.txt
This snippet demonstrates how to register a custom audio visualization using Amplitude.js. It utilizes the Web Audio API analyser to get frequency data and draws bars on a canvas. It also shows how to set this visualization globally, for playlists, or for specific songs.
```javascript
Amplitude.registerVisualization(
function(analyser, canvas) {
const ctx = canvas.getContext('2d');
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;
ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
},
{
name: 'custom_bars',
start_delay: 0
}
);
// Set visualization for player
Amplitude.setGlobalVisualization('custom_bars');
// Set visualization for playlist
Amplitude.setPlaylistVisualization('trip_hop', 'custom_bars');
// Set visualization for specific song
Amplitude.setSongVisualization(2, 'custom_bars');
// Get Web Audio API analyser
const analyser = Amplitude.getAnalyser();
```
--------------------------------
### Preview Nuxt 3 Production Build Locally
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/README.md
Locally previews the production build of the Nuxt 3 application. This command is useful for testing the production output before deploying. It requires the application to be built first. Supported package managers include npm, pnpm, yarn, and bun.
```bash
# npm
npm run preview
```
```bash
# pnpm
pnpm run preview
```
```bash
# yarn
yarn preview
```
```bash
# bun
bun run preview
```
--------------------------------
### AmplitudeJS Get Repeat State
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Gets the current global repeat status for the AmplitudeJS player. Returns whether repeat is enabled or disabled globally.
```javascript
Amplitude.getRepeat()
```
--------------------------------
### Initialize AmplitudeJS with Songs and Playlists
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/3.configuration/003.playlists.md
Demonstrates initializing AmplitudeJS with a global list of songs and then defining multiple playlists. Songs can be referenced by their index in the global list or as complete song objects within the playlist definition. This allows for flexible organization and display of audio content.
```javascript
Amplitude.init({
songs: [
{
"name": "Risin' High (feat Raashan Ahmad)",
"artist": "Ancient Astronauts",
"album": "We Are to Answer",
"url": "../songs/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
"cover_art_url": "../album-art/we-are-to-answer.jpg"
},
{
"name": "The Gun",
"artist": "Lorn",
"album": "Ask The Dust",
"url": "../songs/08 The Gun.mp3",
"cover_art_url": "../album-art/ask-the-dust.jpg",
},
{
"name": "Anvil",
"artist": "Lorn",
"album": "Anvil",
"url": "../songs/LORN - ANVIL.mp3",
"cover_art_url": "../album-art/anvil.jpg",
},
{
"name": "I Came Running",
"artist": "Ancient Astronauts",
"album": "We Are to Answer",
"url": "../songs/ICameRunning-AncientAstronauts.mp3",
"cover_art_url": "../album-art/we-are-to-answer.jpg",
},
{
"name": "First Snow",
"artist": "Emancipator",
"album": "Soon It Will Be Cold Enough",
"url": "../songs/FirstSnow-Emancipator.mp3",
"cover_art_url": "../album-art/soon-it-will-be-cold-enough.jpg"
},
{
"name": "Terrain",
"artist": "pg.lost",
"album": "Key",
"url": "../songs/Terrain-pglost.mp3",
"cover_art_url": "../album-art/key.jpg"
},
{
"name": "Vorel",
"artist": "Russian Circles",
"album": "Guidance",
"url": "../songs/Vorel-RussianCircles.mp3",
"cover_art_url": "../album-art/guidance.jpg"
},
{
"name": "Intro / Sweet Glory",
"artist": "Jimkata",
"album": "Die Digital",
"url": "../songs/IntroSweetGlory-Jimkata.mp3",
"cover_art_url": "../album-art/die-digital.jpg"
},
{
"name": "Offcut #6",
"artist": "Little People",
"album": "We Are But Hunks of Wood Remixes",
"url": "../songs/Offcut6-LittlePeople.mp3",
"cover_art_url": "../album-art/we-are-but-hunks-of-wood.jpg"
},
{
"name": "Dusk To Dawn",
"artist": "Emancipator",
"album": "Dusk To Dawn",
"url": "../songs/DuskToDawn-Emancipator.mp3",
"cover_art_url": "../album-art/from-dusk-to-dawn.jpg"
}
],
playlists: {
"ancient_astronauts": {
songs: [0, 3],
title: 'Best of Ancient Astronauts'
},
"trip_hop": {
songs: [1, 2, 5, 6, 7, 8],
title: 'Trip Hop Mix 2018',
author: 'Dan Pastori'
},
"emancipator": {
songs: [4, 9, {
"name": "Anthem",
"artist": "Emancipator",
"album": "Soon It Will Be Cold Enough",
"url": "../songs/Anthem-Emancipator.mp3",
"cover_art_url": "../album-art/soon-it-will-be-cold-enough.jpg"
}],
title: 'Emancipator\'s Greatest Hits'
}
}
});
```
--------------------------------
### Initialize Amplitude.js with Song Objects (JavaScript)
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/1.installation/2.initialization.md
Demonstrates how to initialize Amplitude.js by passing an object containing an array of song objects to the Amplitude.init() method. Each song object includes details like name, artist, album, URL, and cover art URL. This is the minimum required configuration.
```javascript
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"
}
]
});
```
--------------------------------
### Get Delay
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Retrieves the currently configured delay in milliseconds between songs.
```APIDOC
## Get Delay
### Description
Gets the current delay between songs in milliseconds.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getDelay()
```
### Response
#### Success Response (200)
- **delayMilliseconds** (integer) - The current delay between songs in milliseconds.
#### Response Example
```json
{
"delayMilliseconds": 5000
}
```
```
--------------------------------
### Define Global Visualization on Initialization
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/6.fx/2.visualizations.md
Illustrates setting a global visualization during AmplitudeJS initialization by specifying the 'visualization' key with the registered visualization's key.
```javascript
Amplitude.init({
songs: ["..."],
visualizations: [
{
object: MichaelBromleyVisualization,
params: {
}
}
],
visualization: 'michaelbromley_visualization'
});
```
--------------------------------
### Get Song Duration
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Retrieves the total duration in seconds of the current song.
```APIDOC
## Get Song Duration
### Description
Returns the duration of the current song.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getSongDuration()
```
### Response
#### Success Response (200)
- **duration** (float) - The total duration of the current song in seconds.
#### Response Example
```json
{
"duration": 300.5
}
```
```
--------------------------------
### Set Delay
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Configures the delay in milliseconds between the end of one song and the start of the next.
```APIDOC
## Set Delay
### Description
If you have multiple songs that your player is using you can change the amount of time you have as a delay between the songs. When one song ends, what is set will be the amount of time delayed before the next song starts.
### Method
POST
### Endpoint
N/A (JavaScript method)
### Parameters
#### Query Parameters
- **milliseconds** (integer) - Required - The delay time in milliseconds between songs.
### Request Example
```javascript
Amplitude.setDelay( 5000 )
```
### Response
#### Success Response (200)
- **status** (string) - Indicates success or failure of the operation.
#### Response Example
```json
{
"status": "success"
}
```
```
--------------------------------
### AmplitudeJS Initialization and Playback Callbacks
Source: https://context7.com/serversideup/amplitudejs/llms.txt
Configures AmplitudeJS initialization with a set of callbacks for playback events such as initialization completion, song play, pause, stop, and changes in song or playlist. These callbacks allow custom actions to be triggered during different stages of audio playback.
```javascript
Amplitude.init({
songs: [...],
callbacks: {
initialized: function() {
console.log('AmplitudeJS initialized successfully');
},
play: function() {
console.log('Song started playing');
updatePlayCount();
},
pause: function() {
console.log('Song paused');
},
stop: function() {
console.log('Song stopped');
},
song_change: function() {
const song = Amplitude.getActiveSongMetadata();
console.log(`Now playing: ${song.name} by ${song.artist}`);
updateNowPlaying(song);
},
song_repeated: function() {
console.log('Song repeated');
},
playlist_changed: function() {
const playlist = Amplitude.getActivePlaylist();
console.log('Switched to playlist:', playlist);
},
album_change: function() {
console.log('Album changed');
},
next: function() {
console.log('Next track');
},
prev: function() {
console.log('Previous track');
}
}
});
```
--------------------------------
### Get Song Played Seconds
Source: https://github.com/serversideup/amplitudejs/blob/master/docs/content/docs/5.functions/1.index.md
Returns the current playback time in seconds for the song that is currently playing.
```APIDOC
## Get Song Played Seconds
### Description
This method returns the current seconds the user is into the song.
### Method
GET
### Endpoint
N/A (JavaScript method)
### Parameters
None
### Request Example
```javascript
Amplitude.getSongPlayedSeconds()
```
### Response
#### Success Response (200)
- **playedSeconds** (float) - The current playback time in seconds.
#### Response Example
```json
{
"playedSeconds": 125.75
}
```
```