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