Html5 Audio Player Docs

  1. Home
  2. Docs
  3. Html5 Audio Player Docs
  4. Guides
  5. Gutenberg

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.

HTML5 Audio Player- Gutenberg Single Sidebar Settings
HTML5 Audio Player- Gutenberg Single Sidebar Settings

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.

HTML5 Audio Player- Gutenberg Single Settings
HTML5 Audio Player- Gutenberg Single Settings

Default Skin

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

HTML5 Audio Player- Gutenberg Single Skin Default
HTML5 Audio Player- Gutenberg Single Skin Default

Fusion Skin

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

HTML5 Audio Player- Gutenberg Single Skin Fusion
HTML5 Audio Player- Gutenberg Single Skin Fusion

Stamp Skin

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

HTML5 Audio Player- Gutenberg Single Skin Stamp
HTML5 Audio Player- Gutenberg Single Skin Stamp

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.

HTML5 Audio Player- Gutenberg Single Controls
HTML5 Audio Player- Gutenberg Single Controls

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.

HTML5 Audio Player- Gutenberg Single Style Default
HTML5 Audio Player- Gutenberg Single Style Default

Style for fusion skin

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

HTML5 Audio Player- Gutenberg Single Style Fusion
HTML5 Audio Player- Gutenberg Single Style Fusion

Style for stamp skin

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

HTML5 Audio Player- Gutenberg Single Style Stump
HTML5 Audio Player- Gutenberg Single Style Stump

Gutenberg Playlist Narrow- Configure

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

HTML5 Audio Player- Gutenberg Playlist Narrow Add Block
HTML5 Audio Player- Gutenberg Playlist Narrow Add 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.

HTML5 Audio Player- Gutenberg Playlist Narrow Sidebar
HTML5 Audio Player- Gutenberg Playlist Narrow Sidebar

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.

HTML5 Audio Player- Gutenberg Playlist Narrow Content
HTML5 Audio Player- Gutenberg Playlist Narrow Content

Settings

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

HTML5 Audio Player- Gutenberg Playlist Narrow Settings
HTML5 Audio Player- Gutenberg Playlist Narrow Settings

Gutenberg Playlist Extensive- Configure

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

HTML5 Audio Player- Gutenberg Playlist Extensive Add Block
HTML5 Audio Player- Gutenberg Playlist Extensive Add 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.

HTML5 Audio Player- Gutenberg Playlist Extensive Sidebar
HTML5 Audio Player- Gutenberg Playlist Extensive Sidebar

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.

HTML5 Audio Player- Gutenberg Playlist Extensive Content
HTML5 Audio Player- Gutenberg Playlist Extensive Content

Settings

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

HTML5 Audio Player- Gutenberg Playlist Extensive Settings
HTML5 Audio Player- Gutenberg Playlist Extensive Settings

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.

HTML5 Audio Player- Gutenberg Insert Add Block
HTML5 Audio Player- Gutenberg Insert Add Block

Then select the player that you want to display.

HTML5 Audio Player- Gutenberg Insert Select Player
HTML5 Audio Player- Gutenberg Insert Select Player
Tags:
Was this article helpful to you?

How can we help?