Spaces:

omar1232
/

audio-react-visualizer

Running

App Files Files Community

omar1232 commited on Apr 23, 2025

Commit

3a461e4

verified ·

1 Parent(s): 4618ace

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +158 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Audio React Visualizer
-emoji: 💻
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: audio-react-visualizer
+emoji: 🐳
+colorFrom: purple
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,158 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Audio Visualization Reacting to Beat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+    <style>
+        .visualizer-container {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+        .bar {
+            position: absolute;
+            bottom: 0;
+            width: 8px;
+            background: linear-gradient(to top, #00b4db, #0083b0);
+            border-radius: 4px 4px 0 0;
+            transition: height 0.05s ease-out;
+            box-shadow: 0 0 10px rgba(0, 180, 219, 0.7);
+        }
+        .beat-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,105,180,0.8) 0%, rgba(255,20,147,0.5) 70%, transparent 100%);
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: opacity 0.3s, transform 0.3s;
+        }
+        .pulse {
+            animation: pulse 0.5s ease-out;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 0.8; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        .audio-wave {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            background: linear-gradient(to top, rgba(0, 180, 219, 0.1), transparent);
+            clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full">
+        <h1 class="text-4xl font-bold mb-2 text-center bg-gradient-to-r from-cyan-400 to-pink-500 bg-clip-text text-transparent">
+            Audio React Visualizer
+        </h1>
+        <p class="text-gray-400 text-center mb-8">Visualization reacts to both frequency and beat detection</p>
+        <div class="visualizer-container mb-8" id="visualizer">
+            <div class="audio-wave" id="audioWave"></div>
+        </div>
+        <div class="flex flex-col md:flex-row gap-4 items-center justify-center">
+            <div class="flex-1">
+                <input type="file" id="audioUpload" accept="audio/*" class="hidden" />
+                <label for="audioUpload" class="cursor-pointer bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center transition-all duration-300 shadow-lg hover:shadow-xl">
+                    <i class="fas fa-music mr-2"></i> Choose Audio File
+                </label>
+            </div>
+            <div class="flex-1">
+                <button id="playButton" class="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white font-bold py-3 px-6 rounded-lg w-full flex items-center justify-center transition-all duration-300 shadow-lg hover:shadow-xl">
+                    <i class="fas fa-play mr-2"></i> Play Demo
+                </button>
+            </div>
+        </div>
+        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="bg-gray-800 p-4 rounded-lg">
+                <h3 class="text-cyan-400 font-semibold mb-2"><i class="fas fa-sliders-h mr-2"></i>Controls</h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-gray-400 mb-1">Sensitivity</label>
+                        <input type="range" id="sensitivity" min="0.1" max="1" step="0.05" value="0.5" class="w-full accent-cyan-500">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">Bar Count</label>
+                        <input type="range" id="barCount" min="20" max="200" step="10" value="80" class="w-full accent-pink-500">
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 p-4 rounded-lg">
+                <h3 class="text-purple-400 font-semibold mb-2"><i class="fas fa-chart-bar mr-2"></i>Audio Info</h3>
+                <div class="space-y-2">
+                    <p>Status: <span id="status" class="text-pink-400">Waiting for audio</span></p>
+                    <p>Beat: <span id="beatStatus" class="text-cyan-400">No beat detected</span></p>
+                    <p>Volume: <span id="volumeLevel">0</span>%</p>
+                </div>
+            </div>
+            <div class="bg-gray-800 p-4 rounded-lg">
+                <h3 class="text-pink-400 font-semibold mb-2"><i class="fas fa-info-circle mr-2"></i>About</h3>
+                <p class="text-gray-400 text-sm">This visualization analyzes audio frequencies and detects beats in real-time. The bars represent different frequency ranges, while circles appear when beats are detected.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Audio elements
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            let audioSource = null;
+            let analyser = null;
+            let dataArray = null;
+            let isPlaying = false;
+            let animationId = null;
+            // Beat detection variables
+            let lastBeatTime = 0;
+            let beatThreshold = 1.5;
+            let beatHoldTime = 400; // ms
+            let beatDecayRate = 0.98;
+            let beatCutOff = 0;
+            // DOM elements
+            const visualizer = document.getElementById('visualizer');
+            const audioWave = document.getElementById('audioWave');
+            const playButton = document.getElementById('playButton');
+            const audioUpload = document.getElementById('audioUpload');
+            const statusElement = document.getElementById('status');
+            const beatStatusElement = document.getElementById('beatStatus');
+            const volumeLevelElement = document.getElementById('volumeLevel');
+            const sensitivityInput = document.getElementById('sensitivity');
+            const barCountInput = document.getElementById('barCount');
+            let barCount = parseInt(barCountInput.value);
+            let bars = [];
+            let sensitivity = parseFloat(sensitivityInput.value);
+            // Create initial bars
+            function createBars() {
+                // Clear existing bars
+                visualizer.querySelectorAll('.bar').forEach(bar => bar.remove());
+                bars = [];
+                const containerWidth = visualizer.clientWidth;
+                const barWidth = containerWidth / barCount;
+                for (let i = 0; i < barCount; i++) {
+                    const bar = document.createElement('div
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ make audio viylation reacts to the beat and audio