🎵 Opxm - Song Recognition Web App

A Shazam-like web application I created that identifies songs in real-time using the device's microphone. I built this with React, Vite, Tailwind CSS, and integrated multiple music APIs to create a complete song recognition experience.

✨ Features

• 🎤 Real-time Audio Recognition - 10-second recording with ACRCloud fingerprinting
• 🎶 File Upload - Drag & drop audio files (MP3, WAV, M4A, FLAC, OGG)
• 📏 Gothic UI Theme - Dark Opium/Carti aesthetic with Aceternity components
• 📏 Interactive Background - Mouse-tracking effects, floating crosses, blood drip animations
• 📏 Audio Visualizer - Real-time frequency bars with dark red theme
• 🎵 Multi-Platform Integration - Direct links to Spotify and YouTube
• 📱 Fully Responsive - Works seamlessly on mobile and desktop
• ⚡ Lightning Fast - Built with Vite

🛠️ Tech Stack

Frontend

• React 18 - UI library
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Smooth animations
• Aceternity UI - Modern UI components (BackgroundBeams, HoverBorderGradient, Cards)

APIs & Services

• ACRCloud - Audio fingerprinting and recognition
• Spotify Web API - Song metadata and album art
• YouTube Data API - Music video links

Audio Processing

• Web Audio API - Microphone access and audio processing
• MediaRecorder API - Audio recording
• Canvas API - Audio visualization

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Modern browser with microphone support

1. Install Dependencies

npm install

2. Set Up API Credentials

I configured three different APIs for this project. You'll need to create accounts and get your own API keys from:

ACRCloud (Required)

1. Sign up at ACRCloud Console
2. Create a new project (choose "Audio & Video Recognition")
3. Get your Host, Access Key, and Access Secret

Spotify (Required)

1. Go to Spotify Developer Dashboard
2. Create a new app
3. Copy your Client ID and Client Secret

YouTube (Required)

1. Go to Google Cloud Console
2. Create a new project
3. Enable "YouTube Data API v3"
4. Create credentials (API Key)

3. Configure Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Edit .env and add your credentials:

VITE_ACRCLOUD_HOST=your-host.acrcloud.com
VITE_ACRCLOUD_ACCESS_KEY=your_access_key
VITE_ACRCLOUD_ACCESS_SECRET=your_access_secret

VITE_SPOTIFY_CLIENT_ID=your_client_id
VITE_SPOTIFY_CLIENT_SECRET=your_client_secret

VITE_YOUTUBE_API_KEY=your_api_key

4. Run the Development Server

npm run dev

Open http://localhost:5173 in your browser.

📖 How It Works

The Recognition Process

1. Audio Capture

   • Uses getUserMedia() to access the microphone
   • Records 10 seconds of audio using MediaRecorder API
   • Alternatively, upload audio files via drag & drop
   • Applies noise suppression and echo cancellation

2. Audio Fingerprinting

   • Sends audio to ACRCloud
   • ACRCloud creates a unique "fingerprint" of the audio
   • Compares it against millions of songs in their database

3. Metadata Enrichment

   • Fetches album art and preview from Spotify API
   • Searches for music video on YouTube
   • Combines all data for display

4. Display Results

   • Shows song card with beautiful animations
   • Provides direct links to Spotify and YouTube

Audio Visualization

The visualizer uses the Web Audio API's AnalyserNode:

• Performs FFT (Fast Fourier Transform) on audio data
• Extracts frequency bands (bass, mids, treble)
• Maps frequency values (0-255) to bar heights
• Updates 60 times per second using requestAnimationFrame

📱 Browser Compatibility

Browser	Desktop	Mobile
Chrome	✅	✅
Firefox	✅	✅
Safari	✅	✅
Edge	✅	✅

Note: Microphone access requires HTTPS in production.

🎨 UI Components

AudioVisualizer

• Real-time frequency visualization
• Gradient-colored bars
• Smooth Canvas rendering

SongCard

• Glassmorphic design
• Album art with scale animation
• Confidence score badge
• Action buttons with hover effects

Listen Button

• Three states: idle, listening, processing
• Pulsing animation when active
• Loading spinner during recognition

📦 Project Structure

opxm/
├── src/
│   ├── components/
│   │   ├── AudioVisualizer.jsx    # Audio frequency visualizer
│   │   └── SongCard.jsx            # Song result display
│   ├── services/
│   │   ├── recognitionService.js  # ACRCloud integration
│   │   ├── spotifyService.js      # Spotify API calls
│   │   └── youtubeService.js      # YouTube API calls
│   ├── utils/
│   │   └── audioRecorder.js       # Audio recording logic
│   ├── App.jsx                     # Main application
│   ├── index.css                   # Global styles
│   └── main.jsx                    # Entry point
├── .env.example                    # Environment template
├── tailwind.config.js              # Tailwind configuration
├── vite.config.js                  # Vite configuration
└── package.json

🐛 Troubleshooting

"Microphone access denied"

• Check browser permissions
• Ensure you're using HTTPS (required in production)
• Try a different browser

"No song found"

• Play the song louder
• Move microphone closer to the speaker
• Ensure 6 seconds of clear audio
• Try a different song (some songs may not be in the database)

API Errors

• Verify your API credentials in .env
• Check API quotas (free tiers have limits)
• Ensure all three APIs are properly configured

📝 License

MIT License - feel free to use this project for learning or commercial purposes.

🙏 Acknowledgments

• ACRCloud - Audio recognition technology
• Spotify - Music metadata
• YouTube - Video links
• Tailwind CSS - Styling
• Framer Motion - Animations

---

Enjoy discovering music with Opxm! 🎵