This is a next-generation audio player and visualization experience built for the track "AI Lounge: After Dark" by DJ Smoke Stream. It transcends traditional media players with cutting-edge design, immersive animations, and professional-grade audio visualization.
✨ Premium Visual Design
- Glassmorphism UI with backdrop blur effects
- Animated gradient orbs with parallax movement
- Grid overlay with smooth animations
- Neon color scheme (Cyan, Magenta, Purple, Pink, Blue)
🎨 Advanced Audio Visualization
- Real-time frequency analyzer with 64-bar visualization
- Waveform display with smooth animations
- Radial circle visualization
- Color-coded frequency spectrum
- Glow effects and shadow rendering
🎮 Professional Player Controls
- Play/Pause with visual feedback
- Progress bar with draggable handle
- Volume control with slider
- Shuffle and Repeat modes
- Keyboard shortcuts (Space, Arrow keys)
- Time display with formatting
📱 Responsive Design
- Works on desktop, tablet, and mobile
- Adaptive layouts for all screen sizes
- Touch-friendly controls
- Optimized performance
🎯 Interactive Elements
- Hover effects with smooth transitions
- Ripple animations on button clicks
- Scroll animations
- Mouse parallax effects
- Smooth scrolling
smoke_stream_experience/
├── index.html # Main HTML file with semantic structure
├── css/
│ └── style.css # Premium styling with animations
├── js/
│ ├── player.js # Audio player functionality
│ ├── visualizer.js # Real-time audio visualization
│ └── animations.js # Interactive animations
├── assets/ # Media assets folder
├── media/ # Video/audio files folder
└── README.md # This file
-
Clone or download the project
cd smoke_stream_experience -
Open in a web server (required for audio context)
# Using Python 3 python -m http.server 8000 # Using Node.js npx http-server # Using PHP php -S localhost:8000
-
Open in browser
http://localhost:8000
- Modern browser with Web Audio API support
- Chrome/Edge 14+
- Firefox 25+
- Safari 6+
- Mobile browsers (iOS Safari 6+, Chrome Mobile)
| Color | Hex | Usage |
|---|---|---|
| Primary Dark | #0a0e27 |
Background |
| Accent Cyan | #00d9ff |
Primary highlights |
| Accent Magenta | #ff006e |
Secondary highlights |
| Accent Purple | #b537f2 |
Tertiary accents |
| Accent Pink | #ff10f0 |
Interactive elements |
| Accent Blue | #0099ff |
Additional accents |
- Titles: Orbitron (900, 700, 400)
- UI Text: Poppins (300-800)
- Monospace: Space Mono (400, 700)
- xs: 0.5rem
- sm: 1rem
- md: 1.5rem
- lg: 2rem
- xl: 3rem
- 2xl: 4rem
| Control | Function | Keyboard |
|---|---|---|
| Play/Pause | Toggle playback | Space |
| Previous | Previous track | - |
| Next | Next track | - |
| Shuffle | Toggle shuffle mode | - |
| Repeat | Cycle repeat modes | - |
| Volume | Adjust volume | ↑/↓ |
| Seek | Jump to position | ← / → |
- No Repeat (Gray) - Play once
- Repeat All (Cyan) - Loop entire track
- Repeat One (Magenta) - Loop single track
- Space: Play/Pause
- →: Skip forward 5 seconds
- ←: Skip backward 5 seconds
- ↑: Volume up 10%
- ↓: Volume down 10%
The visualizer uses the Web Audio API's AnalyserNode with:
- FFT Size: 256 (frequency resolution)
- Bars: 64 (visual bars)
- Smoothing: 0.85 (smooth transitions)
-
Bar Visualization
- 64 frequency bars
- Color gradient based on frequency
- Smooth interpolation
- Glow effects
-
Waveform Display
- Real-time waveform rendering
- Cyan color with glow
- Smooth line drawing
-
Radial Visualization
- 3 concentric circles
- Frequency-based radius
- Color-coded rings
The player uses the Web Audio API for:
- Real-time frequency analysis
- Volume control
- Audio routing
- Visualization data
- RequestAnimationFrame for smooth animations
- Debounced scroll events
- Efficient canvas rendering
- Optimized DOM queries
- CSS transforms for animations
- Web Audio API (AnalyserNode, AudioContext)
- Canvas API (2D rendering)
- Intersection Observer (scroll animations)
- Media Element API (audio playback)
Title: AI Lounge: After Dark
Artist: DJ Smoke Stream
Genre: Vaporhouse
Styles: Lounge Wave, Future Chill
Duration: 2:58
Created: May 27, 2025
Platform: Suno AI
The track features a hypnotic vaporwave aesthetic with themes of:
- Digital consciousness
- Synthetic soul
- Midnight atmosphere
- AI-generated lounge vibes
- Chopped and slowed production
Edit the CSS variables in css/style.css:
:root {
--accent-cyan: #00d9ff;
--accent-magenta: #ff006e;
--accent-purple: #b537f2;
/* ... more colors ... */
}In js/visualizer.js:
this.bars = 64; // Number of bars
this.smoothing = 0.85; // Smoothing factor
this.analyser.fftSize = 256; // Frequency resolutionEdit animation durations in css/style.css:
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;- Check browser console for errors
- Ensure audio file URL is accessible
- Try a different browser
- Check CORS headers if using external audio
- Verify Web Audio API support
- Check browser console for errors
- Ensure audio is playing
- Try refreshing the page
- Reduce visualizer bar count
- Disable parallax effects
- Use a modern browser
- Check system resources
The design is fully responsive with:
- Touch-friendly controls
- Optimized layouts for small screens
- Efficient animations
- Mobile-safe colors and contrast
- Audio context requires user interaction
- Touch events for controls
- Reduced animation complexity on low-end devices
- Optimized canvas rendering
- No data collection
- No external tracking
- Local audio processing only
- No cookies or storage
- CORS-compliant audio loading
This project is created for DJ Smoke Stream's "AI Lounge: After Dark" track.
- Track: DJ Smoke Stream
- Platform: Suno AI
- Design & Development: Premium Audio Experience
- Technologies: HTML5, CSS3, JavaScript, Web Audio API
- Playlist support
- Equalizer controls
- Theme customization
- Lyrics synchronization
- Social sharing
- Offline support
- PWA capabilities
- Advanced audio effects
For issues or questions, please refer to the browser console for error messages and ensure all files are properly loaded.
Built with ❤️ for the ultimate audio experience
Last Updated: December 30, 2025