AmplitudeJS Configuration Options

Part of what makes AmplitudeJS so powerful is all of the configuration options available. Most of these options have an associated public method that allows you to set or get the state of the option as well. When building a player, you will be initially setting these options when you first run the Amplitude.init() method.

All of the available options are located in the documentation here: AmplitudeJS Configuration Options. In this tutorial we will be diving into more of the abstract, maybe not so straight forward options that AmplitudeJS provides.

Setting Playback Speed

Sometimes users want to control the speed of playback for a piece of audio. This is especially prevalent with podcasts or audio that can be very long. You might want to speed it up a bit. To do this, you can set the default playback speed for your player to be either 1.0, 1.5, or 2.0. 1.0 is the default speed, 2.0 is twice as fast and 1.5 is right in the middle. To set the default speed, initialize AmplitudeJS with the following key:

Amplitude.init({
  songs: [],
  playback_speed: 1.5
});

You can get the playback speed through a public method with Amplitude.getPlaybackSpeed() or allow the user to switch between the options with an interactive element of <span class="amplitude-playback-speed"></span>.

Volume Increment and Decrement

AmplitudeJS allows for the user to increment and decrement the volume of their player through an interaction (touch or click) on an element. The exception being iOS of course. When you configure AmplitudeJS, you can set how much the volume should increment or decrement each time the element is clicked.

The range the volume can be at is between 1 and 100. By default every time you click a volume up element (<span class="amplitude-volume-up"></span>) or volume down element (<span class="amplitude-volume-down"></span>) the volume gets adjusted +5 or -5.

To change this value, for the respective function, configure AmplitudeJS like this:

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

The volume will now increment by 10 every time you increase the volume and decrement by 15 every time you decrease the volume.

Key Bindings

This is one of the newer features of AmplitudeJS and one of the more interesting features. You can actually bind functionality to key presses on the keyboard. Any key can be bound to one of the 6 available events:

1. play_pause
2. next
3. prev
4. stop
5. shuffle
6. repeat

You will just need to know the key code of the key you want to bind to the event. The simplest way to do that is to visit: JavaScript Event KeyCodes. You can then just press a key and find the code!

Say you want to bind play_pause button to the p key. You would initialize AmplitudeJS like this:

Amplitude.init({
  songs: [],
  "bindings": {
    80: 'play_pause'
  },
});

Now whenever you press the p button on the page, AmplitudeJS will toggle the play pause!

The functionality is the same and you can combine events to key code in any way you want. It always goes in the same format of:

"bindings": {
    {KEY_CODE}: {FUNCTION}
}

You now have an enhanced UX option for your player!

Callbacks

When you configure AmplitudeJS, you can add an array of callbacks at certain events. These callbacks are methods that you can hook into the functionality of AmplitudeJS and run at certain events. Below is a list of the possible events to choose from:

• before_play
• after_play
• before_stop
• after_stop
• time_update
• album_change
• song_change
• time_updated
• playlist_changed
• song_repeated

If you need more information on what each of these callbacks does, check out the docs here: AmplitudeJS Callbacks.

Let’s say you want to track how many times your users interact with a certain track. Every time they play, you can add a callback to the before_play hook that increments a variable (or calls a remote server to keep track).

You’d initialize your callbacks like this when you init AmplitudeJS:

var playCount = 0;

Amplitude.init({
     "songs": [],
     "callbacks": {
         'before_play': function(){
             playCount++;
         }
     }
});

Of course, these callback can be as complex as needed. You can also call AmplitudeJS public methods inside to get more information about the state of the player.

The callback is always configured like:

{callback_key}: function(){

}

Continue Next

This is one of the last weird configurations we will go through. It’s the continue_next configuration. What this does is when the audio has finished, it determines if AmplitudeJS should continue to the next song or not. Sometimes, you might not want the player to automatically go to the next audio. When the song is finished, you just want the player to stop. This would be used in a scenario where you configure multiple individual players on a page where they aren’t all connected. You can set the continue_next configuration to be false and when the song has ended, the player stops.

To do that, set the configuration like this:

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

So that’s an over view of how to configure AmplitudeJS. Any of the configuration variables found in the documentation are handled the same way. You’d set them in the init method. If you have any questions about some of the configuration variables, feel free to drop a message in the comments below and I can lend a hand!