Audio Player

Audio Player

Let your visitors play a song or a podcast on your website using the Audio Player block. You can showcase a single song from your collection or a complete playlist. This block can be widely used on Music Streaming, DJ, Events, and Podcast websites.

Pro tip
Try doing something different with the Audio Player. We have an idea. Why not ask your clients to share an audio testimony about your products or services? And, then add these audio testimonials to your website by creating a playlist. A good way to build trust and boost sales? Isn’t it?

How to use the Audio Player Block of The Plus Addons For Gutenberg

The Audio Player block comes with 9 different styles and a plethora of customization options using which you can create stylish looking players for your websites.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Audio Player into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Audio Player after “/” sign, eg.“/Audio Player”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Audio Player

Styles

Select your preferred Audio Player style from the dropdown. We have provided 9 different styles to choose from. Keep switching the styles to see the different design layouts and settle on one.

Playlist

By default, there will be one sample playlist created for you. You can either add a new one or duplicate the existing one and start adding your content. Use the Add Item button to add a new playlist. Click the + icon on the playlist to duplicate it.

Song Title

Add the title of your song here.

Song Author

Add the author/singer of your song here.

Source

Set how are you going to upload your media files(songs). You get two options to select from.

Self Hosted
Upload the media files on your own server (i.e. uploading to your WordPress Media Library).  After you select the Self Hosted option, you will see the File Upload option. Click on it to add all your songs.

External
Add an external URL to your hosted song or playlist such as Soundcloud. You will see an option to add a custom URL after you select the External option.

URL

Add Audio files by URL, by entering the URL here.

Image

Set your playlist image here by clicking the + icon.

Common Setting

Image Size

Set your preferred image size from the dropdown. You can also add custom dimensions for your image.

Split Text

Add a split text between Song Title and the Song Author. For eg: Girls Like Your by Maroon5

Max Width

Set the max-width of your Audio Player block. Click the small desktop icon to set different widths for Desktop, Tablet, and Mobile.

Default Volume

Set a default volume for your Audio Player block by using the slider.

2. Style

The Style tab is used for customizing the appearance of all the Audio Player block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Song Title

Typography

Assign a size, weight, spacing and much more to fonts.

Title Color

A color picker to assign a suitable color to the title text.

Song Author

Typography

Assign a size, weight, spacing and much more to fonts.

Author Color

A color picker to assign a suitable color to the author’s text.

Split Text

Typography

Assign a size, weight, spacing and much more to fonts.

Split Text Color

A color picker to assign a suitable color to the split text.

Control

Icon Color

A color picker to assign a suitable color to the control buttons.

Icon Size

Set the size of the control buttons here.

Play / Pause Icon Color

A color picker to assign a suitable color to the Play / Pause icon.

Play / Pause Icon Size

Set the size of Play / Pause icons.

Background Size

Set the size of the Play / Pause background.

Background Color

Set the background color of the Play / Pause background.

Border Radius

Set the border radius of control buttons here.

Border Type

Set the border of Play/Pause Icons. Choose any one border type from the dropdown. Add color and width to it.

Border Radius

Set the border radius of Play/Pause Icons.

Responsive Options for every section can be found by clicking the small desktop icon. Click it to set options for Tablets and Mobiles.

Playlist Icon Color

A color picker to assign a suitable color to the playlist icon.

Playlist Icon Size

Set the size of the Playlist icon.

Volume Size

Set the size of the volume button.

Volume Icon Color

A color picker to assign a suitable color to the volume icon.

Volume Slider Range Color

A color picker to assign a suitable color to the filled volume slider.

Volume Slider Background

A color picker to assign a suitable background color to the volume slider.

Box Shadow

Give Box/Text/Drop shadow effect and color to a Volume slider.

Tracker

Tracker Width

Set width of the tracker from here.

Dot Color

A color picker to assign a suitable dot color to the tracker.

Track Color

A color picker to assign a suitable track color to the tracker.

Track Fill Color

A color picker to assign a suitable filled track color to the tracker.

Playlist

Padding

Put in some inner space to the playlist.

Inner Margin

Put in some inner margin to the playlist.

Outer Margin

Put in some outer margin to the playlist.

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the playlist, selection for on Hover is also provided.

Top Offset

Put some top space in the playlist.

Active

Color

A color picker to assign a suitable color to the playlist played song.

Background

A color picker to assign a suitable background to the playlist played song.

Top Offset

Put some top space in the playlist played song.

Background

Apply suitable background like color/ gradient to the playlist played song.

Border

Draw a border around the played song and give width and color to it.

Border Radius

Set the radius curve of the played song panel’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the played song.

Playlist

Background

Apply suitable background like color/ gradient to the player.

Border

Draw a border around the player and give width and color to it.

Border Radius

Set the radius curve of the player panel’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the player.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.