Audio player shortcode

Displays a toggle element to your web page. Frontend builder allows you to fully customize your toggle element by changing the layout, color, size, and shape of the item, in order to better incorporate it into your design.

Examples of the audio shortcode usage

We tried to cover all the basic and
advanced uses for the audio shortcode

An example of audio shortcode default style and color palette.

00:00

A couple of examples of audio shortcode styles, colors, and sizes.

00:00
00:00
00:00

The Division Bell

by Pink Floyd

00:00

Furtive Felicity

LABYRINTHINE INCIPIENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Basic settings for audio shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Source .mp3

Here you can link to a .mp3 audio file you wish to play.

Background and progress bar color

You can define a custom color of the background using the color picker, or set the hex code manually.

Starting time

This option allows you to set a starting time from which your audio file starts playing on default.

Mute

Sets the volume of the player to zero for it's default state.

Source .ogg

Here you can link to a .ogg audio file you wish to play.

Icon style

You can choose between five different control icon styles: default, light, dark, transparent light, and transparent light.

Autoplay and loop

Instructs the player to play automatically when the page loads, or repeat the audio file when it ends.

Hide controls

Makes the player invisible to the user.

Advanced settings for audio shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group