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 )