Kinetic Audio Player

Overview

Kinetic Audio Player adds a styled audio player to WordPress pages and posts.

Use it for:

• Podcast previews
• Music samples
• Voice recordings
• Product demonstrations
• Portfolio audio
• Interviews
• Short instructional clips

The block includes two layouts, editable text, optional cover artwork, playback progress, volume controls, entrance animation, and responsive visibility settings.

Add the block

1. Open a page or post in Gutenberg
2. Select the block inserter
3. Search for Kinetic Audio Player
4. Insert the block
5. Upload or select an audio file
6. Edit the title and subtitle directly inside the player
7. Configure the layout and controls from the sidebar
8. Update the page and test playback on the frontend

The block requires an audio URL. It does not produce the normal frontend player when no audio source is selected.

Audio Source and Media

Open Audio Source & Media.

Audio Source

Upload an audio file or select one from the WordPress Media Library.

You can also edit the saved Audio URL directly.

For broad browser compatibility, use a web-friendly format such as MP3.

Cover Image

Add an optional image for:

• Album artwork
• Podcast cover
• Speaker portrait
• Product image
• Branded audio preview

The cover replaces the standard play icon inside the main playback control.

Preload Strategy

Choose how the browser prepares the audio:

• Metadata Only loads basic information such as duration
• Auto allows the browser to preload more of the file
• None waits until the visitor requests playback

Metadata Only is the recommended starting option.

The browser can still adjust preload behavior based on connection, device, and its own policies.

Player Layout

Open Layout & Sticky Behavior.

Standard Extended

The extended layout can display:

• Cover or play icon
• Title
• Subtitle
• Time
• Waveform
• Progress
• Volume control
• Download control in PRO

Use it when the player needs context and visible playback information.

Compact Circle

The compact layout creates a circular player focused on the main playback control.

Use Circle Size to adjust its diameter between:

60–300 px

The compact layout does not show the extended title, subtitle, time, or volume area. When the seekbar is enabled, progress appears around the circle.

Block Alignment

Position the player:

• Left
• Center
• Right

Alignment controls the player inside the available block width.

Time Display

The extended layout supports:

• Hidden
• Elapsed Time
• Remaining Time
• Total Duration

The duration becomes available after the browser loads the required audio metadata.

Colors and Styling

Open Colors & Styling to configure:

• Background color
• Text and icon color
• Accent color
• Progress background
• Border radius
• Vertical padding
• Horizontal padding

Border radius and padding apply to the extended player.

The compact layout remains circular and uses its own size control.

Waveform and Playback Controls

Open Engine & Advanced.

Animated Waveform

Enable Show Animated Waveform to display bars that respond while the audio is playing.

The Free edition uses the default bar style.

KineticHub PRO adds:

• Box waveform
• Pill waveform

The waveform is decorative and is hidden from assistive technologies.

Interactive Seekbar

Enable Interactive Seekbar to allow visitors to move through the audio.

Visitors can:

• Select a position with the mouse
• Use touch interaction
• Use the keyboard arrow keys

In the compact layout, seeking follows the circular progress path.

Volume Control

The extended player can display:

• Mute and unmute button
• Volume slider

The volume interface is not shown in the compact layout.

Multiple Players

Several Audio Player blocks can be used on one page.

Starting one player automatically pauses any other Kinetic Audio Player that is currently playing.

Shadow and Entrance Animation

Use Shadow & Depth to add a container shadow.

Available shadow styles include:

• Soft
• Crisp
• Float
• Glow
• Elegant

The block also supports entrance effects:

• None
• Fade
• Slide
• Zoom

Use Entrance Delay to postpone the animation when coordinating it with other content.

Avoid long delays that make the player appear unavailable.

Responsive Visibility

Use the visibility controls to:

• Hide on mobile
• Hide on desktop

The extended player can become cramped inside very narrow containers.

For small layouts, consider:

• Using the compact player
• Reducing parent padding
• Shortening the title and subtitle
• Disabling optional controls
• Placing the player in a full-width mobile section

The player does not automatically change from extended to compact at every mobile width.

KineticHub PRO Controls

KineticHub PRO adds advanced playback and visual behavior.

Sticky Mode

Available modes:

• Disabled
• Sticky Top
• Floating Widget

When an active player leaves its original viewport position, the sticky or floating version can remain available while playback continues.

The floating player includes a close control.

Sticky behavior must be tested on the public frontend and is not reproduced fully inside Gutenberg.

Sticky Appearance

PRO includes placement and appearance controls for the floating state, including:

• Left, center, or right placement
• Classic Box
• Modern Pill
• Custom Glass

The extended player supports the additional sticky style options.

Magnetic Hover Effect

Makes the player respond subtly to desktop pointer movement.

This effect is reduced when the visitor requests reduced motion.

Player Glow Style

Available PRO glow styles:

• Soft Ambient
• Neon Cyberpunk
• Pulsing Aura

Use glow effects carefully over complex backgrounds.

Disable Seek on Mobile

Prevents touch seeking on screens up to approximately 768px.

This can help avoid accidental position changes while scrolling.

Remember Playback Position

Stores the visitor’s playback position in local browser storage.

When the visitor returns, the player can resume from the saved position when it remains valid for that audio file.

Pause on Tab Switch

Pauses playback when the browser tab becomes hidden.

Allow Audio Download

Adds a download link to the extended player.

The file must still be publicly accessible and downloadable from its source server.

Accessibility

The block includes:

• Labeled play and pause control
• Labeled volume controls
• Keyboard-accessible seekbar
• Current seek position information
• Decorative graphics hidden from screen readers
• A native audio fallback when JavaScript is unavailable

When reduced motion is enabled, the animated waveform and PRO glow or magnetic effects are removed or reduced.

Audio does not begin automatically. The visitor must activate playback.

For spoken or instructional content, provide a transcript when appropriate.

Performance

The waveform updates only while playback is active.

When several players are present, only the active track continues playing.

The block also cleans up its event listeners, observers, and animation work when an instance is removed dynamically.

For better performance:

• Compress audio for web delivery
• Avoid unnecessarily large WAV files
• Use Metadata Only preload for normal pages
• Avoid placing many continuously visible players in one small section

Troubleshooting

The player is missing on the frontend

Confirm that an audio file or valid Audio URL is selected.

The block does not render publicly without an audio source.

The player shows “Audio Unavailable”

Open the audio URL directly.

Check for:

• Deleted file
• 403 or 404 response
• Unsupported format or codec
• Incorrect MIME type
• CDN or security restriction

The duration remains at 00:00

Use Metadata Only or Auto preload.

Also check that the server supports audio metadata and partial-content requests.

Play works, but the waveform does not move

Check:

• Show Animated Waveform is enabled
• Reduced Motion is not enabled
• Frontend JavaScript is loading
• Custom CSS is not hiding the waveform
• Another custom component is not reusing .kh-ap-* classes

The extended player is cramped on mobile

Use the Compact layout or reduce the width restrictions and horizontal padding of its parent container.

Sticky or floating mode does not appear

Confirm that:

• KineticHub PRO is active
• Sticky Mode is enabled
• Audio is currently playing
• The original player has left the viewport
• JavaScript delay is not blocking initialization

The editor preview responds differently

The editor provides a visual preview.

Real audio playback, sticky behavior, stored playback position, and complete frontend interaction should be tested on the published page.

Next step

Continue with Kinetic Before/After to create an interactive comparison between two images using drag, click, touch, and keyboard controls.