Features
80+
Curated Presets
From Italian Pop to Hip Hop Neon, Reggae Jamaica to EDM Energy, Afrobeat Rhythm to Classical Orchestra. Each preset hand-crafted with matching colors, typography, and mood. Pick one and go — or use it as a starting point.
13
Cover Animations
Collapse, Slide Through, Rotate Y-Axis, Fade & Scale, 3D Flip, Vinyl Spin, Door Swing, Yoom & Blur, Glitch Effect, Wave Ripple, Parallax Layer, Stck Shuffle, Vortex. All GPU-accelerated, all 60fps smooth. Every track change feels cinematic. Smooth title slide animation on every transition.
7
Style Sections
Player container, header, track display, playback controls, volume slider, progress bar, and playlist. Colors, gradients, typography, shadows, borders, blur effects, blend modes. If you can see it, you can change it.
∞
Preset System
Load any preset. Tweak it. Save as your own. Export as JSON — background images automatically included. Import on another site — images download to Media Library automatically. Your presets, portable everywhere.
✓
Auto-Fill Titles
Upload audio files and watch the magic. "01-intro-song.mp3" becomes "Intro song". Numbers, dashes, underscores removed. Capitalization corrected automatically. Edit if needed — but usually you won't have to.
0
jQuery Dependency
Pure vanilla JavaScript. No bloat. Lazy loading for audio files. CSS Container Queries for true responsive behavior — player adapts to its container, not just screen size. Works in columns, sidebars, grids.
Let's Talk About That Problem
Modern Audio Player started as a solution to our own frustration. You know the drill. Client wants a music page, podcast section, or audiobook landing. You find an audio player that… works. It plays audio. It doesn’t break. But it just sits there, doing nothing for the design.
That’s the problem. When audio is the content, the player can’t just “not get in the way.” It needs to carry the mood. Support the vibe. That’s why we built this.
80+ presets crafted for real use cases — not generic skins, but intentional designs that set a tone. Full control over every detail when you need it. And here’s a trick: if you’re unsure about colors for the whole site, pick a preset first. Use its palette everywhere. Done.
