Image 1 of 1
MX NATIVE AUDIO PLAYER 1.0
A premium aesthetic overhaul for Squarespace audio widgets. This stylesheet transforms standard blocks into circular, modern playback units featuring a custom-gradient progress bar and a glowing play-needle.
:: Features & Specifics
Circular UI Reset: Replaces the default rectangular boundaries with a 60px perfectly circular player button, maintaining icon alignment via absolute positioning.
Dynamic Gradient Bar: Replaces solid-fill progress bars with a custom-gradient background that tracks state growth smoothly across the playback duration.
Glowing Play-Needle: Adds a logic-aware "needle" indicator that appears pinned to the progress bar while the audio is active, featuring a soft-glow emission for high visibility.
:: Compatibility & Limitations
Specifically engineered for Squarespace 7.1 layouts.
:: Installation & Technicals
Add the included code snippet to you rCustom Code > Custom CSS area to apply this site-wide.
The logic uses a targeted CSS override to intercept the player's [data-state] and .playing classes. This ensures the UI remains lightweight and responsive, with the "needle" visibility toggling automatically when the track starts, pauses, or completes.
If you prefer to restrict these changes to a single page, do not use the site-wide CSS editor. Instead, wrap the code in <style> tags and drop it into that specific page's Advanced > Page Header Code Injection settings.
MX NATIVE AUDIO v1.0 · Copyright Lucas Gaudette.
PART OF THE MATRIARX UNIVERSE
PART OF THE MATRIARX UNIVERSE