Web Audio Player with Canvas Visualizer

A modern, responsive, and lightweight Web Audio Player built with vanilla HTML5, CSS3, and JavaScript. It utilizes the Web Audio API and HTML5 Canvas to render real-time audio frequency visualizations as tracks play.

🚀 Features

• Real-time Visualizer: Dynamic frequency bars generated on HTML5 Canvas based on audio analysis data.
• Local Track Management: Embedded HTML5 <audio> engine playing local MP3 tracks from the ./songs directory.
• Interactive Controls: Smooth Play/Pause toggles, Next/Previous track navigation, and dynamic seek bar adjustment.
• Dynamic Playlist UI: Automatic track rendering with active state highlighting.
• Responsive Interface: Styled with a clean, modern dark layout optimized for desktop and mobile viewports.

🛠️ Tech Stack

• HTML5: Semantic structure and native media handling.
• CSS3: Flexbox layouts, modern animations, and sleek dark UI theme.
• JavaScript (ES6+): Application state, dynamic DOM manipulation, and asynchronous playback handling.
• Web Audio API & Canvas API: Audio node routing (createMediaElementSource, AnalyserNode) and live visual rendering.

📁 Directory Structure

audio-visualizer-player/
│
├── index.html
├── style.css
├── script.js
├── README.md
└── songs/
    ├── HUM.mp3
    ├── khasara.mp3
    └── relaxlofi.mp3