🎧 BeatFlow by Naved

A responsive JavaScript music player with song search and audio previews.

Built with HTML5, CSS3, Bootstrap 5 and vanilla JavaScript.

---

🌐 Live Demo

🔗 Live Demo: https://beatflow-by-naved.vercel.app/

🔗 GitHub Repository: https://github.com/naved2001/Beatflow_by_naved

---

✨ Features

• 🎵 Play local demo tracks
• ▶️ Play / pause controls
• 🔎 Search songs and artists
• 🎧 iTunes Search API integration
• 🖼️ Dynamic album artwork
• 🔊 Audio preview playback
• 📱 Responsive layout for desktop, tablet and mobile
• ⏳ Search loading state
• ❌ Friendly empty/error states
• 🎨 Glassmorphism-style UI
• ♻️ Clean asset and source-code structure

---

📸 Screenshots

🏠 Music Player

🔎 Search Results

🎵 Playing a Song

📱 Responsive Design

---

🛠️ Tech Stack

• HTML5 — page structure
• CSS3 — custom styling and responsive design
• Bootstrap 5.3 — responsive grid and utilities
• JavaScript (ES6+) — player logic, DOM manipulation and API integration
• iTunes Search API — song metadata, artwork and preview URLs
• Google Fonts / Poppins — typography

---

📁 Project Structure

Beatflow_by_naved/
│
├── assets/
│   ├── audio/
│   │   ├── blinding_lights.mp3
│   │   ├── kesariya.mp3
│   │   ├── shape_of_you.mp3
│   │   └── unstoppable.mp3
│   │
│   └── images/
│       └── favicon.png
│
├── css/
│   └── style.css
│
├── js/
│   └── appleMusic.js
│
├── screenshots/
│   └── README.md
│
├── .gitignore
├── index.html
└── README.md

---

🔎 How Music Search Works

BeatFlow searches the iTunes catalog using the iTunes Search API.

User enters artist/song
        ↓
Form submission
        ↓
iTunes Search API
        ↓
Song metadata returned
        ↓
Results displayed
        ↓
User selects a song
        ↓
Artwork + preview URL loaded
        ↓
Audio preview plays

The project uses JSONP for the cross-site iTunes Search request. This is important for a static frontend because the browser can otherwise encounter CORS/redirect issues when making a direct fetch() request.

Apple's documentation specifically describes dynamic script tags / JSONP for cross-site Search API requests.

---

🚀 Run Locally

1. Clone the repository

git clone https://github.com/naved2001/Beatflow_by_naved.git

2. Open the project

cd Beatflow_by_naved

3. Start the frontend

You can open index.html directly, but VS Code Live Server is recommended.

For example:

http://127.0.0.1:5500/

---

🎶 Demo Tracks

The project includes local demo audio files:

• Shape of You — Ed Sheeran
• Kesariya — Arijit Singh
• Blinding Lights — The Weeknd
• Unstoppable — Sia

---

📱 Responsive Design

The layout adapts to different screen sizes:

• 💻 Desktop
• 💻 Laptop
• 📱 Mobile
• 📟 Tablet

The Bootstrap grid and custom media queries are used to keep the player and search sections usable on smaller screens.

---

🧠 What I Practiced

This project helped me practice:

• DOM selection and manipulation
• Event listeners
• Form submission
• Async JavaScript
• API integration
• JSON / JSONP responses
• Dynamic element creation
• Audio playback
• Error handling
• Responsive CSS
• Bootstrap grid
• Organizing frontend assets

---

🔮 Future Improvements

• ❤️ Favorite songs
• 📋 Playlists
• ⏭️ Next / Previous controls
• 🔀 Shuffle
• 🔁 Repeat
• 🔊 Custom volume control
• 🎚️ Custom progress bar
• 💾 LocalStorage
• 🌙 Dark/light theme
• 🎤 Lyrics
• 🚀 Deploy with GitHub Pages

---

👨‍💻 Author

Naved Ansari

Built with ❤️ while learning JavaScript and frontend development.

---

⭐ Support

If you found this project useful, consider giving the repository a ⭐ on GitHub.

---

📄 License

This project is created for learning and portfolio purposes.