How To Use The Audio Player Widget By Atomic Addons

The Audio Player widget by Atomic Addons adds a compact player for one audio track: a play button, a seek bar with the track's title, the time played and left, and volume controls. It plays an MP3 from your Media Library or from another address, such as a podcast file or an internet radio stream, and can be pinned to the bottom of the screen. This guide covers adding the widget, choosing the audio and setting up the player.

Enable the Audio Player Widget

Audio Player is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro (see Audio and Additional). Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Audio Player. You can also open the Creative category.

4. 4

   Turn the Audio Player widget on.

5. 5

   Click Save Settings.

Add the Audio Player Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Audio Player. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Audio

Open the widget and go to Content → Audio. Settings marked with a Pro badge need Atomic Addons Pro; with the free plugin they stay at their defaults.

1. 1

   Source Type: Local Audio (the default) plays a file from your Media Library. Remote Audio plays a file or stream from another address. Pro badge.

2. 2

   Local Audio: With Local Audio: click the field to pick or upload an audio file. A short sample track is filled in at first.

3. 3

   Remote URL: With Remote Audio: the address of the audio, such as https://example.com/music.mp3. For a SHOUTcast-style radio stream, add ;stream/1 to the end of the address, as in http://cast.example.com:9942/;stream/1.

4. 4

   Audio Title: Where the title shows: Tooltip (the default) shows it when a visitor points at the seek bar, Inline prints it above the seek bar, and None hides it. It needs the seek bar.

5. 5

   Title: The track's name, “Audio Title” by default. Screen readers also read it with the play and pause buttons.

6. 6

   Player Width: The player's maximum width, in px or %, per screen size. Empty by default, so it fills the column.

7. 7

   Alignment: With a Player Width narrower than the column: left (the default), center or right.

8. 8

   Fixed Player: Pins the player to the bottom of the browser window, so the audio keeps its controls in view while visitors scroll. Off by default.

Additional

Content → Additional picks the player's parts and how it plays:

1. 1

   Seek Bar: The bar that shows the progress and lets visitors jump to a point in the track. On by default. Pro badge.

2. 2

   Time/Duration(s): Both (the default) shows the time played before the seek bar and the time left after it. Time or Duration shows only one, None neither. Visitors can click the time left to switch it to the track's full length. Pro badge.

3. 3

   Restrict Time: Stops the track after a set number of seconds, for example to play a preview. Off by default.

4. 4

   Restrict Duration(s): With Restrict Time on: the seconds to play before the player stops, 10 by default (0 to 200).

5. 5

   Volume Mute/Unmute: A speaker button that mutes and unmutes. On by default.

6. 6

   Volume Bar: A bar for setting the volume. On by default.

7. 7

   Keyboard Enable: On by default: after a visitor has used the player, keys control it: P plays and pauses, M mutes, the period and comma keys (> and <) raise and lower the volume, and L turns looping on and off.

8. 8

   Auto Play: Starts playing when the page loads. Most browsers block sound that starts before the visitor interacts with the page, so don't rely on it. Pro badge.

9. 9

   Loop: Plays the track again from the start when it ends. Pro badge.

10. 10

    Default Volume: The volume the player starts at, from 0 to 1. 0.8 by default.

The time left and the volume bar show only on screens 960px and wider. When a page has several players, starting one pauses the others.

Style the Audio Player

Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.

• Audio Player — the player box: background, border, radius, padding, margin and shadow.
• Play/Pause Button — the icon color, background, border, radius, shadow and size in a Normal tab, and the colors and shadow in a Hover tab.
• Time/Duration — the times' color and typography.
• Seek Bar — the Bar Height, the Bar Color, the Active Color of the played part and the radius.
• Audio Title — with the Inline title: its color, alignment and typography.
• Volume Button and Volume Bar — the mute button styled like the play button, and the volume bar's height, Bar Color and Active Color.