A polished audio player component built on WaveSurfer.js, designed for podcasters, musicians, and content creators who need a professional playback experience in Framer.
Load tracks via direct file upload or external URL. Supports MP3, WAV, and M4A formats with automatic waveform generation.
Choose between bar-style or continuous wave visualization. The bar style includes contrast controls for dynamic range emphasis, while both styles support amplification adjustment. Configure bar width, gap, and corner radius for precise aesthetic control.
Standard playback controls with optional autoplay on preview. Time display shows elapsed time or remaining time countdown. Playback cursor with configurable width and color provides visual tracking.
Full typography control for track title, artist name, and timer display. Independent color controls for waveform, progress indicator, button, and all text elements. Optional background image or solid color fill.
Single instance playback enforced—starting one player automatically pauses others on the page.
Built with WaveSurfer.js 7.8.10 for reliable cross-browser performance.
A polished audio player component built on WaveSurfer.js, designed for podcasters, musicians, and content creators who need a professional playback experience in Framer.
Load tracks via direct file upload or external URL. Supports MP3, WAV, and M4A formats with automatic waveform generation.
Choose between bar-style or continuous wave visualization. The bar style includes contrast controls for dynamic range emphasis, while both styles support amplification adjustment. Configure bar width, gap, and corner radius for precise aesthetic control.
Standard playback controls with optional autoplay on preview. Time display shows elapsed time or remaining time countdown. Playback cursor with configurable width and color provides visual tracking.
Full typography control for track title, artist name, and timer display. Independent color controls for waveform, progress indicator, button, and all text elements. Optional background image or solid color fill.
Single instance playback enforced—starting one player automatically pauses others on the page.
Built with WaveSurfer.js 7.8.10 for reliable cross-browser performance.
Fred Moon
