How To Use

Display the Audio Player

Here how you can Display the Audio Player,

Using ShortCode

1. From your admin dashboard, click on Add New Player under the HTML5 Audio Player menu.
2. Give the title of the player. (optional)
3. Upload an audio file.
4. Copy the shortcode. (you can also copy the shortcode after published)
5. Now publish/save the post.

Paste the shortcode in post, page, or text widget content. Save and view the content, you will see an audio player.

Using Gutenberg

1. Go to your Gutenberg Editor.
2. Insert HTML5 Audio Player block.
3. Upload an audio file.

Save and view the content, you will see an audio player.

Configure the Player

Here’s how you can Configure the player,

ShortCode

After adding audio in the shortcode. You will see there are 3 Player Types: Standard, Playlist, and Sticky.

We will talk about more details about all types in the next section.

Playlist

From your admin dashboard, go to Playlist under the HTML5 Audio Player menu. And click on Add Playlist button.

1. Enter a playlist name.
2. Click on Add New to add a audio details.
3. Enter all details about the audio (title, file, poster and artist).
4. You can add more audio files to the playlist
5. After adding all the audio publish the playlist.

Gutenberg

After adding the Gutenberg block. You will see the settings option in the right sidebar. There are three options, Settings, Controls, and Style.

We will talk about more details about Gutenberg in the next section.

ShortCode

Standard- Configure

When you create an audio from Html5 Audio Player > Add Audio Player, you will see the standard player type is selected by default.

From here, you can change various options for the audio such as sources, options, layout(width, alignment), player skin and many more. Lets talk one by one

Sources

By these settings you can upload/change the audio file and audio posters, also you can set the audio title.

Options

There are lots of options for the audio

1. Muted: Turn on if you want the video output should be muted.
2. Auto Play: Turn on if you want video will start playing as soon as it is ready. autoplay policy
3. Repeat: Two options are available. Once or Loop. You can choose according to your needs.
4. Disable Pause: Enable this option if you want user can’t pause the audio.
5. Seek Time: The time, in seconds, to seek when a user hits fast forward or rewind. The default value is 10 sec.
6. Preload: Specify how the video file should be loaded when the page loads.

Layout

For the layout, you can change the width, alignment, and border radius from here.

1. Player Width: Set the player width. Height will be calculated base on the value. Left 100% for Responsive player.
2. Alignment: To set the player in left, center or right.
3. Border radius: Defines the radius of the Player’s corners.

Player Skin

In standard player type, there are 4 different player skin: Default, Fusion, Stamp and Wave

Default

In default skin, you can show/hide the controls buttons. Such as Restart, Rewind, Play, Fast Forwards, Progressbar, Duration, Current Time, Mute Button, Volume Control, Setting Button, Download Button

Here’s a preview,

Fusion

In this skin, you can show/hide the download button.

Here’s a preview,

Stamp

For the stamp skin, you can set the text and control color.

Here’s a preview,

Wave

In wave skin, you can set the author name, text and control, and background color.

Here’s a preview,

ShortCode Playlist- Configure

At first, switch the player type to Playlist Player, then you can add or configure the playlist. You can create or select a playlist for the source, configure the playlist, and set different skin.

Create Playlist

By default the Create Playlist option is selected, just you have to click on Add New to add audio details. Enter all details about the audio (title, file, poster ,and artist). You can add more audio files to the playlist.

Select From Playlist

You can use pre-created playlist. To do that Click on Select from playlist, and select the audio.

Options

Set Initial volume, enable/disable Use forward/rewind button to change audio and show/hide Download by the options.

Layout

In layout, you can change player width and alignment.

Player Skin

In playlist player type, there are 2 different player skin: Narrow and Extensive

Narrow

In narrow skin, you can show/hide the control buttons. Such as Restart, Rewind, Play, Fast Forwards, Progressbar, Duration, Current Time, Mute Button, Volume Control, Setting Button,

Also, you can change the player theme, such as Light, Dark and Custom.

For a custom themes you can change brand color, background, item text color, item hover background, item hover text color, odd item background, even item background and border radius.

Here’s a preview

Extensive

For the extensive, you have to only change the player theme, such as .

You can also change the theme(Light, Dark ,and Custom) in extensive skin like narrow.

For a custom theme you can change brand color, item text color, item hover background, item hover text color.

Here’s a preview,

ShortCode Sticky- Configure

At first, switch the player type to Sticky Player. You can change various options for the audio such as sources, options, alignment,and player skin. Let’s talk one by one

Sources

By these settings you can upload/change the audio file and audio posters, also you can set the audio title.

