Overview of the Audio Player module

This page shows you how to add the Audio Player module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Audio Player module plays an audio file in a styled player with a title, artist name and cover image. For more details, view the demo.

How to add the Audio Player module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Audio Player in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Content

• Title: Enter the title for the audio player.
• Artist: Input the audio artist name.

Audio

• Audio File: Upload an audio file or enter a URL.

Image

• Image: Upload an image to display at the side of audio player.
• Image Alt Text: Input the text to be used for the image as HTML ALT text.

Player Settings

• Layout: Select the layout for your player.
• Show Seek Bar: Whether or not to show the seek bar.
• Show Current Time: Whether or not to show the current time.
• Show Duration: Whether or not to show the duration.
• Show Volume Mute/Unmute: Whether or not to show the volume mute/unmute.
• Show Volume Bar: Whether or not to show the volume bar.

Design tab settings

The Design tab lets you style each part of the module:

• Player: styling options for the player.
• Title: styling options for the title.
• Artist: styling options for the artist.
• Play/Pause Button: styling options for the play/pause button.
• Current Time: styling options for the current time.
• Duration: styling options for the duration.
• Seek Bar: styling options for the seek bar.
• Volume Button: styling options for the volume button.
• Volume Bar: styling options for the volume bar.
• Sizing, Spacing, Border, Box Shadow, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.