index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>BrowserEQ v2 - Hear Better</title> 8 <!-- Google Font imports --> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link 12 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" 13 rel="stylesheet"> 14 15 <!-- External stylesheet --> 16 <link rel="stylesheet" href="styles.css"> 17 </head> 18 19 <body> 20 <!-- Add the floating language toggle buttons --> 21 <div class="floating-language-toggle" id="floating-lang-toggle"> 22 <button onclick="setLanguage('en')" class="active" id="floating-en-btn">EN</button> 23 <button onclick="setLanguage('de')" id="floating-de-btn">DE</button> 24 </div> 25 26 <header> 27 <div class="wave-decoration"></div> 28 <div class="container"> 29 <div class="header-content"> 30 <div class="language-toggle"> 31 <button onclick="setLanguage('en')" class="active" id="en-btn">English</button> 32 <button onclick="setLanguage('de')" id="de-btn">Deutsch</button> 33 </div> 34 <div class="logo-container"> 35 <img src="images/logo.png" alt="BrowserEQ Logo" class="logo"> 36 </div> 37 <div class="subtitle-container"> 38 <div class="en"> 39 <p class="mono-subtitle">« Audio Enhancement for Your Browser »</p> 40 </div> 41 <div class="de"> 42 <p class="mono-subtitle">« Audio-Verbesserung für deinen Browser »</p> 43 </div> 44 </div> 45 <div class="github-buttons"> 46 <a href="https://github.com/berraknil/BrowserEQ-V2" target="_blank">View on GitHub</a> 47 <a href="https://github.com/berraknil/BrowserEQ-V2/releases/latest" target="_blank">Download Latest 48 Version</a> 49 </div> 50 </div> 51 </div> 52 </header> 53 54 <div class="tab-container"> 55 <div class="tab-buttons container"> 56 <button class="tab-button active" onclick="openTab(event, 'user-guide-tab')">User Guide</button> 57 <button class="tab-button" onclick="openTab(event, 'developer-guide-tab')">Developer Guide</button> 58 <button class="tab-button" onclick="openTab(event, 'examples-tab')">Examples</button> 59 <button class="tab-button" onclick="openTab(event, 'contributing-tab')">Contributing</button> 60 </div> 61 </div> 62 63 <main class="container"> 64 <!-- User Guide Tab --> 65 <div id="user-guide-tab" class="tab-content active"> 66 <section id="intro"> 67 <div class="en"> 68 <p class="intro">BrowserEQ is a powerful audio equalizer extension that enhances your listening 69 experience by 70 giving you complete control over how audio sounds in your web browser. Whether you're dealing 71 with 72 challenging audio on video calls, enjoying music, or need to make content more accessible for 73 your 74 hearing needs, BrowserEQ puts professional audio tools at your fingertips.</p> 75 </div> 76 <div class="de"> 77 <p class="intro">BrowserEQ ist eine leistungsstarke Audio-Equalizer-Erweiterung, die dein 78 Hörerlebnis 79 verbessert, 80 indem sie dir die vollständige Kontrolle darüber gibt, wie Audio in deinem Webbrowser klingt. 81 Egal, 82 ob du mit herausforderndem Audio bei Videoanrufen zu tun hast, Musik genießt oder Inhalte für 83 deine 84 Hörbedürfnisse zugänglicher machen musst, BrowserEQ stellt dir professionelle Audio-Tools zur 85 Verfügung.</p> 86 </div> 87 88 <!-- Screenshot container --> 89 <figure class="screenshot-container"> 90 <img src="screenshots/browsereq-main.png" alt="BrowserEQ V2 Interface" class="screenshot"> 91 <figcaption class="en">BrowserEQ V2 interface with all its audio enhancement controls</figcaption> 92 <figcaption class="de">BrowserEQ V2-Oberfläche mit allen Audio-Verbesserungssteuerungen</figcaption> 93 </figure> 94 </section> 95 96 <section id="installation"> 97 <h2 class="en">Installation</h2> 98 <h2 class="de">Installation</h2> 99 100 <div class="en"> 101 <p>There are two ways to install BrowserEQ:</p> 102 103 <div class="installation-options"> 104 105 106 <div class="installation-option"> 107 <h3>Manual Installation (From GitHub)</h3> 108 <ol> 109 <li>Go to the <a href="https://github.com/berraknil/BrowserEQ-V2/releases/latest" 110 target="_blank">latest release</a> on GitHub</li> 111 <li>Download the <code>browsereq-v2.zip</code> file and extract it to a folder on your 112 computer</li> 113 <li>Open Chrome and navigate to <code>chrome://extensions</code></li> 114 <li>Enable "Developer mode" by toggling the switch in the top-right corner</li> 115 <li>Click the "Load unpacked" button</li> 116 <li>Select the extracted folder containing the extension files</li> 117 </ol> 118 <div class="note-box"> 119 <p><strong>Note:</strong> When installing extensions manually, you'll need to update 120 them manually as well. Check the GitHub repository regularly for new releases.</p> 121 </div> 122 </div> 123 124 <div class="installation-option"> 125 <h3>Chrome Web Store</h3> 126 <div class="warning-box"> 127 <p><strong>⚠️ Coming Soon:</strong> The extension is currently in the Chrome Web Store 128 approval process and is not yet available for direct installation from there. Please 129 use the GitHub installation method for now.</p> 130 </div> 131 <ol> 132 <li>Navigate to the BrowserEQ page on Chrome Web Store <span class="muted">(coming 133 soon)</span></li> 134 <li>Click the "Add to Chrome" button</li> 135 <li>Confirm by clicking "Add extension" in the popup</li> 136 </ol> 137 </div> 138 </div> 139 140 <h3>After Installation</h3> 141 <p>Once installed, you'll see the BrowserEQ icon in your browser toolbar. Click it to open the 142 equalizer interface.</p> 143 </div> 144 145 <div class="de"> 146 <p>Es gibt zwei Möglichkeiten, BrowserEQ zu installieren:</p> 147 148 <div class="installation-options"> 149 150 151 <div class="installation-option"> 152 <h3>Manuelle Installation (von GitHub)</h3> 153 <ol> 154 <li>Gehe zur <a href="https://github.com/berraknil/BrowserEQ-V2/releases/latest" 155 target="_blank">neuesten Version</a> auf GitHub</li> 156 <li>Lade die Datei <code>browsereq-v2.zip</code> herunter und entpacke sie in einen 157 Ordner auf deinem Computer</li> 158 <li>Öffne Chrome und navigiere zu <code>chrome://extensions</code></li> 159 <li>Aktiviere den "Entwicklermodus" durch Umschalten des Schalters in der oberen rechten 160 Ecke</li> 161 <li>Klicke auf die Schaltfläche "Entpackte Erweiterung laden"</li> 162 <li>Wähle den entpackten Ordner mit den Erweiterungsdateien aus</li> 163 </ol> 164 <div class="note-box"> 165 <p><strong>Hinweis:</strong> Bei manuell installierten Erweiterungen musst du diese auch 166 manuell aktualisieren. Überprüfe regelmäßig das GitHub-Repository auf neue 167 Versionen.</p> 168 </div> 169 </div> 170 <div class="installation-option"> 171 <h3>Chrome Web Store</h3> 172 <div class="warning-box"> 173 <p><strong>⚠️ Bald verfügbar:</strong> Die Erweiterung befindet sich derzeit im 174 Genehmigungsprozess des Chrome Web Stores und ist noch nicht direkt von dort 175 installierbar. Bitte nutze vorerst die GitHub-Installationsmethode.</p> 176 </div> 177 <ol> 178 <li>Gehe zur BrowserEQ-Seite im Chrome Web Store <span class="muted">(bald 179 verfügbar)</span></li> 180 <li>Klicke auf die Schaltfläche "Zu Chrome hinzufügen"</li> 181 <li>Bestätige, indem du im Popup auf "Erweiterung hinzufügen" klickst</li> 182 </ol> 183 </div> 184 </div> 185 186 <h3>Nach der Installation</h3> 187 <p>Nach der Installation siehst du das BrowserEQ-Symbol in der Symbolleiste deines Browsers. Klicke 188 darauf, um die Equalizer-Oberfläche zu öffnen.</p> 189 </div> 190 </section> 191 192 <section id="features"> 193 <h2 class="en">Features</h2> 194 <h2 class="de">Funktionen</h2> 195 <div class="features-grid"> 196 <div class="feature-card"> 197 <h3 class="en">Intuitive Interface</h3> 198 <h3 class="de">Intuitive Benutzeroberfläche</h3> 199 <p class="en">Simple controls with both full and compact modes</p> 200 <p class="de">Einfache Steuerung mit sowohl vollständigen als auch kompakten Modi</p> 201 </div> 202 <div class="feature-card"> 203 <h3 class="en">6-Band EQ</h3> 204 <h3 class="de">6-Band EQ</h3> 205 <p class="en">Complete equalization with low pass, high pass, band pass, peaking, and shelf 206 filters 207 </p> 208 <p class="de">Komplette Entzerrung mit Tiefpass-, Hochpass-, Bandpass-, Peaking- und 209 Shelf-Filtern 210 </p> 211 </div> 212 <div class="feature-card"> 213 <h3 class="en">Specialized Presets</h3> 214 <h3 class="de">Spezialisierte Voreinstellungen</h3> 215 <p class="en">Purpose-built sound profiles for voice calls, music, podcasts, and more</p> 216 <p class="de">Zweckgebundene Klangprofile für Sprachanrufe, Musik, Podcasts und mehr</p> 217 </div> 218 <div class="feature-card"> 219 <h3 class="en">Audio Capture</h3> 220 <h3 class="de">Audioaufnahme</h3> 221 <p class="en">Record audio with your current EQ settings applied</p> 222 <p class="de">Nimm Audio mit deinen aktuellen EQ-Einstellungen auf</p> 223 </div> 224 <div class="feature-card"> 225 <h3 class="en">Accessibility First</h3> 226 <h3 class="de">Barrierefreiheit an erster Stelle</h3> 227 <p class="en">Designed to accommodate various hearing needs</p> 228 <p class="de">Entwickelt, um verschiedenen Hörbedürfnissen gerecht zu werden</p> 229 </div> 230 <div class="feature-card"> 231 <h3 class="en">Real-time Processing</h3> 232 <h3 class="de">Echtzeit-Verarbeitung</h3> 233 <p class="en">Hear changes to your audio immediately as you adjust settings</p> 234 <p class="de">Höre Änderungen an deinem Audio sofort, wenn du Einstellungen anpasst</p> 235 </div> 236 </div> 237 </section> 238 239 <section id="user-guide"> 240 <h2 class="en">Getting Started</h2> 241 <h2 class="de">Erste Schritte</h2> 242 243 <div class="en"> 244 <p>After installation, you'll see the BrowserEQ icon in your 245 browser 246 toolbar. Click it to open the equalizer panel.</p> 247 248 <h3>Basic Controls</h3> 249 <ol> 250 <li><strong>Preset Selection</strong>: Choose from ready-made sound profiles</li> 251 <li><strong>Volume Control</strong>: Adjust the "Main" slider to control overall volume</li> 252 <li><strong>Mute Button</strong>: Quickly silence all audio</li> 253 <li><strong>Transport Controls</strong>: Control audio playback and recording</li> 254 <li><strong>Mono/Stereo Toggle</strong>: Switch between stereo (normal) and mono (combines left 255 and 256 right channels)</li> 257 <li><strong>Compact Mode Toggle</strong>: Switch between full and minimal interface</li> 258 </ol> 259 260 <h3>Understanding Filters</h3> 261 <p>BrowserEQ gives you six different filters to shape your sound:</p> 262 <ul> 263 <li><strong>High Pass</strong>: Removes low rumbling sounds (like air conditioners, traffic 264 noise) 265 </li> 266 <li><strong>Low Pass</strong>: Removes high-pitched sounds (like hiss, sibilance)</li> 267 <li><strong>Band Pass</strong>: Lets you focus on just middle frequencies (great for voices) 268 </li> 269 <li><strong>Low Shelf</strong>: Adjusts the bass level without cutting it completely</li> 270 <li><strong>High Shelf</strong>: Adjusts the treble/high frequencies</li> 271 <li><strong>Peaking</strong>: Creates precise adjustments to specific frequency ranges</li> 272 </ul> 273 <p>Each filter has an on/off toggle, a frequency control (which sound frequencies to affect), and a 274 secondary control (either Resonance, Bandwidth, or Gain).</p> 275 </div> 276 277 <div class="de"> 278 <p>Nach der Installation, siehst du das BrowserEQ-Symbol in 279 deiner 280 Browser-Symbolleiste. Klicke darauf, um das Equalizer-Panel zu öffnen.</p> 281 282 <h3>Grundlegende Steuerung</h3> 283 <ol> 284 <li><strong>Voreinstellungsauswahl</strong>: Wähle aus vorgefertigten Klangprofilen</li> 285 <li><strong>Lautstärkeregelung</strong>: Passe den "Main"-Schieberegler an, um die 286 Gesamtlautstärke 287 zu steuern</li> 288 <li><strong>Stummschalt-Button</strong>: Schalte schnell alle Audioausgaben stumm</li> 289 <li><strong>Transportsteuerung</strong>: Steuere die Audiowiedergabe und -aufnahme</li> 290 <li><strong>Mono/Stereo-Umschalter</strong>: Wechsle zwischen Stereo (normal) und Mono 291 (kombiniert 292 linke und rechte Kanäle)</li> 293 <li><strong>Kompaktmodus-Umschalter</strong>: Wechsle zwischen vollständiger und minimaler 294 Benutzeroberfläche</li> 295 </ol> 296 297 <h3>Filter verstehen</h3> 298 <p>BrowserEQ bietet dir sechs verschiedene Filter, um deinen Klang zu formen:</p> 299 <ul> 300 <li><strong>Hochpass</strong>: Entfernt tiefe Rumpelgeräusche (wie Klimaanlagen, Verkehrslärm) 301 </li> 302 <li><strong>Tiefpass</strong>: Entfernt hochfrequente Geräusche (wie Zischen, Zischlaute)</li> 303 <li><strong>Bandpass</strong>: Ermöglicht es dir, dich nur auf mittlere Frequenzen zu 304 konzentrieren 305 (ideal für Stimmen)</li> 306 <li><strong>Tiefen-Shelf</strong>: Passt den Basspegel an, ohne ihn vollständig zu entfernen 307 </li> 308 <li><strong>Höhen-Shelf</strong>: Passt die Höhenfrequenzen an</li> 309 <li><strong>Peaking</strong>: Ermöglicht präzise Anpassungen an bestimmten Frequenzbereichen 310 </li> 311 </ul> 312 <p>Jeder Filter hat einen Ein-/Ausschalter, eine Frequenzregelung (welche Frequenzen beeinflusst 313 werden 314 sollen) und eine sekundäre Regelung (entweder Resonanz, Bandbreite oder Verstärkung).</p> 315 </div> 316 </section> 317 318 <section id="accessibility"> 319 <h2 class="en">Accessibility Features</h2> 320 <h2 class="de">Barrierefreiheitsfunktionen</h2> 321 322 <div class="en"> 323 <p>BrowserEQ was designed with accessibility in mind:</p> 324 <ul> 325 <li><strong>Hearing Accessibility</strong>: Customize audio to accommodate hearing sensitivities 326 or 327 impairments</li> 328 <li><strong>Auditory Processing</strong>: Enhance clarity by filtering out distracting 329 frequencies 330 </li> 331 <li><strong>Sensory Sensitivities</strong>: Reduce frequencies that trigger discomfort</li> 332 <li><strong>Audio Balance</strong>: Correct for imbalanced audio in content</li> 333 </ul> 334 </div> 335 336 <div class="de"> 337 <p>BrowserEQ wurde mit Blick auf Barrierefreiheit entwickelt:</p> 338 <ul> 339 <li><strong>Hörzugänglichkeit</strong>: Passe Audio an, um Hörsensibilitäten oder 340 -beeinträchtigungen gerecht zu werden</li> 341 <li><strong>Auditive Verarbeitung</strong>: Verbessere die Klarheit, indem du ablenkende 342 Frequenzen 343 herausfilterst</li> 344 <li><strong>Sensorische Empfindlichkeiten</strong>: Reduziere Frequenzen, die Unbehagen auslösen 345 </li> 346 <li><strong>Audiobalance</strong>: Korrigiere unausgewogenes Audio in Inhalten</li> 347 </ul> 348 </div> 349 </section> 350 </div> 351 352 <!-- Developer Guide Tab --> 353 <div id="developer-guide-tab" class="tab-content"> 354 <section id="dev-introduction"> 355 <div class="en"> 356 <h2>Developer Guide</h2> 357 <p>This guide provides detailed information for developers who want to understand, modify, or 358 contribute to the BrowserEQ project.</p> 359 </div> 360 <div class="de"> 361 <h2>Entwicklerhandbuch</h2> 362 <p>Dieses Handbuch bietet detaillierte Informationen für Entwickler, die das BrowserEQ-Projekt 363 verstehen, modifizieren oder dazu beitragen möchten.</p> 364 </div> 365 </section> 366 367 <section id="architecture"> 368 <h2 class="en">Architecture Overview</h2> 369 <h2 class="de">Architekturübersicht</h2> 370 371 <div class="en"> 372 <p>BrowserEQ uses a Vue 3 frontend with the Composition API, combined with Web Audio API for audio 373 processing. The extension follows a component-based architecture:</p> 374 <div class="code-block"> 375 <pre>UI Components (Vue) → Audio Logic (TypeScript) → Web Audio API → Browser Audio</pre> 376 </div> 377 378 <h3>Key Components</h3> 379 <ol> 380 <li><strong>Popup.vue</strong>: The main component that renders the user interface and 381 orchestrates the other components.</li> 382 <li><strong>PresetManager.vue</strong>: Handles preset selection and management.</li> 383 <li><strong>Strip.vue</strong>: Represents a single filter strip with its controls.</li> 384 <li><strong>Slider.vue & Toggle.vue</strong>: Reusable UI controls.</li> 385 </ol> 386 387 <h3>Core Logic Modules</h3> 388 <ol> 389 <li><strong>audioProcessing.ts</strong>: Contains the Web Audio API implementation.</li> 390 <li><strong>EQValues.ts</strong>: Defines the default presets.</li> 391 <li><strong>presetStorage.ts</strong>: Manages storing preferences in localStorage.</li> 392 <li><strong>recordingService.ts</strong>: Handles audio recording functionality.</li> 393 </ol> 394 </div> 395 396 <div class="de"> 397 <p>BrowserEQ verwendet ein Vue 3 Frontend mit der Composition API, kombiniert mit der Web Audio API 398 für die Audioverarbeitung. Die Erweiterung folgt einer komponentenbasierten Architektur:</p> 399 <div class="code-block"> 400 <pre>UI-Komponenten (Vue) → Audio-Logik (TypeScript) → Web Audio API → Browser-Audio</pre> 401 </div> 402 403 <h3>Hauptkomponenten</h3> 404 <ol> 405 <li><strong>Popup.vue</strong>: Die Hauptkomponente, die die Benutzeroberfläche rendert und die 406 anderen Komponenten orchestriert.</li> 407 <li><strong>PresetManager.vue</strong>: Verwaltet die Voreinstellungsauswahl und -verwaltung. 408 </li> 409 <li><strong>Strip.vue</strong>: Repräsentiert einen einzelnen Filterstreifen mit seinen 410 Steuerelementen.</li> 411 <li><strong>Slider.vue & Toggle.vue</strong>: Wiederverwendbare UI-Steuerelemente.</li> 412 </ol> 413 414 <h3>Kern-Logikmodule</h3> 415 <ol> 416 <li><strong>audioProcessing.ts</strong>: Enthält die Web Audio API-Implementierung.</li> 417 <li><strong>EQValues.ts</strong>: Definiert die Standardvoreinstellungen.</li> 418 <li><strong>presetStorage.ts</strong>: Verwaltet die Speicherung von Einstellungen im 419 localStorage.</li> 420 <li><strong>recordingService.ts</strong>: Handhabt die Audio-Aufnahmefunktionalität.</li> 421 </ol> 422 </div> 423 </section> 424 425 <section id="data-flow"> 426 <h2 class="en">Data Flow</h2> 427 <h2 class="de">Datenfluss</h2> 428 429 <div class="en"> 430 <ol> 431 <li>User interacts with UI components (sliders, toggles, buttons)</li> 432 <li>Component emits events to parent (Popup.vue)</li> 433 <li>Popup.vue updates the current preset state</li> 434 <li>Audio processing logic applies changes to Web Audio nodes</li> 435 </ol> 436 437 <h3>Key Interfaces</h3> 438 <p>The core data structures are defined in several places:</p> 439 <div class="code-block"> 440 <pre>// EQ Preset structure 441 interface EQPreset { 442 mainOut: { 443 gain: number; 444 muted: boolean; 445 }; 446 filters: { 447 [key: string]: EQFilter; 448 }; 449 } 450 451 // Individual filter structure 452 interface EQFilter { 453 name: string; 454 type: BiquadFilterType; // Web Audio API filter type 455 enabled: boolean; 456 frequency: { 457 value: number; 458 }; 459 Q?: { 460 name: string; 461 value: number; 462 }; 463 gain?: { 464 value: number; 465 }; 466 }</pre> 467 </div> 468 </div> 469 470 <div class="de"> 471 <!-- German translation equivalent to English content above --> 472 <ol> 473 <li>Benutzer interagiert mit UI-Komponenten (Schieberegler, Umschalter, Buttons)</li> 474 <li>Komponente sendet Ereignisse an übergeordnetes Element (Popup.vue)</li> 475 <li>Popup.vue aktualisiert den aktuellen Voreinstellungsstatus</li> 476 <li>Audio-Verarbeitungslogik wendet Änderungen auf Web Audio-Knoten an</li> 477 </ol> 478 479 <h3>Wichtige Schnittstellen</h3> 480 <p>Die Kerndatenstrukturen sind an mehreren Stellen definiert:</p> 481 <div class="code-block"> 482 <pre>// EQ-Voreinstellungsstruktur 483 interface EQPreset { 484 mainOut: { 485 gain: number; 486 muted: boolean; 487 }; 488 filters: { 489 [key: string]: EQFilter; 490 }; 491 } 492 493 // Individuelle Filterstruktur 494 interface EQFilter { 495 name: string; 496 type: BiquadFilterType; // Web Audio API Filtertyp 497 enabled: boolean; 498 frequency: { 499 value: number; 500 }; 501 Q?: { 502 name: string; 503 value: number; 504 }; 505 gain?: { 506 value: number; 507 }; 508 }</pre> 509 </div> 510 </div> 511 </section> 512 513 <section id="audio-processing"> 514 <h2 class="en">Audio Processing Pipeline</h2> 515 <h2 class="de">Audio-Verarbeitungspipeline</h2> 516 517 <div class="en"> 518 <ol> 519 <li><strong>Capture</strong>: The extension captures tab audio using 520 <code>chrome.tabCapture</code>. 521 </li> 522 <li><strong>Source Creation</strong>: A MediaStreamAudioSourceNode is created from the capture. 523 </li> 524 <li><strong>Filter Chain</strong>: Audio is routed through various BiquadFilterNode instances 525 based on user settings.</li> 526 <li><strong>Gain Node</strong>: Final processing includes volume adjustment through a GainNode. 527 </li> 528 <li><strong>Output</strong>: Processed audio is sent to the AudioContext destination.</li> 529 </ol> 530 531 <div class="code-block"> 532 <pre>MediaStreamSource → [Enabled Filters] → GainNode → AudioContext.destination</pre> 533 </div> 534 535 <h3>Filter Connectivity Logic</h3> 536 <p>The system dynamically connects and disconnects filters when users toggle them:</p> 537 <ol> 538 <li>When enabling a filter, it's inserted into the chain at the appropriate point.</li> 539 <li>When disabling a filter, it's bypassed, and the chain is reconnected.</li> 540 <li>The <code>lastFilter</code> reference always points to the last active filter in the chain. 541 </li> 542 </ol> 543 </div> 544 545 <div class="de"> 546 <ol> 547 <li><strong>Erfassung</strong>: Die Erweiterung erfasst Tab-Audio mit 548 <code>chrome.tabCapture</code>. 549 </li> 550 <li><strong>Quellenerstellung</strong>: Ein MediaStreamAudioSourceNode wird aus der Erfassung 551 erstellt.</li> 552 <li><strong>Filterkette</strong>: Audio wird durch verschiedene BiquadFilterNode-Instanzen 553 basierend auf Benutzereinstellungen geleitet.</li> 554 <li><strong>Verstärkungsknoten</strong>: Abschließende Verarbeitung umfasst Lautstärkeanpassung 555 durch einen GainNode.</li> 556 <li><strong>Ausgabe</strong>: Verarbeitetes Audio wird an das AudioContext-Ziel gesendet.</li> 557 </ol> 558 559 <div class="code-block"> 560 <pre>MediaStreamSource → [Aktivierte Filter] → GainNode → AudioContext.destination</pre> 561 </div> 562 563 <h3>Filterverbindungslogik</h3> 564 <p>Das System verbindet und trennt Filter dynamisch, wenn Benutzer sie umschalten:</p> 565 <ol> 566 <li>Beim Aktivieren eines Filters wird er an der entsprechenden Stelle in die Kette eingefügt. 567 </li> 568 <li>Beim Deaktivieren eines Filters wird er umgangen, und die Kette wird neu verbunden.</li> 569 <li>Die <code>lastFilter</code>-Referenz zeigt immer auf den letzten aktiven Filter in der 570 Kette.</li> 571 </ol> 572 </div> 573 </section> 574 575 <!-- More developer guide sections can be added here --> 576 577 <section id="build-and-test"> 578 <h2 class="en">Build Process</h2> 579 <h2 class="de">Build-Prozess</h2> 580 581 <div class="en"> 582 <p>The project uses Vite for building:</p> 583 <div class="code-block"> 584 <pre># Install dependencies 585 npm install 586 587 # Development build with hot-reload 588 npm run dev 589 590 # Production build 591 npm run build 592 593 # Run tests 594 npm test</pre> 595 </div> 596 597 <h3>Testing</h3> 598 <p>We recommend testing your changes in these scenarios:</p> 599 <ol> 600 <li><strong>Different Content Types</strong>: Test with music, voice calls, videos, etc.</li> 601 <li><strong>Edge Cases</strong>: Test with extreme filter settings and combinations.</li> 602 <li><strong>Performance</strong>: Ensure changes don't cause audio glitches or high CPU usage. 603 </li> 604 </ol> 605 </div> 606 607 <div class="de"> 608 <p>Das Projekt verwendet Vite zum Erstellen:</p> 609 <div class="code-block"> 610 <pre># Abhängigkeiten installieren 611 npm install 612 613 # Entwicklungsbuild mit Hot-Reload 614 npm run dev 615 616 # Produktionsbuild 617 npm run build 618 619 # Tests ausführen 620 npm test</pre> 621 </div> 622 623 <h3>Testen</h3> 624 <p>Wir empfehlen, Ihre Änderungen in diesen Szenarien zu testen:</p> 625 <ol> 626 <li><strong>Verschiedene Inhaltstypen</strong>: Testen Sie mit Musik, Sprachanrufen, Videos usw. 627 </li> 628 <li><strong>Randfälle</strong>: Testen Sie mit extremen Filtereinstellungen und Kombinationen. 629 </li> 630 <li><strong>Leistung</strong>: Stellen Sie sicher, dass Änderungen keine Audioprobleme oder hohe 631 CPU-Auslastung verursachen.</li> 632 </ol> 633 </div> 634 </section> 635 </div> 636 637 <!-- Examples Tab --> 638 <div id="examples-tab" class="tab-content"> 639 <section id="example-intro"> 640 <div class="en"> 641 <h2>BrowserEQ in Action</h2> 642 <p>Watch these examples to see how BrowserEQ can enhance your audio experience in different 643 scenarios.</p> 644 <div class="instruction-box"> 645 <h3>Try It Yourself</h3> 646 <p>After installing BrowserEQ, play these videos and experiment with the relevant presets to 647 hear the difference in real-time. 648 Open the BrowserEQ panel by clicking its icon in your browser toolbar, select an appropriate 649 preset, and adjust the settings 650 as demonstrated in the videos. This hands-on approach will help you better understand how 651 each feature works with actual content.</p> 652 </div> 653 </div> 654 <div class="de"> 655 <h2>BrowserEQ in Aktion</h2> 656 <p>Schau dir diese Beispiele an, um zu sehen, wie BrowserEQ dein Audioerlebnis in verschiedenen 657 Szenarien verbessern kann.</p> 658 <div class="instruction-box"> 659 <h3>Probiere es selbst aus</h3> 660 <p>Nach der Installation von BrowserEQ kannst du diese Videos abspielen und mit den 661 entsprechenden Voreinstellungen 662 experimentieren, um den Unterschied in Echtzeit zu hören. Öffne das BrowserEQ-Panel durch 663 Klicken auf das Symbol 664 in der Browser-Symbolleiste, wähle eine passende Voreinstellung und passe die Einstellungen 665 wie in den Videos gezeigt an. 666 Diese praktische Vorgehensweise wird dir helfen, besser zu verstehen, wie jede Funktion mit 667 tatsächlichen Inhalten funktioniert.</p> 668 </div> 669 </div> 670 </section> 671 672 <section id="video-demonstrations"> 673 <!-- Example 1: Voice Clarity section --> 674 <div class="video-example"> 675 <div class="en"> 676 <h3>Voice Clarity and Noise Reduction</h3> 677 <p>BrowserEQ excels at enhancing voice intelligibility in video conferences, online meetings, 678 and webinars. 679 This demonstration shows how to eliminate background noise, reduce echo, and enhance speech 680 frequencies 681 for crystal-clear communication. Perfect for improving hard-to-hear speakers or using your 682 computer in 683 noisy environments.</p> 684 </div> 685 <div class="de"> 686 <h3>Sprachklarheit und Rauschunterdrückung</h3> 687 <p>BrowserEQ ist hervorragend darin, die Sprachverständlichkeit in Videokonferenzen, 688 Online-Meetings und Webinaren zu verbessern. Diese Demonstration zeigt, wie 689 Hintergrundgeräusche 690 eliminiert, Echo reduziert und Sprachfrequenzen für kristallklare Kommunikation verstärkt 691 werden können. 692 Ideal zur Verbesserung schwer zu hörender Sprecher oder für die Verwendung Ihres Computers 693 in 694 geräuschvollen Umgebungen.</p> 695 </div> 696 <div class="video-container"> 697 <iframe width="560" height="315" src="https://www.youtube.com/embed/NM-zWTU7X-k" 698 title="BrowserEQ Noise Reduction Demo" frameborder="0" 699 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 700 allowfullscreen></iframe> 701 </div> 702 </div> 703 704 <!-- Example 2: Stereo/Mono section --> 705 <div class="video-example"> 706 <div class="en"> 707 <h3>Stereo/Mono Conversion</h3> 708 <p>The Stereo/Mono switch is a powerful accessibility feature that combines left and right audio 709 channels. 710 This demonstration shows how it benefits users with unilateral hearing loss, helps when 711 using a single 712 earbud, and improves audio where stereo separation is too extreme. Learn how to switch 713 between stereo and 714 mono modes, and when each setting is most beneficial for your listening situation.</p> 715 </div> 716 <div class="de"> 717 <h3>Stereo/Mono-Umwandlung</h3> 718 <p>Der Stereo/Mono-Schalter ist eine leistungsstarke Barrierefreiheitsfunktion, die den linken 719 und rechten Audiokanal kombiniert. Diese Demonstration zeigt, wie er Nutzern mit einseitigem 720 Hörverlust 721 hilft, die Nutzung mit nur einem Ohrhörer verbessert und Audio optimiert, bei dem die 722 Stereo-Trennung zu 723 extrem ist. Erfahren Sie, wie man zwischen Stereo- und Mono-Modi wechselt und wann welche 724 Einstellung für 725 Ihre Hörsituation am vorteilhaftesten ist.</p> 726 </div> 727 <div class="video-container"> 728 <iframe width="560" height="315" src="https://www.youtube.com/embed/YwNs1Z0qRY0" 729 title="BrowserEQ Stereo / Mono Demo" frameborder="0" 730 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 731 allowfullscreen></iframe> 732 </div> 733 </div> 734 735 <!-- Example 3: Music Listening and Frequency Adjustment --> 736 <div class="video-example"> 737 <div class="en"> 738 <h3>Music Enhancement and Timbral Control</h3> 739 <p>Transform your music listening experience with BrowserEQ's precise frequency controls. This 740 demonstration shows how 741 to adjust specific frequency ranges to enhance bass response, brighten vocals, or completely 742 reshape the timbral 743 quality of any music. Learn how to create custom sound signatures for different genres, 744 compensate for headphone 745 or speaker deficiencies, and discover new sonic details in your favorite tracks.</p> 746 </div> 747 <div class="de"> 748 <h3>Musikverbesserung und Klangfarbensteuerung</h3> 749 <p>Verwandeln Sie Ihr Musikhörerlebnis mit den präzisen Frequenzreglern von BrowserEQ. Diese 750 Demonstration zeigt, wie 751 man bestimmte Frequenzbereiche anpasst, um die Bassansprache zu verbessern, Gesang 752 aufzuhellen oder die Klangqualität 753 jeder Musik komplett neu zu gestalten. Erfahren Sie, wie Sie maßgeschneiderte 754 Klangsignaturen für verschiedene Genres 755 erstellen, Defizite von Kopfhörern oder Lautsprechern ausgleichen und neue klangliche 756 Details in Ihren 757 Lieblingsstücken entdecken können.</p> 758 </div> 759 <div class="video-container"> 760 <iframe width="560" height="315" src="https://www.youtube.com/embed/sSy2Lat3OdE" 761 title="BrowserEQ Music Enhancement Demo" frameborder="0" 762 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 763 allowfullscreen></iframe> 764 </div> 765 </div> 766 767 768 </section> 769 </div> 770 771 <!-- Contributing Tab --> 772 <div id="contributing-tab" class="tab-content"> 773 <section id="contribute"> 774 <h2 class="en">Contributing to BrowserEQ</h2> 775 <h2 class="de">Beitrag zu BrowserEQ leisten</h2> 776 777 <div class="en"> 778 <p>We welcome contributions to BrowserEQ! There are many ways to contribute, from reporting bugs and 779 improving documentation to adding new features.</p> 780 781 <h3>Bug Reports & Feature Requests</h3> 782 <p>Please use the GitHub issue tracker to report bugs or suggest features. When reporting a bug, 783 include:</p> 784 <ul> 785 <li>Your browser version</li> 786 <li>BrowserEQ version</li> 787 <li>Steps to reproduce the issue</li> 788 <li>Expected vs actual behavior</li> 789 <li>Any relevant screenshots or console logs</li> 790 </ul> 791 792 <h3>Development Process</h3> 793 <ol> 794 <li>Fork the repository</li> 795 <li>Create a new branch for your feature (<code>git checkout -b feature/amazing-feature</code>) 796 </li> 797 <li>Make your changes</li> 798 <li>Add tests if applicable</li> 799 <li>Commit your changes (<code>git commit -m 'Add some amazing feature'</code>)</li> 800 <li>Push to the branch (<code>git push origin feature/amazing-feature</code>)</li> 801 <li>Create a Pull Request</li> 802 </ol> 803 804 <h3>Code Style Guidelines</h3> 805 <ul> 806 <li>Follow the existing code style</li> 807 <li>Use TypeScript's type system</li> 808 <li>Write comments for complex logic</li> 809 <li>Use descriptive variable and function names</li> 810 </ul> 811 812 <h3>License</h3> 813 <p>By contributing to BrowserEQ, you agree that your contributions will be licensed under the 814 project's BrowserEQ Strong Copyleft License. This license ensures that the software and all 815 derivatives remain 816 perpetually free and open source, and prohibits any commercial exploitation or future 817 relicensing.</p> 818 </div> 819 820 <div class="de"> 821 <p>Wir begrüßen Beiträge zu BrowserEQ! Es gibt viele Möglichkeiten, einen Beitrag zu leisten, von 822 der Meldung von Fehlern und der Verbesserung der Dokumentation bis hin zum Hinzufügen neuer 823 Funktionen.</p> 824 825 <h3>Fehlermeldungen & Funktionsanfragen</h3> 826 <p>Bitte verwende den GitHub Issue Tracker, um Fehler zu melden oder Funktionen vorzuschlagen. Bei 827 der Meldung eines Fehlers bitte angeben:</p> 828 <ul> 829 <li>Deine Browser-Version</li> 830 <li>BrowserEQ-Version</li> 831 <li>Schritte zur Reproduktion des Problems</li> 832 <li>Erwartetes vs. tatsächliches Verhalten</li> 833 <li>Alle relevanten Screenshots oder Konsolenprotokolle</li> 834 </ul> 835 836 <h3>Entwicklungsprozess</h3> 837 <ol> 838 <li>Forke das Repository</li> 839 <li>Erstelle einen neuen Branch für deine Funktion 840 (<code>git checkout -b feature/amazing-feature</code>)</li> 841 <li>Nimm deine Änderungen vor</li> 842 <li>Füge Tests hinzu, falls zutreffend</li> 843 <li>Committe deine Änderungen (<code>git commit -m 'Add some amazing feature'</code>)</li> 844 <li>Push in den Branch (<code>git push origin feature/amazing-feature</code>)</li> 845 <li>Erstelle einen Pull Request</li> 846 </ol> 847 848 <h3>Code-Stil-Richtlinien</h3> 849 <ul> 850 <li>Folge dem bestehenden Code-Stil</li> 851 <li>Verwende das Typsystem von TypeScript</li> 852 <li>Schreibe Kommentare für komplexe Logik</li> 853 <li>Verwende beschreibende Variablen- und Funktionsnamen</li> 854 </ul> 855 856 <h3>Lizenz</h3> 857 <p>Durch das Beitragen zu BrowserEQ stimmst du zu, dass deine Beiträge unter der 858 BrowserEQ Strong Copyleft License des Projekts lizenziert werden. Diese Lizenz stellt sicher, 859 dass die 860 Software und alle Derivate dauerhaft frei und Open Source bleiben und verbietet jegliche 861 kommerzielle 862 Ausbeutung oder zukünftige Relizenzierung.</p> 863 </div> 864 </section> 865 </div> 866 </main> 867 868 <footer> 869 <div class="container"> 870 <div class="sponsors"> 871 <p class="en">Supported by:</p> 872 <p class="de">Unterstützt von:</p> 873 <div class="sponsor-logos"> 874 <!-- Internet in Farbe logo with language-specific versions --> 875 <a href="https://www.bmbf.de/DE/Home/home_node.html" target="_blank"> 876 <!-- Each logo is controlled by language class visibility --> 877 <img src="./images/internet_in_farbe_en.jpg" alt="Internet in Farbe Logo" 878 class="sponsor-logo en-only"> 879 <img src="./images/internet_in_farbe_de.jpg" alt="Internet in Farbe Logo" 880 class="sponsor-logo de-only"> 881 </a> 882 <!-- PrototypeFund logo --> 883 <a href="https://prototypefund.de" target="_blank"> 884 <img src="./images/PrototypeFund-Logo.png" alt="PrototypeFund Logo" class="sponsor-logo"> 885 </a> 886 </div> 887 </div> 888 <div class="footer-links"> 889 <div class="en"> 890 <p>BrowserEQ v2 - <a href="https://berraknil.github.io">Berrak Nil</a> | <a 891 href="privacy-policy.html">Privacy Policy</a></p> 892 </div> 893 <div class="de"> 894 <p>BrowserEQ v2 - <a href="https://berraknil.github.io">Berrak Nil</a> | <a 895 href="privacy-policy.html">Datenschutzerklärung</a></p> 896 </div> 897 </div> 898 </div> 899 </footer> 900 901 <script> 902 function setLanguage(lang) { 903 if (lang === 'de') { 904 document.body.classList.add('german'); 905 // Update buttons 906 document.getElementById('de-btn').classList.add('active'); 907 document.getElementById('en-btn').classList.remove('active'); 908 document.getElementById('floating-de-btn').classList.add('active'); 909 document.getElementById('floating-en-btn').classList.remove('active'); 910 911 // Hide English logos, show German logos 912 document.querySelectorAll('.en-only').forEach(el => el.style.display = 'none'); 913 document.querySelectorAll('.de-only').forEach(el => el.style.display = 'block'); 914 } else { 915 document.body.classList.remove('german'); 916 // Update buttons 917 document.getElementById('en-btn').classList.add('active'); 918 document.getElementById('de-btn').classList.remove('active'); 919 document.getElementById('floating-en-btn').classList.add('active'); 920 document.getElementById('floating-de-btn').classList.remove('active'); 921 922 // Hide German logos, show English logos 923 document.querySelectorAll('.en-only').forEach(el => el.style.display = 'block'); 924 document.querySelectorAll('.de-only').forEach(el => el.style.display = 'none'); 925 } 926 } 927 928 // Initialize logo visibility 929 window.addEventListener('DOMContentLoaded', function () { 930 // Set initial logo visibility based on language 931 const isGerman = document.body.classList.contains('german'); 932 document.querySelectorAll('.en-only').forEach(el => el.style.display = isGerman ? 'none' : 'block'); 933 document.querySelectorAll('.de-only').forEach(el => el.style.display = isGerman ? 'block' : 'none'); 934 }); 935 936 function openTab(evt, tabName) { 937 var i, tabcontent, tablinks; 938 tabcontent = document.getElementsByClassName("tab-content"); 939 for (i = 0; i < tabcontent.length; i++) { 940 tabcontent[i].style.display = "none"; 941 } 942 tablinks = document.getElementsByClassName("tab-button"); 943 for (i = 0; i < tablinks.length; i++) { 944 tablinks[i].className = tablinks[i].className.replace(" active", ""); 945 } 946 document.getElementById(tabName).style.display = "block"; 947 evt.currentTarget.className += " active"; 948 } 949 950 // Back to top button 951 var backToTopButton = document.createElement('div'); 952 backToTopButton.className = 'back-to-top'; 953 backToTopButton.innerHTML = '↑'; 954 document.body.appendChild(backToTopButton); 955 956 // Header height for scroll calculations 957 var headerHeight = document.querySelector('header').offsetHeight; 958 var floatingLangToggle = document.getElementById('floating-lang-toggle'); 959 960 // Updated scroll handler to manage both buttons 961 window.onscroll = function () { 962 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 963 964 // Back to top button 965 if (scrollTop > 20) { 966 backToTopButton.classList.add('visible'); 967 } else { 968 backToTopButton.classList.remove('visible'); 969 } 970 971 // Floating language toggle - only show when scrolled past header 972 if (scrollTop > headerHeight) { 973 floatingLangToggle.classList.add('visible'); 974 } else { 975 floatingLangToggle.classList.remove('visible'); 976 } 977 }; 978 979 backToTopButton.onclick = function () { 980 document.body.scrollTop = 0; 981 document.documentElement.scrollTop = 0; 982 }; 983 </script> 984 985 <style> 986 .logo-container { 987 width: 100%; 988 max-width: 400px; 989 margin: 0 auto; 990 text-align: center; 991 padding: 0 10px; 992 } 993 994 .logo { 995 max-width: 100%; 996 height: auto; 997 display: block; 998 margin: 0 auto; 999 } 1000 1001 /* Media queries for different screen sizes */ 1002 @media (max-width: 768px) { 1003 .logo-container { 1004 max-width: 600px; 1005 padding: 22px 10px; 1006 } 1007 } 1008 1009 @media (max-width: 480px) { 1010 .logo-container { 1011 max-width: 400px; 1012 } 1013 } 1014 </style> 1015 </body> 1016 1017 </html>