1. Home
  2. Docs
  3. Dynamic Contents
  4. Audio Player

Audio Player EA Element

With EA Audio Player, you can embed your audio file within your website. Possessing a huge set of style settings, the widget provides an easy way of embedding audio files, both from the local media library as well as from remote URL to the Elementor-built pages in an attractive form. Here in this tutorial, you’re going to learn how to use the Audio Player element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Audio Player Element

 

»Content

 

Audio

⇒Source Type: Select the source type either local audio or remote audio. If you select the remote audio, then add the source link.

⇒Local Audio: If you select the source type as local, then insert the audio file from the media library here.

⇒Audio Title: Set the audio title type either as a tooltip or inline text. You can leave it as none too.

⇒Title: Type your audio title text here.

⇒Player Width: Customize the audio player width manually for different dimensions.

⇒Alignment: Customize the audio player alignment for different dimensions.

⇒Fixed Player: Enable/disable the fixed audio player.

Additional

⇒Seek Bar: Show/hide the seek bar in the audio player.

⇒Time/Duration: Set the time/duration on the player either as only time or only duration. You can select both at the same time or leave it as none.

⇒Restrict Time: Enable/disable the restrict time. After some second player will stop.

⇒Volume Mute/Unmute: Enable/disable the volume mute/unmute button.

⇒Volume Bar: Show/hide the volume bar on the player.

⇒Smoothly Enter: Enable/disable the smoothly enter.

⇒Keyboard Enable: Enable/disable the keyboard function on the audio player. For example: when you press p=Play, m=Mute, >=Volume + <=Volume -, l=Loop etc

⇒Autoplay: Enable/disable the autoplay of the music on the audio player. (Note: Some latest browser does not support this feature for not annoying users.)

⇒Loop: Enable/disable loop on the music. If you set yes so your music will automatically repeat again and again.

⇒Default Volume: Enter a default volume level.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

Play/Pause Button

⇒Icon Color: Add a custom color to the play/pause icon for both normal and hover mode.

⇒Background: Add a custom background color to the play/pause icon for both normal and hover mode.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the play/pause button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the play/pause button.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the play/pause button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Size: Customize the play/pause button size for different dimensions.

 

Time/Duration

⇒Text Color: Add a custom color to the time/duration text on the player.

⇒Typography: Set the typography options for the time/duration text.

Seek Bar

⇒Bar Height: Customize the seek bar height manually.

⇒Bar Color: Add a custom color to the seek bar in the audio player.

⇒Active Color: Add a custom color to the seek bar which is active and playing.

⇒Border Radius: Set the border-radius around the seek bar for different dimensions.

 

Volume Button

⇒Icon Color: Add a custom color to the volume button for both normal and hover mode.

⇒Background: Add a custom background color to the volume button for both normal and hover mode.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the volume button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the volume button.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the volume button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Size: Customize the volume button size for different dimensions.

 

Volume Bar

⇒Bar Height: Customize the volume bar height manually.

⇒Bar Color: Add a custom color to the volume bar in the audio player.

⇒Active Color: Add a custom color to the volume bar in active mode.

⇒Border Radius: Set the border-radius around the volume bar for different dimensions.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Audio Player Element.


Was this article helpful to you? Yes No

How can we help?