serversideup / amplitudejs

AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help

AmplitudeJS 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). AmplitudeJS is available under the MIT License.

Demo

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

This Software is Community-run

Open-source software is not sustainable without proper financial support. Maintaining an open source project takes a lot of effort and resources. If you are very thankful for what you can do with AmplitudeJS or if you are using AmplitudeJS to make any sort of revenue, we kindly ask that you contribute any resources available to keep the community growing.

Sponsors

These people believe in open-source. If you are interested in improving the project, become a sponsor.

Platinum Sponsors

Backers

Features

• 🎨 100% customizable design of all player elements
• 🚀 Lightweight, 0 dependencies
• 📕 Thoroughly documented
• 🎧 Support for multiple playlists
• 🌊 Autogenerate waveforms and visualizations using the Web Audio API
• 🎤 Live streaming support
• 🎛 Public functions for unlimited control!
• 🤵 Professionally supported Get professional help →

Don't just take our word for it

• GitHub: Release Radar · January 2019
• CSS Tricks: Front-End Tools: My Favorite Finds of 2017
• FossMint: AmplitudeJS - A Modern Open-Source HTML5 Audio Player

Browser Support

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

Example Players

Looking for some cool examples to get started with? View all of our example players →

View the source

All of our example players have the code available on our "AmplitudeJS Example Players" repository. Feel free to submit a PR of your own example if you want! See the source for our example players →

Installation

Installation is a breeze and very flexible on how you want to use it. View the installation instructions →

Documentation & Usage

All of our documentation is located in the /docs folder, but we made an even easier and more beautiful way to fully experience AmplitudeJS. View our documentation site →

Getting Help

Feeling stuck? No worries! We have entire community built around helping eachother out. Get help →

Roadmap

We have all of our proposed features organized on our roadmap. If you are interested in sponsoring a specific feature, just comment on that feature and we will get in touch with you soon!

amplitudejs's Issues

How to set a start time for a song?

Hello, I have this range as my song duration slider:

<input type="range" id="song-time-slider" class="amplitude-song-slider no-drag" amplitude-singular-song-slider="true" value="0">

And I'm trying to do something like:

$('#song-time-slider').val('17').trigger('input') // 17%

But it dosen't works. Could someone help me here?

Thank you!

Make the Volume Status Tracker Easier

The Volume Status Tracker is offset of the volume status and is hard to style. Look into other options. Also make sure click handlers operate accordingly.

Clicking on the main play/pause button should trigger the corresponding song-index play/pause button to toggle

If you click on a song-index play/pause button, it syncs up with the main play/pause button, but the main play/pause button doesnt always sync up with the song-index play/pause button

In this example, the top play/pause is the main one and the bottom one is the song index one.

Thanks!

Add Dynamic Song Additons

Allow for the user to add a song to the config after Amplitude has been initialized.

amplitude-song-index not working as expected

I am using ampltitude in portfolio site. I am making use of the amplitude-song-index attribute, but I am having a varying degree of success utilizing it. My main issue being that it is giving me unreliable results when the user clicks on an element with a amplitude-song-index attribute.

