component
MP3 Sound Player
By Fred Moon
Details
- Fred MoonAuthor
- componentType
- 2026-02-11Published
- 2026-02-11Updated
- 2026-02-02Added
- PlayersCategories
Summary
Customisable and responsive sound player
Description
Overview A polished audio player component built on WaveSurfer.js, designed for podcasters, musicians, and content creators who need a professional playback experience in Framer. Audio Source Load tracks via direct file upload or external URL. Supports MP3, WAV, and M4A formats with automatic waveform generation. Visualization Options 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. Playback Features 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. Customization 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. Technical Notes 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. Screenshots
Introduction
Customisable and responsive sound player
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #558