Vue Shazam Clone

A music recognition application built with Vue 3 and Vite that allows users to identify songs playing around them.

Features

• Real-time audio capture
• Music recognition using AudD API
• Responsive design for mobile and desktop
• Modern UI with animations
• Display of song details including:
  • Title
  • Artist
  • Album
  • Release Year
  • Album Cover Art

Prerequisites

• Node.js (v14 or higher)
• NPM or Yarn
• AudD API key (get it from AudD.io)

Setup

1. Clone the repository:

git clone <your-repo-url>
cd shazam

2. Install dependencies:
```bash
npm install

3. Configure environment variables:
   • Copy .env.example to .env
   • Add your AudD API token to the .env file:

VITE_API_URL=https://api.audd.io/
VITE_API_TOKEN=your_api_token_here

4. Start the development server:

npm run dev

Usage

1. Open the application in your browser
2. Click the "Tap to Shazam" button
3. Allow microphone access when prompted
4. Play music near your device
5. Wait for the result (takes about 10 seconds)

Tech Stack

• Vue 3
• Vite
• Pinia (State Management)
• Tailwind CSS
• Web Audio API
• MediaRecorder API

Project Structure

shazam/
├── src/
│   ├── components/
│   │   └── ShazamComponent.vue
│   ├── stores/
│   │   └── musicStore.js
│   ├── services/
│   │   └── musicService.js
│   ├── App.vue
│   └── main.js
├── .env.example
└── README.md

Development

• npm run dev : Start development server
• npm run build : Build for production
• npm run preview : Preview production build

Browser Support

The application uses modern Web APIs and requires:

• Web Audio API support
• MediaRecorder API support
• Modern browser (Chrome, Firefox, Safari, Edge)

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

Acknowledgments

• AudD for the music recognition API
• Vue.js for the frontend framework
• Tailwind CSS for styling