By unreliable, I mean that a user will click an element with, for example, ``amplitude-song-index='2'and theamplitude-play` class, about 25-50% of the time, it won't play or queue up the proper song (no console errors thrown as well). You can see the behavior in here. In that gif/vid you can see, the first two times I click an element in the playlist, it doesn't work as intended; the third time, it does.

My initialization goes as follows:

Amplitude.init({
    "volume": 1,
    "songs": trackList,
    "soundcloud_client": 'f700ad55df43283e855eda8315d1adca',
    "callbacks": {
        "after_init": "AmplitudeLoaded",
    }
});

The elements that use amplitude-song-index are generated with a $.get function, pulling data from an xml doc. You can see my entire js code here and I am loading the amp <script> in the footer, before my custom code.

Unfortunately I do not have a server set up for the project, but you can view the entire site here (apologies for design issues, still a wip).

I am curious if perhaps my implementation of amplitude is the issue, or there is indeed a bug; any help would be greatly appreciated.

Include Demo In Repo

Do you think it would be a good idea to include a demo folder? It will increase the size of the download, but at least it will show them how they can edit the code locally.

@danpastori what are your thoughts?

Why are callbacks passed as strings?

This seems an odd choice for JavaScript. Restricting callbacks to predefined, global functions significantly restricts flexibility. I've had to manually edit the source for the project I'm working on since it uses namespaces.

Suppress error if no amplitude_config defined. Add a development mode

NPM ALL THE THINGS!

Pretty please publish to npm.

Make documentation and add updated tutorials

After all of the updates are handled, I will be making documentation for all of the features. In GitHub, I will be placing all of these feature enhancements so you can see the status on what is being accomplished. I will be adding new tutorials on Serversideup as well for combining multiple features after the updates.

can't play audio files

I followed the documentation to get started with amplitude : https://open.521dimensions.com/amplitudejs/docs#installation
but I am not able to run any of the examples.
I simply downloaded the latest version "https://github.com/521dimensions/amplitudejs/archive/master.zip" and uploaded to the server. then in examples, for the single song, I updated the song info

"songs": [
        {
          "name": "Song From the Styx",
          "artist": "Jake Jendusa",
          "album": "In Search Of",
          "url": "www.myaddress.com/file.mp3",
          "live": false,
          "cover_art_url": "images/jendusaep.jpg"
        }
      ]

but nothing plays.

can someone please help me to set up?

Older Safari support

Hey there, thank you for this great library!

I was wondering what is the support level for Safari because it works great on 9+ but I'm getting reports that it doesn't work on 6 for example (minority of users of course), as far as I know, 6 does have html5 audio support and it should be working, anyone else have had trouble with older Safari versions?

Autoplay

I see that the auto play option was available in 1.0 but, I am not able to find it in 2.0. Any help would be greatly appreciated.

BTW, great project. Thanks for all the effort on this.

Change all configs to JSON

Currently all of the configurations are handled in arrays. JSON will make it cleaner and expandable. Users will be able to access information easier and have defaults defined.

Circular Volume

A challenge I’m willing to accept (and honestly the lowest priority on the list), but a way to make a knob to control the volume. This will be handled last in the list of updates.

Play a specific song from a soundcloud playlist with an external link

Hi,
I would like to know if it's possible to have a external link (like in a another div than the player) for one song in a soundcloud playlist..?
I saw an exemple on the Laurel Halo's website and I try to build the same system.
http://www.laurelhalo.com/records/

Thank you for your help, best,
Pierre

Add default volume to config

Repeat Functionality

Add a button that adds song repeat functionality to Amplitude.

Amplitude Config Updates

Class 'amplitude-active-song-container' not added for first played song if start_song

Hi guys,

Building a playlist, I wanted to give a particular style to the UI of the song currently playing. This is exactly what the "amplitude-active-song-container" class is meant for! But in the particular following case, there seems to be a flaw in the code source: if the start_song (default index 0 or whatever is specified in the init config object) is the same as the very first played track, then the "amplitude-active-song-container" class is not added to the elements. Apart from that, this works perfectly:

<div class="amplitude-song-container" amplitude-song-index="1"></div> gives <div class="amplitude-song-container amplitude-active-song-container" amplitude-song-index="1"></div> when song 1 is playing
... as long as start_song is not equal to 1 and it is not the very first played track.

I had a look at the code and figured out what was going wrong. I can make a PR to fix it or maybe someone else around here already has a workaround for it, or is there something I am missing here?
Thanks in advance :)

Marie

Getting access to the audio element

I'm trying to write a plugin that can be used along side Amplitude. I'd like to get event update as the audio is playing, but amplitude does not have such event so i was hoping i could get the time update event directly from the audio element.
But i can't find a way to get to that element. Amplitude.active does not seem to return the active element as setting the callback on it has no effect. Amplitude.active also does not seem to return the same thing as config.active when running the debugger.

Auto-play, play or pause is not replacing the class to #amplitude-play-pause.

When amplitude_auto_play is set to true, the #amplitude-play-pause is not changing the class from amplitude-paused to amplitude-playing. The same thing occurs when the #amplitude-play or #amplitude-pause its clicked.

Soundcloud API MetaData Callbacks

Allow the user to grab necessary meta data from the Soundcloud API. Maybe bind this to the actual song JSON? It returns a lot of extra information.

example using dynamic_mode

please help me, how can i using dynamic_mode: true,. and give me a example :)

Bug fix for shuffle + enhancement to initalize amplitude with shuffle_on

amplitude.patch.txt

amplitude-song-time-visualization-index?

Is it possible to create multiple instances of the player with each using amplitude-song-time-visualization?

Make song urls an object

With the song URLs being an object, you can set multiple sources for different formats so all browsers can play them. Allow for the order to maintain precedence

Added Callback for The Pause Function

function privatePause(){
    privateRunCallback('before_pause');


    if( config.active_metadata.live ){
        privateDisconnectStream();
    }
    config.active_song.pause();
    privateRunCallback('after_pause');
}

Multiple players with independent 'amplitude-mute's?

Would be great to have independent mute control for each player.

Change volume and track sliders to HTML5 range inputs.

This will ensure better compatibility than with the embedded divs.

Vertical Volume

This is simply a vertical volume bar. Will give more possibility to custom design.

Song and Volume Sliders

There have been some issues with the way the song and volume sliders have been working. I will make a simpler and more accurate way of handling the slide events of these elements.

Getting the currently playing track ID

Is there a way to access the config properties in the main Amplitude object to detect the currently playing track ID?

Add Playlist Filters

Allow for users to filter the playlist.

Allow for circular dials and fills

It would be cool to allow the user to use circular elements for song status and volume.

stop downloading when in pause state

1. On load some %age of audio file is downloaded and starts playing on clicking play.
2. When the audio is still playing a new request is sent when first part is ending
3. Next bit downloads and continues to play.
4. Clicking on pause. Remaining file get downloaded automatically

Is there a way to stop downloading the entire file when in pause state?

Songs are played immediately after the active song has ended

Hello guys, currently I'm using your library for a client project, it's such a powerful library, it's really cool.

I just have a question about if it's possible to have individual players with unrelated songs in one page. I tried as shows the documentation in Multiple Modular Songs. But the problem is that when the active song ends, the next song start immediately. I don't know if there's something that I did wrong or that is the normal behaviour of Amplitude.

I found a old tutorial of Amplitude where it shows how to build a playlist, and it shows that in a previous version of Amplitude there was a setting called “amplitude_continue_next” that makes just what I want. What happened to that?

I appreciate any support! Thanks!

Debug Mode

A way to print out console issues if needed.

Document and Test Volume sliders

Amplitude has volume sliding. I just need to document and test the usage.

Bump new version tag

Bower still resolves to 2.0.0 which, at least on my Firefox 39.0, throws a TypeError: context.close is not a function at line 987 without even initializing Amplitude. The demos running at 2.1.1 don't throw this exception and work properly. Also, the version statement in bower.json is quite outdated.

Mobile Events handled

Allow users to pass a song and play with out a config of songs.

Say you have a list of songs that keeps changin. This would allow you to pass and dynamically make playlists or play a single song.

Visualization start but don't detect audio

Hi,

Everything work fine except that audio is not detected. Is their some parameter or audio encoding that i missing?

Great script!

Thanks!

If config is recreated, then access to audio object is lost

as the public accessors for the active song is a direct reference to the audio object, if the active_song is changed, then the active public accessors points to the old audio object.

To fix this, the accessors should be a method instead that get a fresh reference to the object every time

Set up config to allow for keybindings to control Amplitude

When a user presses a certain key, let Amplitude control a function.

Errors running "NPM RUN BUILD"

Any thoughts? I couldn't get amplitude.js to work with Ole Frederick's FoundationPress starter theme.

Playlists and songs will be handled through a JSON object

Playlists will be defined through the config. This will allow for a lighter weight and dynamic additions to the playlist after page load.

Multiple pause buttons on the page

Basically, I want the functionality of the ID "amplitude-pause" in multiple instances on the page, but it's not possible right now since it's an ID and not a class. Let me know how to achieve this...

Should be installable via package manager

Either npm or bower, I'm not sure. Probably bower.

Missing update of mainControls' "amplitude-song-index" on pause

Hi guys,
i was playing around with your audio player and I really like it so far. Good job!
Nevertheless I believe having stumbled over a little missing update on the mainControls, when pressing pause, which was easy to fix. Beware that this is only noticable when not the start song is playing.

My initialization of amplitude.js looks like this:

            Amplitude.init({
                songs: songsData,
                soundcloud_client : LH.soundcloudClientID,
                debug: true,
                autoplay: false,
                callbacks: {
                    before_play: "_lh_amplitude_before_play",
                    after_play: "_lh_amplitude_after_play",
                    before_stop: "_lh_amplitude_before_stop",
                    after_stop: "_lh_amplitude_after_stop",
                    before_next: "_lh_amplitude_before_next",
                    after_next: "_lh_amplitude_after_next",
                    before_prev: "_lh_amplitude_before_prev",
                    after_prev: "_lh_amplitude_after_prev",
                    before_album_change: "_lh_amplitude_before_album_change",
                    after_album_change: "_lh_amplitude_after_album_change",
                    after_init: "_lh_amplitude_after_init"
                }
            });

At the beginning within the privatePlayPauseClickHandle function the variable

var playing_song_index = this.getAttribute('amplitude-song-index');

is set. The problem is, that the amplitude-song-index of the mainControls is never updated to the current index of the song that is playing until now. That is the reason, why the audio player then is jumping back to the start song (in my case the first song amplitude-song-index ="0").

My Solution

I have fixed it for me by simply setting the current song index to the amplitude-song-index attribute by adding following line after here

mainControls[i].setAttribute('amplitude-song-index', config.active_index);

I have to admit that I did some further customizations, like:

• adding a loading feedback, until a song plays
• mixing audio URLs from soundcloud and my own server for Amplitude's songs JSON data
• combination with the responsive rangeslider.js for Amplitude's amplitude-song-time-visualization

If you don't experience this bug in your distribution, then pardon my fault, which was caused of my customizations. Feel free to close this issue in that case. If you need further infos let me know.
Cheers Dario