From d7032338a56d976b8698ad9566e907e061edda60 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Wed, 4 Mar 2026 17:07:42 +0000
Subject: [PATCH] feat: add FFT Audio Analyzer tool for microphone
 visualization

---
 README.md                            |   7 +
 src/components/Sidebar.vue           |   1 +
 src/components/tools/FftAnalyzer.vue | 427 +++++++++++++++++++++++++++
 src/router/index.js                  |   6 +
 4 files changed, 441 insertions(+)
 create mode 100644 src/components/tools/FftAnalyzer.vue

diff --git a/README.md b/README.md
index f3665bc..369d105 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,13 @@ Generate precise audio frequencies directly in the browser.
 - **Presets:** Quick access to common frequencies like 440 Hz (A4) and 528 Hz.
 - **Safe:** Smooth volume ramping to protect against audio clicking.
 
+### 🎙️ FFT Audio Analyzer
+Visualize audio signals from your microphone in real-time.
+- **Local Processing:** Utilizes the Web Audio API to process sound locally; no audio leaves your device.
+- **Adjustable Resolution:** Modify the FFT size (Fast Fourier Transform resolution) for higher fidelity or speed.
+- **Smoothing Controls:** Adjust the temporal smoothing parameter for fluid visualizations.
+- **Live Canvas Rendering:** Silky smooth 60fps frame rate via requestAnimationFrame.
+
 ---
 
 ## Chrome Extension 🧩
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e70feef..a5dd347 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -16,6 +16,7 @@ defineProps({
       <router-link to="/qr-scanner" class="nav-item" v-ripple>QR Scanner</router-link>
       <router-link to="/qr-code" class="nav-item" v-ripple>QR Code</router-link>
       <router-link to="/tone-generator" class="nav-item" v-ripple>Tone Generator</router-link>
+      <router-link to="/fft-analyzer" class="nav-item" v-ripple>FFT Analyzer</router-link>
     </nav>
   </aside>
 </template>
diff --git a/src/components/tools/FftAnalyzer.vue b/src/components/tools/FftAnalyzer.vue
new file mode 100644
index 0000000..ef22952
--- /dev/null
+++ b/src/components/tools/FftAnalyzer.vue
@@ -0,0 +1,427 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { Mic, MicOff, Settings, Activity } from 'lucide-vue-next'
+
+const isListening = ref(false)
+const hasError = ref(false)
+const errorMessage = ref('')
+const canvasRef = ref(null)
+
+// Analyzer Settings
+const fftSize = ref('2048')
+const smoothingTimeConstant = ref(0.8)
+
+const fftOptions = [
+  { value: '256', label: 'Very Low (256/Fast)' },
+  { value: '512', label: 'Low (512)' },
+  { value: '1024', label: 'Medium (1024)' },
+  { value: '2048', label: 'High (2048)' },
+  { value: '4096', label: 'Ultra (4096)' },
+  { value: '8192', label: 'Max (8192/Slow)' }
+]
+
+let audioContext = null
+let analyser = null
+let microphone = null
+let dataArray = null
+let animationId = null
+let canvasCtx = null
+
+const initAudio = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: false,
+        autoGainControl: false,
+        noiseSuppression: false
+      }
+    })
+
+    // Initialize Audio Context
+    audioContext = new (window.AudioContext || window.webkitAudioContext)()
+    analyser = audioContext.createAnalyser()
+
+    // Apply Settings
+    analyser.fftSize = parseInt(fftSize.value, 10)
+    analyser.smoothingTimeConstant = smoothingTimeConstant.value
+
+    microphone = audioContext.createMediaStreamSource(stream)
+    microphone.connect(analyser)
+
+    // Buffer for data
+    const bufferLength = analyser.frequencyBinCount
+    dataArray = new Uint8Array(bufferLength)
+
+    if (canvasRef.value) {
+      canvasCtx = canvasRef.value.getContext('2d')
+    }
+
+    isListening.value = true
+    hasError.value = false
+    draw()
+  } catch (err) {
+    console.error('Error accessing microphone:', err)
+    hasError.value = true
+    errorMessage.value = 'Could not access the microphone. Please check your system permissions.'
+    isListening.value = false
+  }
+}
+
+const stopAudio = () => {
+  isListening.value = false
+
+  if (animationId) {
+    cancelAnimationFrame(animationId)
+    animationId = null
+  }
+
+  if (microphone) {
+    microphone.disconnect()
+    microphone.mediaStream.getTracks().forEach(track => track.stop())
+    microphone = null
+  }
+
+  if (analyser) {
+    analyser.disconnect()
+    analyser = null
+  }
+
+  if (audioContext) {
+    audioContext.close()
+    audioContext = null
+  }
+
+  // Clear Canvas
+  if (canvasCtx && canvasRef.value) {
+    canvasCtx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
+  }
+}
+
+const toggleListen = () => {
+  if (isListening.value) {
+    stopAudio()
+  } else {
+    initAudio()
+  }
+}
+
+const draw = () => {
+  if (!isListening.value || !canvasRef.value || !canvasCtx || !analyser) return
+
+  animationId = requestAnimationFrame(draw)
+
+  const width = canvasRef.value.width
+  const height = canvasRef.value.height
+
+  analyser.getByteFrequencyData(dataArray)
+
+  // Clear canvas for next frame
+  canvasCtx.clearRect(0, 0, width, height)
+
+  const bufferLength = analyser.frequencyBinCount
+  const barWidth = (width / bufferLength) * 2.5 // scale factor to look nicer
+  let barHeight
+  let x = 0
+
+  for (let i = 0; i < bufferLength; i++) {
+    barHeight = dataArray[i]
+
+    // Calculate color based on height/frequency
+    // We use a CSS variable mapped to RGB or a fallback gradient
+    const r = barHeight + (25 * (i/bufferLength))
+    const g = 250 * (i/bufferLength)
+    const b = 250 - (barHeight/2)
+
+    canvasCtx.fillStyle = `rgb(${r},${g},${b})`
+    // Draw from bottom up
+    canvasCtx.fillRect(x, height - barHeight, barWidth, barHeight)
+
+    x += barWidth + 1 // Add 1px gap between bars
+  }
+}
+
+// Watchers for live updating settings without needing a restart if already running
+watch(fftSize, (newVal) => {
+  if (analyser) {
+    analyser.fftSize = parseInt(newVal, 10)
+    dataArray = new Uint8Array(analyser.frequencyBinCount) // Recreate array with new size
+  }
+})
+
+watch(smoothingTimeConstant, (newVal) => {
+  if (analyser) {
+    analyser.smoothingTimeConstant = newVal
+  }
+})
+
+const handleResize = () => {
+  if (canvasRef.value) {
+    // Make canvas responsive to its container width
+    const container = canvasRef.value.parentElement
+    canvasRef.value.width = container.clientWidth
+    canvasRef.value.height = 300 // Fixed height or could be dynamic
+  }
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  stopAudio()
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<template>
+  <div class="tool-container full-width">
+    <div class="tool-panel">
+      <div class="panel-header">
+        <h2 class="tool-title">FFT Audio Analyzer</h2>
+      </div>
+
+      <div class="fft-layout">
+        <div class="canvas-container">
+          <canvas ref="canvasRef"></canvas>
+          <div class="empty-state" v-if="!isListening && !hasError">
+            <Activity size="48" class="pulse-icon" />
+            <p>Click start to visualize your microphone audio</p>
+          </div>
+          <div class="error-state" v-if="hasError">
+            <p class="error-msg">{{ errorMessage }}</p>
+          </div>
+        </div>
+
+        <div class="controls-section">
+          <!-- Main Action -->
+          <div class="action-row">
+            <button
+              class="listen-btn"
+              :class="{ 'is-active': isListening }"
+              @click="toggleListen"
+              v-ripple
+            >
+              <template v-if="!isListening">
+                <Mic size="24" />
+                <span>Start Listening</span>
+              </template>
+              <template v-else>
+                <MicOff size="24" />
+                <span>Stop Listening</span>
+              </template>
+            </button>
+          </div>
+
+          <!-- Settings -->
+          <div class="settings-grid">
+            <div class="control-group">
+              <label>FFT Size (Resolution)</label>
+              <select v-model="fftSize" class="select-input">
+                <option v-for="opt in fftOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
+              </select>
+            </div>
+
+            <div class="control-group">
+              <label>
+                Smoothing
+                <span class="value-readout">{{ smoothingTimeConstant.toFixed(2) }}</span>
+              </label>
+              <input
+                type="range"
+                class="slider"
+                v-model.number="smoothingTimeConstant"
+                min="0"
+                max="0.99"
+                step="0.01"
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fft-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.canvas-container {
+  width: 100%;
+  height: 300px;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid var(--panel-border);
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+:global(:root[data-theme="light"]) .canvas-container {
+  background: rgba(15, 23, 42, 0.05); /* Slight dark tint to make neon colors pop in light mode */
+  border-color: rgba(15, 23, 42, 0.1);
+  box-shadow: inset 0 2px 10px rgba(15, 23, 42, 0.05);
+}
+
+canvas {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  /* Prevent interaction so clicks pass down if needed */
+  pointer-events: none;
+}
+
+.empty-state {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: var(--text-muted);
+}
+
+.pulse-icon {
+  opacity: 0.5;
+  animation: idlePulse 3s ease-in-out infinite;
+}
+
+@keyframes idlePulse {
+  0% { transform: scale(0.9); opacity: 0.3; }
+  50% { transform: scale(1.1); opacity: 0.6; }
+  100% { transform: scale(0.9); opacity: 0.3; }
+}
+
+.error-state {
+  position: absolute;
+  padding: 1rem;
+  text-align: center;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 8px;
+  color: #ef4444;
+}
+
+.controls-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+@media (max-width: 640px) {
+  .controls-section {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+.action-row {
+  display: flex;
+  justify-content: center;
+}
+
+.listen-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: var(--primary-accent);
+  color: #fff;
+  border: none;
+  border-radius: 30px;
+  padding: 1rem 3rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(var(--primary-accent-rgb), 0.3);
+  width: 100%;
+  max-width: 300px;
+}
+
+.listen-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(var(--primary-accent-rgb), 0.4);
+}
+
+.listen-btn.is-active {
+  background: #ef4444; /* red for stop */
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+
+.listen-btn.is-active:hover {
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.control-group label {
+  font-weight: bold;
+  color: var(--text-strong);
+  display: flex;
+  justify-content: space-between;
+}
+
+.value-readout {
+  color: var(--primary-accent);
+  font-family: monospace;
+}
+
+/* Slider Styles */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--toggle-border);
+  border-radius: 5px;
+  outline: none;
+  margin-top: 0.5rem;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-accent);
+  cursor: pointer;
+  transition: transform 0.1s;
+  box-shadow: 0 0 10px var(--primary-accent);
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 237206f..8384d03 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import UrlCleaner from '../components/tools/UrlCleaner.vue'
 import QrScanner from '../components/tools/QrScanner.vue'
 import QrCode from '../components/tools/QrCode.vue'
 import ToneGenerator from '../components/tools/ToneGenerator.vue'
+import FftAnalyzer from '../components/tools/FftAnalyzer.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'
 
 const routes = [
@@ -48,6 +49,11 @@ const routes = [
     path: '/tone-generator',
     name: 'ToneGenerator',
     component: ToneGenerator
+  },
+  {
+    path: '/fft-analyzer',
+    name: 'FftAnalyzer',
+    component: FftAnalyzer
   }
 ]