ElementsKit is a complete Elementor addon that comes with nearly all types of features for WordPress websites that includes the Elementor Audio Player widget.

Using the Audio player widget, you can embed music on your website with a user-friendly audio player control. The widget includes a couple of options to upload audio, plenty of audio and control options, and more.

Features of Audio Player Widget: #

• Upload audio via WordPress media library.
• Embed audio using URL.
• Audio options, including autoplay, loop, and mute.
• Play and pause control.
• Volume control.
• Progress bar control.
• Show playtime and total duration.
• Customize appearance of the audio player.

Step 1: Enable Audio Player Widget #

Firstly, you need to enable the widget from WordPress dashboard. To enable the Audio Player widget:

1. Navigate to ElementsKit > Widgets.
2. Find the Audio Player from the list and enable the widget.
3. Click on the SAVE CHANGES.

Step 2: Drag and Drop the widget #

After that, drag and drop the ElementsKit Audio Player widget into the Elementor editor.

Step 3: Configure Elementor Audio Player Widget #

Under the Content tab, you can upload the audio and configure the Audio Options and Control Options of the audio player. You can use the following options to configure WordPress audio player in Elementor.

3.1 Source #

You can either upload the audio file or use an URL to add audio to the player. There are two options available for the audio source.

Source – Self-Hosted: #

When you choose Self Hosted as the audio source, you can upload an audio file from your WordPress media library.

Choose “Self Hosted” as the source > Click on the upload button > add an audio file from the media library.

Source – External: #

By choosing the External source, you can embed audio from the internet with its URL.

Choose “External” as source > enter audio URL in the required field.

3.2 Audio Options #

Here are the audio options available with the Audio Player widget:

1. Autoplay: Enable the autoplay, so that the audio will automatically be played when the page loads.
2. Loop: Enable this option to play the audio on a loop.
3. Mute: When enabled, audio is initially muted when the player starts. Users have to unmute the audio manually.

3.3 Control Options #

Here are the control options available with the Audio Player widget:

1. Play Pause: Enables the play/pause control (button) for the users.
2. Progress Bar: To show the audio progress bar on the player.
3. Current Time: This shows the current playing time on the Elementor audio player.
4. Total Duration: This shows the total duration of the audio.
5. Volume Bar: To show and control the audio volume level.
6. Hide Volume On Touch Devices:
7. Volume Slider Layout: There are two layouts available for the volume bar: Horizontal and Vertical.
8. Start Volume: Set the initial volume level when the player starts.

Step 4: Customize Elementor Audio Player Styles #

You can customize the Play Pause button, Progress bar, Time, and Volume styles on the Elementor Audio Player widget.

4.1 Play Pause Button #

To customize the Play Pause button,

1. Adjust the Size of the button.
2. Choose the button Color, Background Color, Box Shadow, and Border Type for the button.
3. Set the Border Radius, Padding, and Margin.

4.2 Progress Bar #

To customize the Progress Bar,

1. You can adjust the Height of the progress bar.
2. Choose the Background Color of the progress bar.
3. Set the Border Type, Border Width, and Border Color.
4. Adjust the Border Radius of the progress bar.

5. Loaded Progress Bar: You can choose the Background color for the Loaded Progress Bar.
6. Current Progress Bar: Set the Background color and Border Radius for the current progress bar.
7. Time Hover: Select Background Color for time hover.

4.3 Time #

To customize the Time styles of the Elementor audio player,

1. Set the Typography for the text digits.
2. Choose a Color and adjust Margin for the Current Time.
3. Choose a Color and adjust Margin for the Duration TIme.

4.4 Volume #

To customize the Volume button styles,

1. You can adjust the Height of the volume button.
2. Choose the Background Color of the volume button.
3. Set the Border Type, Border Width, and Border Color.

4. Volume Bar: Adjust the height, width, color, and border styles for the volume bar.
5. Current Volume Bar: Set the color and border radius for the current volume bar.

Finally, you can use the audio player on your website with all the useful features. The Elementor Audio Player widget comes with ElementKits Pro. Get the plugin to add audio and music to your WordPress site in the easiest way.