Button Genius dengan performa optimal dan fitur lengkap
# 🎵 Spotify to Genius (Improved) - Additional Information
## 📖 Description
A powerful userscript that adds a floating Genius button to Spotify Web Player's lyrics page. Instantly search and open song lyrics on Genius.com with one click. Features smart caching, smooth animations, and an intuitive hover interface.
---
## ✨ Features
### 🎯 Core Features
- **Smart Detection**: Button only appears on Spotify's lyrics page (`/lyrics`)
- **One-Click Access**: Instantly opens the song on Genius.com
- **Auto-Detection**: Automatically detects currently playing track
- **Direct Links**: Uses Genius API to find the exact song page (not just search results)
### 🚀 Performance
- **Intelligent Caching**: Stores up to 50 recent searches for instant access
- **Efficient Monitoring**: Uses MutationObserver instead of intervals
- **Debounced Hover**: Smooth interactions without lag
- **Optimized Loading**: Minimal impact on Spotify's performance
### 💎 User Experience
- **Expandable Button**: Hover to see full track name
- **Visual Feedback**: Loading animations and state indicators
- **Tooltip Hints**: Helpful tooltips for guidance
- **Error Handling**: Graceful fallbacks if API fails
- **Keyboard Support**: Full accessibility with Enter/Space keys
---
## 🔧 Installation
### Step 1: Install a Userscript Manager
Choose one of these browser extensions:
- **Violentmonkey** (Recommended) - [Chrome](https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag) | [Firefox](https://addons.mozilla.org/firefox/addon/violentmonkey/)
- **Tampermonkey** - [Chrome](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) | [Firefox](https://addons.mozilla.org/firefox/addon/tampermonkey/)
- **Greasemonkey** - [Firefox](https://addons.mozilla.org/firefox/addon/greasemonkey/)
### Step 2: Install the Script
1. Click the "Install" button on this page
2. Your userscript manager will open with the script
3. Click "Confirm Installation" or "Install"
4. Done! 🎉
---
## 📱 How to Use
### Basic Usage
1. **Open Spotify Web Player** (https://open.spotify.com)
2. **Play any song** you want lyrics for
3. **Navigate to Lyrics page** (click "Lyrics" in the player)
4. **Look for the yellow "G" button** in the bottom-right corner
5. **Click the button** to open the song on Genius
### Tips & Tricks
- **Hover over the button** to see the current track name
- **Keyboard shortcut**: Tab to the button, then press Enter or Space
- **Quick navigation**: Button disappears when you leave the lyrics page
- **Smart search**: The script finds the exact song, not just search results
---
## 🎨 Interface Guide
### Button States
- **🟡 Yellow Circle (G)**: Ready to use
- **⏳ Loading**: Searching Genius database
- **📝 Expanded**: Hover state showing track name
### Tooltip Messages
- **"Klik untuk buka di Genius"**: Normal state, ready to click
- **"Tidak ada lagu yang diputar"**: No track detected (red tooltip)
---
## 🔍 How It Works
### Track Detection
The script uses two methods to detect the current track:
1. **Media Session API** (Primary): Most accurate, uses browser's media info
2. **Document Title** (Fallback): Parses Spotify's page title
### Genius Search Process
1. Gets current track name (Title + Artist)
2. Checks local cache for previous searches
3. Queries Genius API if not cached
4. Extracts direct song URL from results
5. Opens Genius page in new tab
### Smart Caching
- Stores last 50 searches in memory
- Instant results for repeated songs
- Automatic cleanup when cache is full
---
## 🛠️ Technical Details
### Browser Compatibility
- ✅ Chrome/Chromium (89+)
- ✅ Firefox (88+)
- ✅ Edge (89+)
- ✅ Opera (75+)
- ✅ Brave (Latest)
### Permissions Required
- **None!** This script uses `@grant none`
- No special permissions needed
- Safe and privacy-friendly
### Performance Impact
- **Minimal CPU usage**: Event-driven architecture
- **Low memory footprint**: ~1-2 MB with full cache
- **No interval polling**: Uses efficient observers
- **Non-blocking**: All API calls are asynchronous
---
## ❓ Troubleshooting
### Button Not Appearing
1. Make sure you're on the **lyrics page** (`/lyrics` in URL)
2. Refresh the page (Ctrl+R / Cmd+R)
3. Check if userscript manager is enabled
4. Verify the script is installed and active
### Wrong Song Detected
- Try refreshing the page
- Make sure the song is actually playing
- Check Spotify's title bar shows correct info
### Button Not Clickable
- Wait for loading animation to finish
- Try disabling and re-enabling the script
- Clear browser cache and reload
### API Errors
The script automatically falls back to Genius search page if:
- Genius API is down
- Network connection issues
- Song not found in database
---
## 🔐 Privacy & Security
### Data Collection
- **No data is collected** or sent anywhere
- **No tracking** or analytics
- **No external servers** except Genius API
### API Usage
- Uses public Genius API endpoints
- No API key required
- Rate limiting handled automatically
### Cache Storage
- All cache stored locally in memory
- Cleared when tab/browser closes
- No persistent storage used
---
## 🆕 Changelog
### Version 11.0 (Current)
- ✨ Complete rewrite with modern architecture
- 🚀 Added intelligent caching system
- 💎 Improved hover effects with debouncing
- ♿ Added keyboard accessibility support
- 🎨 Enhanced animations and visual feedback
- 🐛 Better error handling and fallbacks
- 📦 Optimized memory management
- 🔧 Added cleanup functions for performance
### Version 10.0 (Previous)
- Initial release with basic functionality
- URL-based button visibility
- Direct Genius API integration
---
## 🤝 Support & Feedback
### Found a Bug?
Please report issues with:
- Browser name and version
- Steps to reproduce
- Error messages (check browser console: F12)
### Feature Requests
Suggestions are welcome! Please describe:
- What feature you'd like
- Why it would be useful
- How it should work
### Contributing
This script is open for improvements. Feel free to:
- Fork and modify
- Submit pull requests
- Share improvements with the community
---
## 📜 License
This userscript is free and open source.
- ✅ Free to use
- ✅ Free to modify
- ✅ Free to redistribute
- ✅ No warranty provided
---
## 🙏 Credits
- **Original Concept**: Gemini AI (v10.0)
- **Improved Version**: Enhanced with modern best practices
- **Genius API**: Provided by Genius.com
- **Community**: Thanks to all users and contributors
---
## 📞 Quick Links
- 🌐 [Genius.com](https://genius.com)
- 🎵 [Spotify Web Player](https://open.spotify.com/andrizre)
- 📚 [Userscript Documentation](https://wiki.greasespot.net/)
- 💬 [Report Issues](#) (Add your contact/issue tracker)
---
## 💡 Pro Tips
1. **Bookmark Lyrics Page**: For quick access to the button
2. **Use Keyboard**: Tab + Enter is faster than clicking
3. **Cache Warmup**: Click on songs you listen to often for instant future access
4. **Multiple Tabs**: Script works independently in each tab
5. **Mobile**: Works on mobile browsers that support userscripts
---
**Enjoy instant access to Genius lyrics! 🎵✨**
*Last updated: December 2025*
