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
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

Picture-in-Picture Mode

Floating mini player – Draggable floating window that stays on top of other windows and browser tabs
Native browser PiP – Uses browser Picture-in-Picture API for cross-tab and cross-window support
Custom window fallback – Fully clickable controls and interactive buttons when native PiP unavailable
Position memory – Remembers window position between browser sessions using localStorage
Real-time sync – Updates automatically with player state including track info, play/pause status, and time
Playback controls – Full playback controls including previous, play/pause, next, and time display in PiP window

Customization and Theming

Custom backgrounds – Upload images or use URLs with glassy blur effect
Theme system – System-aware light/dark theme switching
Responsive design – Optimized for desktop, tablet, and mobile
Custom fonts – Beautiful Rajdhani font family included

Accessibility and Standards

WCAG 2.1 AA compliant – Full keyboard navigation support
ARIA labels – Screen reader friendly
Keyboard shortcuts – Comprehensive keyboard controls
Focus management – Proper focus handling for accessibility

Technical Excellence

Zero dependencies – Pure vanilla JavaScript, HTML5, and CSS3 with no jQuery, React, Vue, or other frameworks required
Modern web APIs – Utilizes Web Audio API, Canvas API, IndexedDB, MediaRecorder API, and Picture-in-Picture API
Cross-browser compatible – Works on all modern browsers including Chrome, Firefox, Safari, Edge, and Opera
Offline-first architecture – IndexedDB storage works offline with full playlist persistence
Performance optimized – Efficient canvas rendering, optimized memory management, and smooth 60fps animations
Responsive design – Fully responsive layout that adapts to desktop, tablet, and mobile screen sizes
SEO friendly – Semantic HTML structure with proper meta tags and accessibility attributes

Use Cases

Music websites – Perfect for music blogs, artist portfolios, and music streaming sites
Podcast platforms – Ideal for podcast hosting and playback
Radio stations – Live stream support for online radio
Educational platforms – Audio lessons, language learning, and educational content
Corporate websites – Background music, announcements, and audio content
Personal projects – Custom audio players for portfolios and personal sites
Web applications – Integrate into existing web applications

Browser Support

Chrome 66 and above
Firefox 60 and above
Safari 11.1 and above (iOS 11+)
Edge 79 and above
Opera 53 and above

Technical Details

Technologies Used

Pure Vanilla JavaScript – No frameworks required
HTML5 Audio API – Native audio playback
Web Audio API – Visualization and equalizer
Canvas API – Circular visualizer rendering
IndexedDB – Persistent offline storage
MediaRecorder API – Audio recording
Picture-in-Picture API – Native browser PiP support
CSS3 Custom Properties – Dynamic theming

Documentation

Complete documentation is available in documentation.html. It includes:

Detailed feature descriptions
User guide with step-by-step instructions
API reference
Technical details
Customization guide
Browser support information
Troubleshooting tips

Support

For support, please contact the author through CodeCanyon. We’re committed to helping you get the most out of AudioSphere.

Updates and Changelog

See CHANGELOG.md for version history and updates.

Credits

Bootstrap Icons – MIT License (icons.getbootstrap.com)
Rajdhani Font – SIL Open Font License (fonts.google.com)

AudioSphere - Circular HTML5 Audio Player