acesdit · Tejas-Santosh-Nalawade · Oct 23, 2025 · Oct 23, 2025
diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/README.md b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/README.md
@@ -0,0 +1,55 @@
+# 🎵 Simple Audio Visualizer
+
+**Contributor:** [YourGitHubUsername](https://github.com/YourGitHubUsername)
+
+---
+
+## 🧾 Description  
+A **Simple Audio Visualizer** web app built with **HTML**, **CSS**, and **JavaScript**.  
+Users can upload an audio file and watch the frequency bars move in real-time.
+
+---
+
+## 📁 Folder Structure
+
+Simple-Audio-Visualizer/
+├── index.html # Main HTML file
+├── style.css # Styling for layout and colors
+├── script.js # Audio analysis and canvas drawing logic
+└── README.md # Documentation
+
+
+---
+
+## 🚀 Features  
+- 🎧 Upload your own audio files (MP3, WAV, etc.)  
+- 📊 Real-time frequency bar visualizer using Canvas API  
+- 🌈 Colorful animated bars based on frequency data  
+- 🎨 Responsive canvas size  
+- 🔄 Audio loops automatically  
+
+---
+
+## 🧩 Tech Stack  
+- **HTML5** – Markup and UI structure  
+- **CSS3** – Styling and layout  
+- **JavaScript (Vanilla)** – Web Audio API and Canvas for visualization  
+
+---
+
+## 💡 How to Use  
+1. Open `index.html` in a modern browser.  
+2. Click the file input and select an audio file.  
+3. Watch the audio frequency bars animate in real-time.
+
+---
+
+## 📂 Installation  
+1. Clone or download this project.  
+2. Open `index.html` in your favorite web browser (Chrome, Firefox, Edge).  
+
+---
+
+
+
+
diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/index.html b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Simple Audio Visualizer</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>Simple Audio Visualizer 🎵</h1>
+    <input type="file" id="audio-file" accept="audio/*" />
+    <canvas id="visualizer"></canvas>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/script.js b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/script.js
@@ -0,0 +1,72 @@
+const fileInput = document.getElementById('audio-file');
+const canvas = document.getElementById('visualizer');
+const ctx = canvas.getContext('2d');
+
+let audioCtx;
+let analyser;
+let source;
+let dataArray;
+let bufferLength;
+
+function resizeCanvas() {
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+}
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+fileInput.addEventListener('change', function () {
+  if (audioCtx) {
+    audioCtx.close();
+  }
+
+  const files = this.files;
+  if (files.length === 0) return;
+
+  const audioFile = files[0];
+  const audioURL = URL.createObjectURL(audioFile);
+
+  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const audio = new Audio(audioURL);
+  audio.crossOrigin = "anonymous";
+  audio.loop = true;
+  audio.play();
+
+  source = audioCtx.createMediaElementSource(audio);
+  analyser = audioCtx.createAnalyser();
+
+  source.connect(analyser);
+  analyser.connect(audioCtx.destination);
+
+  analyser.fftSize = 256;
+  bufferLength = analyser.frequencyBinCount;
+  dataArray = new Uint8Array(bufferLength);
+
+  draw();
+});
+
+function draw() {
+  requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  const barWidth = (canvas.width / bufferLength) * 2.5;
+  let barHeight;
+  let x = 0;
+
+  for (let i = 0; i < bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    const red = barHeight + 25;
+    const green = 250 * (i / bufferLength);
+    const blue = 50;
+
+    ctx.fillStyle = `rgb(${red},${green},${blue})`;
+    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+
+    x += barWidth + 1;
+  }
+}
diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/style.css b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/style.css
@@ -0,0 +1,33 @@
+body {
+  background-color: #121212;
+  color: #fff;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.container {
+  text-align: center;
+  width: 90vw;
+  max-width: 700px;
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+#audio-file {
+  margin-bottom: 20px;
+}
+
+#visualizer {
+  width: 100%;
+  height: 200px;
+  background-color: #222;
+  border-radius: 10px;
+}