Styling

VP Audio Player provides a skin configuration object that controls colors, backgrounds, borders, the logo, the seek slider, button visibility, and button colors. All styling is configured under config.skin.

Background

The background object controls the background of the player. You can use a solid color, a gradient between two colors, or the audio's thumbnail (optionally blurred).

vpAudioPlayer("audio-background").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            background: {
                useThumbnail: false,
                blur: false,
                url: "",
                primaryColor: "#011030",
                secondaryColor: "#DF0028",
                gradient: false,
                gradientDirection: "H",
            },
        },
    }
});

PROPERTY	DESCRIPTION
background Object	Configures the player's background.
useThumbnail boolean	When true, the audio thumbnail is used as the background.
blur boolean	When true and useThumbnail is true, the thumbnail background is blurred.
url string	An explicit background image URL. Overrides useThumbnail when set.
primaryColor string	The primary background color. Used as the solid background or as the start color of the gradient.
secondaryColor string	The secondary background color. Used as the end color of the gradient when gradient is true.
gradient boolean	When true, the background is a gradient between primaryColor and secondaryColor.
gradientDirection string	The gradient direction. Possible values: "H" (horizontal) or "V" (vertical).

Border

The border object configures the border around the player container.

vpAudioPlayer("audio-border").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            border: {
                width: 0,
                radius: 12,
                color: "",
            },
        },
    }
});

PROPERTY	DESCRIPTION
border Object	Configures the player's border.
width number	Border width in pixels.
radius number	Border radius in pixels.
color string	Border color. Accepts any CSS color value.

Component Colors

The componentColors object defines the brand colors used by the player UI.

vpAudioPlayer("audio-components").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            componentColors: {
                primaryColor: "#FFFFFF",
                secondaryColor: "#DF0028",
            },
        },
    }
});

PROPERTY	DESCRIPTION
componentColors Object	Configures the primary and secondary brand colors used by UI elements.
primaryColor string	The primary brand color used by foreground UI elements.
secondaryColor string	The secondary brand color used by accent UI elements.

Logo

The logo object lets you display a clickable logo inside the player.

vpAudioPlayer("audio-logo").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            logo: {
                state: false,
                file: "the_logo_file_path",
                onClickURL: "the_url_when_clicked",
            },
        },
    }
});

PROPERTY	DESCRIPTION
logo Object	Configures the logo displayed inside the player.
state boolean	Enables the logo when true.
file string	URL of the logo image (PNG or SVG recommended).
onClickURL string	URL to open when the user clicks the logo. The logo is not clickable when this is empty.

Slider

The slider object configures the colors of the seek bar.

vpAudioPlayer("audio-slider").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            slider: {
                rail: "#9B9FAB",
                progress: "#FFFFFF",
                dragger: "#FFFFFF",
            },
        },
    }
});

PROPERTY	DESCRIPTION
slider Object	Configures the seek slider colors.
rail string	Color of the unplayed portion of the seek bar.
progress string	Color of the played portion of the seek bar.
dragger string	Color of the seek bar handle.

Text

The text object lets you override the color of the title, author, and default text.

vpAudioPlayer("audio-text").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            text: {
                title: "",
                author: "",
                default: "",
            },
        },
    }
});

PROPERTY	DESCRIPTION
text Object	Configures the text colors used inside the player.
title string	Color of the audio title text.
author string	Color of the audio author text.
default string	Default color used for other text inside the player.

Menus

The menus object controls the appearance of toggle controls inside the settings menu.

vpAudioPlayer("audio-menus").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            menus: {
                toggle: {
                    default: "#FFFFFF",
                    off: "#CACACA",
                    on: "#206ED5",
                },
            },
        },
    }
});

PROPERTY	DESCRIPTION
menus Object	Configures the menu UI styling.
toggle Object	Configures the colors of toggle controls (such as the autoplay toggle).
default string	The default color of the toggle.
off string	The color of the toggle when its state is off.
on string	The color of the toggle when its state is on.

Buttons

The buttons object controls both the visibility and color of each player button. Setting state: false on a button removes it from the control bar.

vpAudioPlayer("audio-buttons").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        skin: {
            buttons: {
                backgroundColor: "",
                color: "",
                playbackButton: { color: "" },
                volumeButton: { state: true, color: "" },
                skipButtons: { state: true, color: "" },
                settingsButton: { state: true, color: "" },
                nextBackButtons: { state: true, color: "" },
                playlistButton: { state: true, color: "" },
                collapseButton: { state: true, color: "" },
            },
        },
    }
});

PROPERTY	DESCRIPTION
buttons Object	Configures visibility and colors of player buttons.
backgroundColor string	Background color applied to all player buttons.
color string	Default icon color applied to all player buttons.
playbackButton Object	Configures the play/pause button color.
volumeButton Object	Configures the volume button. state toggles visibility; color overrides the icon color.
skipButtons Object	Configures the skip-forward and skip-back buttons. state toggles visibility; color overrides the icon color.
settingsButton Object	Configures the settings button. state toggles visibility; color overrides the icon color.
nextBackButtons Object	Configures the next and previous audio buttons (for playlists). state toggles visibility; color overrides the icon color.
playlistButton Object	Configures the playlist button. state toggles visibility; color overrides the icon color.
collapseButton Object	Configures the collapse button used to switch between default and alternate grid layouts. state toggles visibility; color overrides the icon color.

Theme

A higher-level config.theme property lets you switch to a packaged theme without configuring the individual skin properties.

vpAudioPlayer("audio-theme").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        theme: "minimal",
    }
});

PROPERTY	DESCRIPTION
theme string	The packaged theme to apply. Leave empty for the default theme, or set to "minimal" for the minimal theme.

Font

The font object controls the font used by the player UI. The player also respects a window.vpAudioPlayerFont global if you want to inherit the page's font.

vpAudioPlayer("audio-font").setup({
    audio: {
        file: "the_audio_file_path"
    },
    config: {
        font: {
            family: "Roboto",
            url: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap",
        },
    }
});

PROPERTY	DESCRIPTION
font Object	Configures the player UI font.
family string	The font family name applied to the player.
url string	URL of the stylesheet that defines the font face. Loaded once per page.