AudioSphere – Circular HTML5 Audio Player

AudioSphere is a modern, feature-rich HTML5 audio player built with pure vanilla JavaScript. This professional audio player features a unique circular canvas-based visualizer, comprehensive playlist management system, and advanced audio processing capabilities. Perfect for music websites, podcast platforms, radio stations, and web applications. The player is designed to be lightweight, dependency-free, and fully responsive across all devices including desktop, tablet, and mobile. Built with vanilla JavaScript, HTML5, CSS3, Web Audio API, Canvas API, and IndexedDB for persistent offline storage. Includes features like equalizer, playback speed control, shuffle, repeat modes, audio recording, picture-in-picture mode, drag-and-drop playlist reordering, real-time search, track sharing, and WCAG 2.1 AA accessibility compliance.
Key Features
Unique Circular Visualizer
Real-time audio frequency visualization rendered on HTML5 Canvas with smooth animations
Dynamic gradient effects that respond to audio frequency data using Web Audio API
Beautiful circular design that stands out from traditional linear audio players
High-performance canvas rendering optimized for smooth playback visualization
Advanced Playlist Management
IndexedDB-powered persistent storage – Playlists automatically saved and survive browser restarts, works offline (including uploaded M3U playlists)
M3U / M3U8 support – Add playlists as a single row from URL (playlist.json) or upload M3U + audio files together; entries play in order and persist in IndexedDB after refresh
Auto-play on track select – Option to start playback as soon as you select a track (including M3U)
Drag-and-drop reordering – Intuitive drag-and-drop interface for reordering tracks on desktop and mobile devices
Real-time search and filter – Instant track search functionality that filters results as you type
Track sharing – Share individual tracks via URL parameters for deep linking and social sharing
Download tracks – Download audio files directly from the playlist interface
Thumbnail support – Add custom thumbnail images to tracks for visual playlist browsing
Multiple upload methods – Upload audio files directly or add tracks via URL for remote audio sources
Playlist persistence – All playlist data stored locally using IndexedDB for offline-first architecture
Professional Audio Controls
10-band parametric equalizer with multiple presets including Flat, Bass Boost, Treble Boost, and Vocal enhancement
Playback speed control – Adjustable playback speed from 0.5x to 2x with visual selection panel and smooth transitions
Shuffle mode – Advanced shuffle functionality using Fisher-Yates algorithm for true randomization
Repeat modes – Three repeat modes: Off, Repeat One track, or Repeat All tracks
Volume control – Smooth volume slider with visual tooltip and mute functionality
Live stream support – Automatically detects and handles live radio streams and internet radio stations
Seek control – Precise audio seeking with progress bar and time display
Built-in Audio Recording
Audio recording – Record audio directly from your microphone using browser MediaRecorder API
High-quality recording – Records in WebM/Opus format for optimal quality and file size
Save to playlist – Recordings automatically added to your playlist for immediate playback
Real-time timer – Visual recording indicator with elapsed time display and recording status
Pause and resume – Pause recording functionality with ability to resume and continue recording