Html5 Audio Player Docs

  1. Home
  2. Docs
  3. Html5 Audio Player Docs
  4. Guides
  5. Elementor – Configure

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.

HTML5 Audio Player- Elementor Players
HTML5 Audio Player- Elementor Players

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.

HTML5 Audio Player- Elementor Simple Player Settings
HTML5 Audio Player- Elementor Simple Player Settings

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.

HTML5 Audio Player- Elementor Simple Player Controls
HTML5 Audio Player- Elementor Simple Player Controls

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

HTML5 Audio Player- Elementor Simple Player Styles
HTML5 Audio Player- Elementor Simple Player Styles

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.

HTML5 Audio Player- Elementor Stamp Player Settings
HTML5 Audio Player- Elementor Stamp Player Settings

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

HTML5 Audio Player- Elementor Stamp Player Styles
HTML5 Audio Player- Elementor Stamp Player Styles

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.

HTML5 Audio Player- Elementor Fusion Player
HTML5 Audio Player- Elementor Fusion Player

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.

HTML5 Audio Player- Elementor Playlist Player Settings
HTML5 Audio Player- Elementor Playlist Player Settings

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.

HTML5 Audio Player- Elementor Playlist Player Styles
HTML5 Audio Player- Elementor Playlist Player Styles

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

HTML5 Audio Player- Elementor Playlist Player Narrow Skin
HTML5 Audio Player- Elementor Playlist Player Narrow Skin

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.

HTML5 Audio Player- Elementor Playlist Player Custom Theme Styles
HTML5 Audio Player- Elementor Playlist Player Custom Theme Styles
Was this article helpful to you?

How can we help?