From 87ed820999a069e8997ccee64e481205447f3564 Mon Sep 17 00:00:00 2001 From: Tanvi2307 Date: Thu, 23 Oct 2025 13:43:16 +0530 Subject: [PATCH] Added Simple Audio Visualizer under Frontend/MiniProjects --- .../SimpleAudioVisualizer/README.md | 55 ++++++++++++++ .../SimpleAudioVisualizer/index.html | 17 +++++ .../SimpleAudioVisualizer/script.js | 72 +++++++++++++++++++ .../SimpleAudioVisualizer/style.css | 33 +++++++++ 4 files changed, 177 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/SimpleAudioVisualizer/README.md create mode 100644 Domains/Frontend/MiniProjects/SimpleAudioVisualizer/index.html create mode 100644 Domains/Frontend/MiniProjects/SimpleAudioVisualizer/script.js create mode 100644 Domains/Frontend/MiniProjects/SimpleAudioVisualizer/style.css diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/README.md b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/README.md new file mode 100644 index 00000000..bb7bd481 --- /dev/null +++ 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 new file mode 100644 index 00000000..9cb5c7a2 --- /dev/null +++ b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/index.html @@ -0,0 +1,17 @@ + + + + + + Simple Audio Visualizer + + + +
+

Simple Audio Visualizer 🎵

+ + +
+ + + diff --git a/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/script.js b/Domains/Frontend/MiniProjects/SimpleAudioVisualizer/script.js new file mode 100644 index 00000000..8d375fd9 --- /dev/null +++ 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 new file mode 100644 index 00000000..04530e46 --- /dev/null +++ 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; +}