Audio Widget

Use the Audio Widget to easily embed audio on your page.
Please note that different browsers support different audio formats. Please find a table below to see what file format is supported by this or that browser.

Content

Audio

Source: Select the source of the audio. Choose between Soundcloud, Mixcloud,Deezer, Spotify and Self Hosted

Link: Enter the URL of the audio (Dynamic tags can be used also)

Visual player: Slide to YES to display the visual player.
The option is available for Soundcloud and Spotify.

Soundcloud

Username: Slide to SHOW to display username.

Play counts: Slide to SHOW to display counts.

Like button: Slide to SHOW to display Like button.

Share button: Slide to SHOW to display Share button.

Comments: Slide to SHOW to display comments.

Buy button: Slide to SHOW to display Buy button.

Download button: Slide to SHOW to display Download button.

Controls color: Set color via color palette or dynamic tags.

Height: Set playlist’s height for desktop, tablet and mobile.

Mixcloud

Cover: Choose ON to enable cover.
Additional options are available if the Cover is enabled.

Artwork: Slide to YES to show the artwork.

Skin: Choose between DARK and LIGHT skins.

Mini: Slide to YES to minify the widget.

Tracklist: Slide to YES to show a tracklist. This option is available if the Mini is enabled.

Deezer

Format: Choose between Classic and Square formats.
When Square format is enabled you can also set a height for desktop, tablet and mobile, align and color.

Skin: Choose between DARK and LIGHT skins.

Playlist: Slide to YES to show a playlist.
When the Playlist option is enabled you can set playlists’ height for desktop, tablet and mobile.

Color: Set color via color palette or dynamic tags.

Spotify

Height: Set playlist’s height for desktop, tablet and mobile.

Self Hosted

Upload a file or choose External URL and add Additional info if needed.

Separator: Slide to YES to show a Separator.

Container

Background Type: Choose between Classic and Gradient types.

Color: Set color via color palette or dynamic tags.

Image: Set image for desktop, tablet and mobile.

CSS Filters: Use filters to set Blur, Brightness, Contrast, Saturation and Hue.

Blend mode: Choose desired mode from the dropdown.

Background color overlay: Set color via color palette or dynamic tags.

Border: Choose Border Type from the dropdown and set it.

Separator:

Width: Set desired separator’s width.

Color: Set separator’s color via color palette or dynamic tags.

Control Buttons

Volume: Slide to YES to show a Volume button.

Size: Set desired control buttons’ Size for desktop, tablet and mobile.

Play Size: Set desired Size of a Play icon for desktop, tablet and mobile.

Horizontal Gap Between: Set desired Horizontal Gap between elements.

Vertical Gap: Set desired Vertical Gap.

Set Color and Shadow for Normal and Hover displaying.

Progress Container

Progress:

External Background Color: Set color via color palette or dynamic tags.

Inner Background Color: Choose between Classic and Gradient types.

Border: Choose Border Type from the dropdown and set it.

Height: Set the Height for desktop, tablet and mobile.

Box Shadow: Choose desired settings from the dropdown.

Current and Total Time:

Show: Slide to YES to show Current and Total Time.
Additional options are available if Current and Total Time setting is enabled.

Color: Set color via color palette or dynamic tags.

Size: Set the Size for desktop, tablet and mobile.

Additional Info

Align: Choose Left, Center or Right alignment.

Typography: Set Typography using settings from the dropdown.

Gap: Set desired Gap between Container and Additional info.

Advanced

Set the Advanced options that are applicable to this widget