1  # BrowserEQ v2 - Hear Better
  2  
  3  [Deutsche Version weiter unten](#browsereq-v2---audio-verbesserung-für-deinen-browser)
  4  
  5  BrowserEQ-V2 is a powerful audio equalizer extension that enhances your listening experience by giving you complete control over how audio sounds in your web browser. Whether you're dealing with challenging audio on video calls, enjoying music, or need to make content more accessible for your hearing needs, BrowserEQ puts professional audio tools at your fingertips.
  6  
  7  > **📚 Full Documentation Available**: Visit our [documentation website](https://berraknil.github.io/BrowserEQ-V2/) for complete guides, examples, and interactive demonstrations of all features.
  8  
  9  ![BrowserEQ Screenshot](docs/screenshots/browsereq-main.png)
 10  
 11  ## Features
 12  
 13  - **Intuitive Interface**: Simple controls with both full and compact modes
 14  - **6-Band EQ**: Complete equalization with low pass, high pass, band pass, peaking, and shelf filters
 15  - **Specialized Presets**: Purpose-built sound profiles for voice calls, music, podcasts, and more
 16  - **Real-time Processing**: Hear changes to your audio immediately as you adjust settings
 17  - **Audio Capture**: Record audio with your current EQ settings applied
 18  - **Accessibility First**: Designed to accommodate various hearing needs
 19  
 20  ## Installation
 21  
 22  ### Manual Installation (From GitHub)
 23  1. Go to the [latest release](https://github.com/berraknil/BrowserEQ-V2/releases/latest) on GitHub
 24  2. Download the `browsereq-v2.zip` file and extract it to a folder on your computer
 25  3. Open Chrome and navigate to `chrome://extensions`
 26  4. Enable "Developer mode" by toggling the switch in the top-right corner
 27  5. Click the "Load unpacked" button
 28  6. Select the extracted folder containing the extension files
 29  
 30  > **Note:** When installing extensions manually, you'll need to update them manually as well. Check the GitHub repository regularly for new releases.
 31  
 32  ### Chrome Web Store
 33  > **⚠️ Coming Soon:** The extension is currently in the Chrome Web Store approval process and is not yet available for direct installation from there. Please use the GitHub installation method for now.
 34  
 35  1. Navigate to the BrowserEQ page on Chrome Web Store (coming soon)
 36  2. Click the "Add to Chrome" button
 37  3. Confirm by clicking "Add extension" in the popup
 38  
 39  ## User Guide
 40  
 41  ### Getting Started
 42  
 43  After installing BrowserEQ, you'll see the BrowserEQ icon in your browser toolbar. Click it to open the equalizer panel.
 44  
 45  ### Basic Controls
 46  
 47  1. **Preset Selection**: Choose from ready-made sound profiles
 48  2. **Volume Control**: Adjust the "Main" slider to control overall volume
 49  3. **Mute Button**: Quickly silence all audio
 50  4. **Transport Controls**: Control audio playback and recording
 51  5. **Mono/Stereo Toggle**: Switch between stereo (normal) and mono (combines left and right channels) 
 52  6. **Compact Mode Toggle**: Switch between full and minimal interface
 53  
 54  ### Understanding Filters
 55  
 56  BrowserEQ gives you six different filters to shape your sound:
 57  
 58  - **High Pass**: Removes low rumbling sounds (like air conditioners, traffic noise)
 59  - **Low Pass**: Removes high-pitched sounds (like hiss, sibilance)
 60  - **Band Pass**: Lets you focus on just middle frequencies (great for voices)
 61  - **Low Shelf**: Adjusts the bass level without cutting it completely
 62  - **High Shelf**: Adjusts the treble/high frequencies
 63  - **Peaking**: Creates precise adjustments to specific frequency ranges
 64  
 65  Each filter has:
 66  - An on/off toggle
 67  - A frequency control (which sound frequencies to affect)
 68  - A secondary control (either Resonance, Bandwidth, or Gain)
 69  
 70  ## Example Uses
 71  
 72  ### Voice Clarity and Noise Reduction
 73  
 74  BrowserEQ excels at enhancing voice intelligibility in video conferences, online meetings, and webinars. You can eliminate background noise, reduce echo, and enhance speech frequencies for crystal-clear communication. This is perfect for improving hard-to-hear speakers or using your computer in noisy environments.
 75  
 76  ### Stereo/Mono Conversion
 77  
 78  The Stereo/Mono switch is a powerful accessibility feature that combines left and right audio channels. This benefits users with unilateral hearing loss, helps when using a single earbud, and improves audio where stereo separation is too extreme. You can easily switch between stereo and mono modes depending on your listening situation.
 79  
 80  ### Music Enhancement and Timbral Control
 81  
 82  Transform your music listening experience with BrowserEQ's precise frequency controls. You can adjust specific frequency ranges to enhance bass response, brighten vocals, or completely reshape the timbral quality of any music. Create custom sound signatures for different genres, compensate for headphone or speaker deficiencies, and discover new sonic details in your favorite tracks.
 83  
 84  ## Accessibility Features
 85  
 86  BrowserEQ was designed with accessibility in mind:
 87  - **Hearing Accessibility**: Customize audio to accommodate hearing sensitivities or impairments
 88  - **Auditory Processing**: Enhance clarity by filtering out distracting frequencies
 89  - **Sensory Sensitivities**: Reduce frequencies that trigger discomfort
 90  - **Audio Balance**: Correct for imbalanced audio in content
 91  
 92  ## For Developers
 93  
 94  ### Project Structure
 95  
 96  ```
 97  BrowserEQ-V2/
 98  ├── src/
 99  │   ├── components/           # Vue components
100  │   │   ├── PresetManager.vue # Preset management
101  │   │   ├── Slider.vue        # Slider control
102  │   │   ├── Strip.vue         # Filter strip
103  │   │   └── Toggle.vue        # Toggle switch
104  │   ├── logic/                # Core business logic
105  │   │   ├── audioProcessing.ts  # Web Audio API handling
106  │   │   ├── EQValues.ts       # Default preset definitions
107  │   │   ├── presetStorage.ts  # LocalStorage management
108  │   │   └── ...
109  │   ├── popup/                # Extension popup
110  │   │   └── Popup.vue         # Main UI
111  │   └── ...
112  ├── extension/                # Compiled extension
113  └── ...
114  ```
115  
116  ### Key Technologies
117  
118  - **Vue 3**: Frontend framework with Composition API
119  - **Web Audio API**: Core audio processing capabilities
120  - **LocalStorage API**: Preset persistence
121  - **Chrome Extension APIs**: For tab audio capture
122  
123  ### Audio Processing Pipeline
124  
125  1. **Capture**: The extension captures tab audio using `chrome.tabCapture`.
126  2. **Source Creation**: A MediaStreamAudioSourceNode is created from the capture.
127  3. **Filter Chain**: Audio is routed through various BiquadFilterNode instances based on user settings.
128  4. **Gain Node**: Final processing includes volume adjustment through a GainNode.
129  5. **Output**: Processed audio is sent to the AudioContext destination.
130  
131  ```
132  MediaStreamSource → [Enabled Filters] → GainNode → AudioContext.destination
133  ```
134  
135  ### Building and Testing
136  
137  ```bash
138  # Install dependencies
139  npm install
140  
141  # Development build with hot-reload
142  npm run dev
143  
144  # Production build
145  npm run build
146  
147  # Run tests
148  npm test
149  ```
150  
151  ## Contributing
152  
153  We welcome contributions to BrowserEQ! Please check out our contribution guidelines in [CONTRIBUTING.md](CONTRIBUTING.md).
154  
155  ### Bug Reports & Feature Requests
156  
157  Please use the GitHub issue tracker to report bugs or suggest features. When reporting a bug, include:
158  - Your browser version
159  - BrowserEQ version
160  - Steps to reproduce the issue
161  - Expected vs actual behavior
162  - Any relevant screenshots or console logs
163  
164  ## License
165  
166  BrowserEQ is released under the [BrowserEQ Strong Copyleft License](LICENSE), a license designed to keep the software and all derivatives perpetually free and open source. This license:
167  
168  - Ensures the software remains free to use, modify, and distribute
169  - Prohibits any commercial exploitation or selling of the software or derivatives
170  - Requires that all modifications must be shared under the same license terms
171  - Prevents any future relicensing under different terms
172  
173  This license was specifically chosen to protect user freedoms and ensure BrowserEQ remains a community resource that cannot be commercialized or closed down.
174  
175  ## Sponsors
176  
177  <p align="center">BrowserEQ is proudly supported by:</p>
178  
179  <p align="center">
180    <a href="https://www.bmbf.de/DE/Home/home_node.html" target="_blank">
181      <img src="docs/images/internet_in_farbe_en.jpg" alt="Internet in Farbe" width="300">
182    </a>
183    <a href="https://prototypefund.de" target="_blank">
184      <img src="docs/images/PrototypeFund-Logo.png" alt="Prototype Fund" width="300">
185    </a>
186  </p>
187  
188  ---
189  
190  # BrowserEQ v2 - Audio-Verbesserung für deinen Browser
191  
192  [English version above](#browsereq-v2---audio-enhancement-for-your-browser)
193  
194  BrowserEQ-V2 ist eine leistungsstarke Audio-Equalizer-Erweiterung, die dein Hörerlebnis verbessert, indem sie dir die vollständige Kontrolle darüber gibt, wie Audio in deinem Webbrowser klingt. Egal, ob du mit herausforderndem Audio bei Videoanrufen zu tun hast, Musik genießt oder Inhalte für deine Hörbedürfnisse zugänglicher machen musst, BrowserEQ stellt dir professionelle Audio-Tools zur Verfügung.
195  
196  > **📚 Vollständige Dokumentation verfügbar**: Besuche unsere [Dokumentationswebsite](https://berraknil.github.io/BrowserEQ-V2/) für vollständige Anleitungen, Beispiele und interaktive Demonstrationen aller Funktionen.
197  
198  ![BrowserEQ Screenshot](docs/screenshots/browsereq-main.png)
199  
200  ## Funktionen
201  
202  - **Intuitive Benutzeroberfläche**: Einfache Steuerung mit sowohl vollständigen als auch kompakten Modi
203  - **6-Band EQ**: Komplette Entzerrung mit Tiefpass-, Hochpass-, Bandpass-, Peaking- und Shelf-Filtern
204  - **Spezialisierte Voreinstellungen**: Zweckgebundene Klangprofile für Sprachanrufe, Musik, Podcasts und mehr
205  - **Echtzeitverarbeitung**: Höre Änderungen an deinem Audio sofort, wenn du die Einstellungen anpasst
206  - **Audioaufnahme**: Nimm Audio mit deinen aktuellen EQ-Einstellungen auf
207  - **Barrierefreiheit an erster Stelle**: Entwickelt, um verschiedenen Hörbedürfnissen gerecht zu werden
208  
209  ## Installation
210  
211  ### Manuelle Installation (von GitHub)
212  1. Gehe zur [neuesten Version](https://github.com/berraknil/BrowserEQ-V2/releases/latest) auf GitHub
213  2. Lade die Datei `browsereq-v2.zip` herunter und entpacke sie in einen Ordner auf deinem Computer
214  3. Öffne Chrome und navigiere zu `chrome://extensions`
215  4. Aktiviere den "Entwicklermodus" durch Umschalten des Schalters in der oberen rechten Ecke
216  5. Klicke auf die Schaltfläche "Entpackte Erweiterung laden"
217  6. Wähle den entpackten Ordner mit den Erweiterungsdateien aus
218  
219  > **Hinweis:** Bei manuell installierten Erweiterungen musst du diese auch manuell aktualisieren. Überprüfe regelmäßig das GitHub-Repository auf neue Versionen.
220  
221  ### Chrome Web Store
222  > **⚠️ Bald verfügbar:** Die Erweiterung befindet sich derzeit im Genehmigungsprozess des Chrome Web Stores und ist noch nicht direkt von dort installierbar. Bitte nutze vorerst die GitHub-Installationsmethode.
223  
224  1. Gehe zur BrowserEQ-Seite im Chrome Web Store (bald verfügbar)
225  2. Klicke auf die Schaltfläche "Zu Chrome hinzufügen"
226  3. Bestätige, indem du im Popup auf "Erweiterung hinzufügen" klickst
227  
228  ## Benutzerhandbuch
229  
230  ### Erste Schritte
231  
232  Nach der Installation von BrowserEQ siehst du das BrowserEQ-Symbol in der Browser-Symbolleiste. Klicke darauf, um das Equalizer-Panel zu öffnen.
233  
234  ### Grundlegende Steuerung
235  
236  1. **Voreinstellungsauswahl**: Wähle aus vorgefertigten Klangprofilen
237  2. **Lautstärkeregelung**: Passe den "Main"-Schieberegler an, um die Gesamtlautstärke zu steuern
238  3. **Stummschalt-Button**: Schalte schnell alle Audioausgaben stumm
239  4. **Transportsteuerung**: Steuere die Audiowiedergabe und -aufnahme
240  5. **Mono/Stereo-Umschalter**: Wechsle zwischen Stereo (normal) und Mono (kombiniert linke und rechte Kanäle)
241  6. **Kompaktmodus-Umschalter**: Wechsle zwischen vollständiger und minimaler Benutzeroberfläche
242  
243  ### Filter verstehen
244  
245  BrowserEQ bietet dir sechs verschiedene Filter, um deinen Klang zu formen:
246  
247  - **Hochpass**: Entfernt tiefe Rumpelgeräusche (wie Klimaanlagen, Verkehrslärm)
248  - **Tiefpass**: Entfernt hochfrequente Geräusche (wie Zischen, Zischlaute)
249  - **Bandpass**: Ermöglicht es dir, dich nur auf mittlere Frequenzen zu konzentrieren (ideal für Stimmen)
250  - **Tiefen-Shelf**: Passt den Basspegel an, ohne ihn vollständig zu entfernen
251  - **Höhen-Shelf**: Passt die Höhenfrequenzen an
252  - **Peaking**: Ermöglicht präzise Anpassungen an bestimmten Frequenzbereichen
253  
254  Jeder Filter hat:
255  - Einen Ein-/Ausschalter
256  - Eine Frequenzregelung (welche Frequenzen beeinflusst werden sollen)
257  - Eine sekundäre Regelung (entweder Resonanz, Bandbreite oder Verstärkung)
258  
259  ## Anwendungsbeispiele
260  
261  ### Sprachklarheit und Rauschunterdrückung
262  
263  BrowserEQ ist hervorragend darin, die Sprachverständlichkeit in Videokonferenzen, Online-Meetings und Webinaren zu verbessern. Du kannst Hintergrundgeräusche eliminieren, Echo reduzieren und Sprachfrequenzen für kristallklare Kommunikation verstärken. Dies ist ideal zur Verbesserung schwer zu hörender Sprecher oder für die Verwendung deines Computers in geräuschvollen Umgebungen.
264  
265  ### Stereo/Mono-Umwandlung
266  
267  Der Stereo/Mono-Schalter ist eine leistungsstarke Barrierefreiheitsfunktion, die den linken und rechten Audiokanal kombiniert. Dies hilft Nutzern mit einseitigem Hörverlust, verbessert die Nutzung mit nur einem Ohrhörer und optimiert Audio, bei dem die Stereo-Trennung zu extrem ist. Du kannst je nach deiner Hörsituation einfach zwischen Stereo- und Mono-Modi wechseln.
268  
269  ### Musikverbesserung und Klangfarbensteuerung
270  
271  Verwandle dein Musikhörerlebnis mit den präzisen Frequenzreglern von BrowserEQ. Du kannst bestimmte Frequenzbereiche anpassen, um die Bassansprache zu verbessern, Gesang aufzuhellen oder die Klangqualität jeder Musik komplett neu zu gestalten. Erstelle maßgeschneiderte Klangsignaturen für verschiedene Genres, gleiche Defizite von Kopfhörern oder Lautsprechern aus und entdecke neue klangliche Details in deinen Lieblingsstücken.
272  
273  ## Barrierefreiheitsfunktionen
274  
275  BrowserEQ wurde mit Blick auf Barrierefreiheit entwickelt:
276  - **Hörzugänglichkeit**: Passe Audio an, um Hörsensibilitäten oder -beeinträchtigungen gerecht zu werden
277  - **Auditive Verarbeitung**: Verbessere die Klarheit, indem du ablenkende Frequenzen herausfilterst
278  - **Sensorische Empfindlichkeiten**: Reduziere Frequenzen, die Unbehagen auslösen
279  - **Audiobalance**: Korrigiere unausgewogenes Audio in Inhalten
280  
281  ## Für Entwickler
282  
283  ### Projektstruktur
284  
285  ```
286  BrowserEQ-V2/
287  ├── src/
288  │   ├── components/           # Vue-Komponenten
289  │   │   ├── PresetManager.vue # Voreinstellungsverwaltung
290  │   │   ├── Slider.vue        # Schieberegler-Steuerung
291  │   │   ├── Strip.vue         # Filterstreifen
292  │   │   └── Toggle.vue        # Umschalter
293  │   ├── logic/                # Kernlogik
294  │   │   ├── audioProcessing.ts  # Web Audio API Handhabung
295  │   │   ├── EQValues.ts       # Standard-Voreinstellungen
296  │   │   ├── presetStorage.ts  # LocalStorage-Verwaltung
297  │   │   └── ...
298  │   ├── popup/                # Erweiterungspopup
299  │   │   └── Popup.vue         # Hauptbenutzeroberfläche
300  │   └── ...
301  ├── extension/                # Kompilierte Erweiterung
302  └── ...
303  ```
304  
305  ### Schlüsseltechnologien
306  
307  - **Vue 3**: Frontend-Framework mit Composition API
308  - **Web Audio API**: Kernfähigkeiten zur Audiobearbeitung
309  - **LocalStorage API**: Voreinstellungsspeicherung
310  - **Chrome Extension APIs**: Für Tab-Audioaufnahme
311  
312  ### Audio-Verarbeitungspipeline
313  
314  1. **Erfassung**: Die Erweiterung erfasst Tab-Audio mit `chrome.tabCapture`.
315  2. **Quellenerstellung**: Ein MediaStreamAudioSourceNode wird aus der Erfassung erstellt.
316  3. **Filterkette**: Audio wird durch verschiedene BiquadFilterNode-Instanzen basierend auf Benutzereinstellungen geleitet.
317  4. **Verstärkungsknoten**: Abschließende Verarbeitung umfasst Lautstärkeanpassung durch einen GainNode.
318  5. **Ausgabe**: Verarbeitetes Audio wird an das AudioContext-Ziel gesendet.
319  
320  ```
321  MediaStreamSource → [Aktivierte Filter] → GainNode → AudioContext.destination
322  ```
323  
324  ### Bauen und Testen
325  
326  ```bash
327  # Abhängigkeiten installieren
328  npm install
329  
330  # Entwicklungsbuild mit Hot-Reload
331  npm run dev
332  
333  # Produktionsbuild
334  npm run build
335  
336  # Tests ausführen
337  npm test
338  ```
339  
340  ## Beitrag leisten
341  
342  Wir begrüßen Beiträge zu BrowserEQ! Bitte überprüfe unsere Beitragsrichtlinien in [CONTRIBUTING.md](CONTRIBUTING.md).
343  
344  ### Fehlermeldungen & Funktionsanfragen
345  
346  Bitte verwende den GitHub Issue Tracker, um Fehler zu melden oder Funktionen vorzuschlagen. Bei der Meldung eines Fehlers bitte angeben:
347  - Deine Browser-Version
348  - BrowserEQ-Version
349  - Schritte zur Reproduktion des Problems
350  - Erwartetes vs. tatsächliches Verhalten
351  - Alle relevanten Screenshots oder Konsolenprotokolle
352  
353  ## Lizenz
354  
355  BrowserEQ wird unter der [BrowserEQ Strong Copyleft License](LICENSE) veröffentlicht, einer Lizenz, die darauf ausgelegt ist, die Software und alle Derivate dauerhaft frei und Open Source zu halten. Diese Lizenz:
356  
357  - Stellt sicher, dass die Software frei zur Nutzung, Modifikation und Verteilung bleibt
358  - Untersagt jegliche kommerzielle Ausbeutung oder den Verkauf der Software oder ihrer Derivate
359  - Erfordert, dass alle Modifikationen unter denselben Lizenzbedingungen geteilt werden müssen
360  - Verhindert jede zukünftige Relizenzierung unter anderen Bedingungen
361  
362  Diese Lizenz wurde speziell gewählt, um die Benutzerfreiheiten zu schützen und sicherzustellen, dass BrowserEQ eine Gemeinschaftsressource bleibt, die nicht kommerzialisiert oder geschlossen werden kann.
363  
364  ## Sponsoren
365  
366  <p align="center">BrowserEQ wird stolz unterstützt von:</p>
367  
368  <p align="center">
369    <a href="https://www.bmbf.de/DE/Home/home_node.html" target="_blank">
370      <img src="docs/images/internet_in_farbe_de.jpg" alt="Internet in Farbe" width="300">
371    </a>
372    <a href="https://prototypefund.de" target="_blank">
373      <img src="docs/images/PrototypeFund-Logo.png" alt="Prototype Fund" width="300">
374    </a>
375  </p>