Own Design & Presets

Design your FrissBee Audio Player the way you want.

Overview

The FrissBee Audio Player has a number of setting options for the design.

Here is the list of all attributes:

bg-color
color-text-playerbar
font-band-name
font-song-title
color-slider
color-play-pause
color-buttons
height-playlist
on-off-playlist
volume-start
color-playlist-text-inactive
color-playlist-text-active
color-playlist-bg-inactive
color-playlist-bg-active
shadow-player

Attribute description

It would result in a long text if all attributes were described individually here. It is much easier to generate the design with the Design Generator. You will see very quickly which attributes can take which value. That is much easier, isn't it?

The easiest way to change the design

Use a preset from the FrissBee Audio Player and change only the attributes you want to adjust. You can set this in the frissbee-audio-player HTM tag or with JavaScript using the setAttribute() methode.

An example of changing the attribute volume-start with the preset dark:

In the frissbee-audio-player HTML tag

With JavaScript

Change the design with all attributes

For a completely own design you can set all attributes of course. Then the attribute preset is not necessary - better said unnecessary.

Of course you can do this in the frissbee-audio-player HTML tag or in the JavaScript file with setAttribute() as described in "The easiest way to change the design".

You can use the Design Generator for this.

Change the design with own presets

You can also create your own presets. Create a preset with all the attributes. The Design Generator makes it simple and fast.

The following code example shows what a list of presets looks like and how to pass it to the player using the property customPresets:

// The custom presets:
const myCustomPresets = {
  '[my-own-preset-name-one]': {
    'bg-color': '#3b98ce',
    'color-text-playerbar': '#e54c1d',
    'font-band-name': 'Impact',
    'font-song-title': 'Impact',
    'color-slider': '#1a9322',
    'color-play-pause': '#1a2e93',
    'color-buttons': '#ccd822',
    'height-playlist': '160px',
    'on-off-playlist': 'on',
    'volume-start': '100',
    'color-playlist-text-inactive': '#e2e2e2',
    'color-playlist-text-active': '#353535',
    'color-playlist-bg-inactive': '#217f16',
    'color-playlist-bg-active': '#97ef8d',
    'shadow-player': 'on',
  },
  '[my-own-preset-name-two]': {
    // all attributes with value...
  },
  // more presets...
};

// The order is important!

// 1. Give the player the custom presets:
player.customPresets = myCustomPresets;
// 2. Set the attribute "preset" with your preferred preset name. Set it here, NOT in the HTML tag!
player.setAttribute('preset', '[my-own-preset-name-one]');
// 3. set the playlist datas (as the last one!)
player.playlist = myPlaylist;

</script>

Notice:
Set the preset attribute with the setAttribute() method in JavaScript - NOT in the frissbee-audio-player HTML tag.
The reason for this is that the player (the frissbee-audio-player HTML tag) is loaded first and the player does not know your custom preset name at this time, which is loaded later. So the custom preset must be set after the frissbee-audio-player HTML tag is loaded.

The order is important!

player.customPresets
player.setAttribute()
player.playlist

If you want to get the value of an attribute, then use the getAttribute() method.

Next step

Multiple players on one website