Music Player for Elementor – Radio, Audio Player, and Podcast Player Documentation

Layout

In the layout tab, we can change our music player or radio to be horizontal or vertical, with sidebar or topbar by selection direction field (row or column). Max height of the whole container of the audio player can be selected or leave empty. In the same way Min/Max height of the topbar/sidebar and max height of the playlist section are editable. After choosing the direction, we can set the proportion of each section, sidebar/topbar and main. We enter integer numbers as the spacing weights. These values will be set as CSS flex values. For example, a sidebar with 1 and main section with 2 values will result columns of 33.33% and 66.66%.

Options

With options, we are able to choose behavior and hide/show parts of our WordPress music player or radio. These options and the following style tab allow us to design our music player or radio to reach a designed layout such as Figma layout very easily. Our music/audio/podcast/radio player has three sections:

• Sidebar/topbar, including current playing track post content or meta or custom entered content
• Playlist, list of the tracks to be played
• Player, including play, next, etc. buttons and other controllers like volume

Player

In this section, we have several options. By turning on ‘Disallow user playlist control’, we disallow users to change playing tracks or select playing cursor. This option is useful when we want to create radio. We can also add shuffle or loop button to our player.

Our player starts playing from the first track. Sometimes we need to set a fixed starting timing point based on a selected date time value, especially when we need a radio, so we can turn off ‘Always start with the first track’ then choose a reference time zone, like UTC, and the date/time of playback start with and offset of ‘Start Time Offset’ in seconds. Now, our player has started at the selected timing point, it has played the first track on the resulted time. As a result, our player always synchronizes current playing based on the selected time.

There are other options allowing us to hide/show duration time, the playing section (in the player section), time slider, next button, prev button, volume control. Besides, we can move the location of the time slider to the top of the player and in some cases, when we hide the playlist, turn of ‘Full Height’ to make our player section fill all of the space of the main column.

When we hide time slider or move it to the top of the player, we will have some empty spaces, so there are two options to align the controller parts of the player. ‘Symmetric Controllers’ and ‘Centered Controllers’ allow us to align the three or two parts, playing section, buttons, and volume, to be centered or symmetrically allocate, respectably.

Sidebar/Topbar

By default, sidebar or topbar include the cover image and post content of the playing track. Also, we can enter custom content to be shown in the section. By turning off ‘Show sidebar/hide’ we can hide this section, and we can hide or show track image (cover), which is the track post’s feature image and track post content, by turning on or off ‘Show track image in the sidebar/topbar and ‘Show track post content in sidebar/topbar. By turning off the two mentioned switch, we can select custom fixed content and entered it in an HTML editor to be shown in the section, content like advertisements or buying tracks.

Playlist

On the top of the player section, we have a list of tracks as a playlist in the main section. We can show/hide this part by turning off or on ‘Show playlist’. The cover of playing track can be shown as a thumbnail before the tracks name. Also, we can add the artist’s name after the name of each track. By default, the feature image, cover, of the current playing track is shown as the background of our playlist. We can turn off (Show), ‘Show an image under playlist’ to select our selected image to be under the playlist.

Style

In this tab, we can style our music player or radio. Each part of the three sections can be fully customized, icons, background, typography, etc.

Playlist

Playlist tab includes the style of background and details style of each track of our playlist in the status of playing, mouse hover, and normal. The main background color of our audio player can be selected here as an image, gradient colors or a single color. An image, custom image or the cover of the playing track, is the background image of the playlist. We can style this background, change position, size, and opacity of it.

Each track of our playlist has three statuses, normal, hover, and active (playing). We can choose text color, spaces, the style of the thumbnail cover, typography, filters, border, border radius, opacity, and show for each track in each status.

Sidebar (or Topbar)

In this tab, we can choose background and style the image and content of the sidebar or topbar. Text color, typography, margin and padding can be customized.

Player Section

Here, we can select a single color, gradient colors, or an image for the background of our player. Border and border radius can be selected. Also padding and margin of the player box can be customized, as well as text color and typography.

We have time slider which allow us to select a point of current playing track to play from that point or watch the progress of playing and amount of downloaded part of the playing track. The background and border radius of this slider can be change for each part of total, loaded, and current. Volume bar also has a slider to arrange the volume. The background and border radius of this part can be selected for total and current part.

Player Buttons

There several buttons in the player which allow us to control the player. These buttons include play, pause, prev, next, volume, mute, loop, and repeat. For each button, we can select a custom icon in spite of the default icon and style it by changing background, color, font size, border, border radius, padding, margin, shadow, filters, and transition. Moreover, we can different status for each button, so for each status we can style separately. Play, pause, prev, next, volume, and mute have two statuses of normal and hover, and loop and repeat have three statuses of normal, hover, and active. The separate style options of these statuses allow us to fully-customized the player controllers buttons very effectively.