Options

Enable/disable repeat, set Initial volume and show/hide Download Button by the options.

Alignment

From here you can change the alignment of the player.

Player Skin

In playlist player type, there are 2 different player skin: Simple and Fusion

Simple

In simple skin, you can change the background.

Here’s a preview,

Fusion

Here’s a preview,

Gutenberg

Single- Configure

At first go to your Gutenberg Editor and insert HTML5 Audio Player block like before.

Sidebar Settings

Select the block, you will see the settings option in the right sidebar. You can see there are 3 tab for the settings: Settings, Controls, and Style.

Settings

From the settings, at first, you can change the skin of the audio player, there are 3 skin available: Default, Fusion and Stamp.

Also, you can enable/disable Repeat, Autoplay, Muted and set Seek Time.

Default Skin

You can upload audio file or change the audio URL in default skin.

Fusion Skin

For the fusion skin, you can add audio title, upload audio file and poster.

Stamp Skin

In stamp skin, you can add audio title and upload audio file.

Controls

In controls you can show/hide the as Restart, Rewind, Play, Fast Forwards, Progress, Duration, Current Time, Mute, Volume, Setting, Download.

Note: controls are only for the default skin.

Style

You can change different style for different skin.

Style for default skin

For the default skin, you can change primary color, hover color, background color, width and border radius.

Style for fusion skin

For the fusion skin you can change width and border radius.

Style for stamp skin

For the stamp skin, you can change text color, width and border radius.

Gutenberg Playlist Narrow- Configure

In your Gutenberg editor, find the HTML5 Audio Playlist – Narrow block and insert, just like others block.

Settings/Configure

Select the block, you will see the settings option in the right sidebar. You can see there are 2 tabs for configure: Content and Settings.

Content

At first let you know that you can add or remove audios for playlist from the editor.

Select the and audio item and you can upload audio file change audio source, title and artist from content.

Settings

Switch to settings tab. From here you can show/hide download button, change player theme and set width of the player.

Gutenberg Playlist Extensive- Configure

In your Gutenberg editor, find the HTML5 Audio Playlist – Extensive block and insert, just like others block.

Settings/Configure

Select the block, you will see the settings option in the right sidebar. You can see there are 2 tab for configure: Content and Settings.

Content

At first you should know that you can add or remove audios for playlist from the editor.

Select the and audio item and you can upload audio file, poster change audio title and artist from content.

Settings

Switch to settings tab. From here you can change player theme and set width, height and poster height of the player.

Gutenberg Insert- Configure

Using this block you can display the player that created from Html5 Audio Player > Add Audio Player in dashboard.

In your Gutenberg editor, find the HTML5 Audio Player – Insert block and insert, just like others block.

Then select the player that you want to display.

Elementor – Configure

First, install the Elementor plugin to use Elementor widgets of HTML5 Audio Player. On Elementor editing page you will see there are 4 players from HTML5 Audio Player: Simple, Stamp, Fusion, and Playlist.

Simple Player

Insert Simple Player, you will see the settings in the left sidebar and preview in the center of the page. In the sidebar settings, upload Audio File, enter Title, enable/disable Muted, Repeat, Autoplay, and set Seek Time.

In the Controls panel, show/hide the controls such as Restart, Rewind, Play, Fast Forward, Progressbar, Current Time, Duration, Mute, Volume, Settings, and Download buttons.

Go to the Style tab. From here set the Width, Primary Color, and Secondary Color of the Simple Audio Player.

Stamp Player

If you want to show Stamp Player, select that from the widgets area. For the Stamp Player, upload Audio File, enter Title, enable/disable Muted, Repeat, Autoplay, and set Seek Time.

Go to the Style tab to set the Width and Primary Color of the Player.

Fusion Player

Add Fusion Player to show Fusion style. For Fusion Player upload Audio File, Image, enter Title, enable/disable Muted, Repeat, Autoplay, show/hide Download Button and set Width, Seek Time.

Playlist

Add the Playlist Player to play a playlist. Change Skin(Narrow, Extensive) and Theme(Dark, Light, Custom). Add a Playlist item, for each item upload Audio File, and Poster Image, and enter the Title, Artist.

Go to the Style tab. Set the Width, Height, and Poster Height of the Playlist Player. Height and Poster Height are only available for Extensive skin.

Select Narrow skin, in this skin show/hide Download Button.

For Custom Theme style, select Custom Theme and go to the Style tab. You will see the color options for the custom theme. You can set Brand, Background, Item Text, Item Hover/Active Background, Item Hover/Active Text, Odd Item Background, and Even Item Background color.