Skip to content

component

MP3 Sound Player

By Fred Moon

Details

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.

12014015588/148/228/309/79/15
  • All · #558