A modern web application that synchronizes lyrics with music playback, allowing users to visualize song lyrics in real-time. Built with React, TypeScript, and Vite.
- Real-time Lyrics Synchronization: Lyrics highlight in sync with music playback
- Multiple Input Sources: Support for YouTube links, Spotify links, and manual search
- Interactive Music Player: Custom player with play/pause, seek, and restart controls
- Responsive Design: Works seamlessly on desktop and mobile devices
- Error Handling: Graceful error handling for unsupported audio sources
- Modern UI: Beautiful, intuitive interface with smooth animations
- Frontend: React 18 + TypeScript
- Build Tool: Vite
- Styling: CSS3 with custom animations
- Audio: HTML5 Audio API
- APIs: Custom lyrics and audio APIs
-
Clone the repository
git clone https://github.com/ucupp19/lyrics-visualizer cd lyrics-visualizer -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
- YouTube Links: Paste a YouTube video URL
- Spotify Links: Paste a Spotify track URL
- Manual Search: Enter artist and song title manually
- Play/Pause: Click the play button to control playback
- Seek: Click on the progress bar to jump to a specific time
- Restart: Click the restart button to start from the beginning
- Lyrics Sync: Lyrics automatically highlight as the song plays
lyrics-visualizer/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── App.tsx # Main application component
│ │ ├── MusicPlayer.tsx # Custom music player
│ │ ├── LyricsBox.tsx # Lyrics display component
│ │ ├── SongInputSection.tsx # Input handling
│ │ ├── LoadingSection.tsx # Loading states
│ │ ├── ErrorSection.tsx # Error handling
│ │ └── ShinyText.tsx # Animated text component
│ ├── styles.css # Global styles
│ └── main.tsx # Application entry point
├── index.html # HTML template
├── package.json # Dependencies and scripts
└── README.md # This file
Create a .env file in the root directory:
VITE_LYRICS_API=-
VITE_AUDIO_API=-The application uses two main APIs:
- Lyrics API: Fetches synchronized lyrics for songs
- Audio API: Retrieves audio streams and metadata
npm run build-
Vercel (Recommended)
npm install -g vercel vercel
-
Netlify
- Connect your GitHub repository
- Set build command:
npm run build - Set publish directory:
dist
-
GitHub Pages
npm run build # Deploy dist/ folder to GitHub Pages
- Audio Source Limitations: Some YouTube/Spotify links may not work due to platform restrictions
- CORS Issues: Direct audio streaming may be blocked by browsers
- Mobile Playback: Background audio playback may be limited on mobile devices
- YouTube/Spotify embed player integration
- User upload functionality for custom audio files
- Playlist support
- Offline mode with cached lyrics
- Social sharing features
- Advanced audio visualization
- Multiple language support
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Lyrics API: is not available for noew for providing lyrics data
- Audio API: is not available for now for audio streaming
- React Community: For the amazing ecosystem and tools
- Vite: For the fast build tool and development experience
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Contact the maintainers
Made with ❤️ by [Afrizz]