Audio Player Widget

The Audio Player Widget from RTMKit allows you to add a stylish, fully customizable audio player to your Elementor website. It’s perfect for showcasing music, podcasts, voice samples, or any audio content directly on your page.

With the Audio Player Widget, you can upload your audio files, control how they play, and customize every part of the player to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

Make sure RTMKit & RTMElements Addon is installed and activated on your WordPress website. RTMElements Addon is available exclusively in Rometheme Hub.

How to Get Addons?

Go to WordPress Dashboard → RTMKit → Features → Addons and ensure that RTMKit & RTMElements marked as Active.

Step 2 — Add the Audio Player Widget

• Open the page with Elementor.
• Find RTM Elements → Audio Player.
• Or search for Audio Player in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Audio Player Widget

• In the Content section, you will find three sections: Layout, Tracks, and Player.

Layout

This section is where you choose the player style and set its main display.

• Style: Choose the player layout that fits your content: Disc, Minimal Bar, Playlist, Podcast, or Episodes Card.
• Main Cover: Upload the main cover image shown on the player, such as album artwork or a podcast thumbnail.
• Image Resolution: Sets the size of the cover image. Select Full to use the original image size.
• Label: Adds a small label above the track title, for example Season 01 or New Release. Leave it empty to hide it.
• Label Icon: Choose whether to show an icon next to the label, and which one to use.

Tracks

• This section is where you add and manage the audio tracks in your player. Use Add Item to add a new track, or the duplicate and remove icons to manage existing ones. You can also drag tracks to change their order.
• Each track has three tabs: Content, Media, and Links.

Content

• Title: The track or episode title, for example Silent Whispers.
• Artist / Subtitle: The artist name or a short subtitle shown below the title.
• Tags: Adds small tags to the track, separated by commas, for example S1 E01, Lifestyle. Tags are only shown in the Podcast style.
• Duration Label: Sets the duration text shown for the track, for example 3:24. This is optional. Leave it empty to read the duration directly from the audio file.

Player

• This section controls how the player behaves and which controls are shown.
• Play Next Track Automatically: Plays the next track as soon as the current one ends.
• Loop: Starts the playlist again from the beginning when playback ends.
• Previous / Next Buttons: Shows or hides the buttons to switch between tracks.
• Episode Selector: Adds a dropdown that lets listeners jump to any episode.
• Skip Buttons: Shows or hides the rewind and forward buttons.
• Skip Seconds: Sets how many seconds the skip buttons jump, for example 10.
• Volume Control: Shows or hides the volume slider.
• Initial Volume: Sets the starting volume level, from 0 to 100.
• Waveform Bars: Sets the number of bars in the waveform display. Higher values create a denser waveform.
• Pause Other Players: Automatically stops other Audio Player widgets on the page when this one starts playing.
• Accessible Label: Adds a descriptive label for screen readers, for example Audio player, to improve accessibility.

Step 4 — Custom Style the Audio Player Widget

• Go to the Style tab to customize every part of the player to match your website’s design.
• Container – set the background, accent color (used for the progress bar, active track, and play button), text and secondary text colors, padding, gap, border, border radius, box shadow, backdrop blur, and info gap of the player.

• Cover – adjust the cover image size, aspect ratio, object fit and position, alignment, background, border, border radius, and box shadow. Leave the height empty to follow the aspect ratio.

• Label – set the color and typography of the label, plus the color, size, and spacing of the label icon.

• Track Title – set the color and typography of the track title.

• Time – set the color of the current time and total time, plus the typography of the time display.

• Buttons – style the Play Button with its size, icon size, border width, border radius, box shadow, and icon, background, and border colors for Normal and Hover states.
• For the Other Buttons (previous, next, and skip), set the icon size, color, and hover color.

• Progress – customize the track and fill colors, bar height, thumb size and color, and volume bar width. Set the thumb size to 0 to hide it.
• Under Waveform, adjust the height and bar width of the waveform display.

• Tags – style the tags with typography, color, background, padding, gap, border, and border radius.
• Under Episode Selector, customize the dropdown’s typography, color, background, border color, and border radius.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make the audio player live on your website.