BrowserEQ 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.
BrowserEQ 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.
Installation
Installation
There are two ways to install BrowserEQ:
After Installation
Once installed, you'll see the BrowserEQ icon in your browser toolbar. Click it to open the equalizer interface.
Es gibt zwei Möglichkeiten, BrowserEQ zu installieren:
Nach der Installation
Nach der Installation siehst du das BrowserEQ-Symbol in der Symbolleiste deines Browsers. Klicke darauf, um die Equalizer-Oberfläche zu öffnen.
Features
Funktionen
Intuitive Interface
Intuitive Benutzeroberfläche
Simple controls with both full and compact modes
Einfache Steuerung mit sowohl vollständigen als auch kompakten Modi
6-Band EQ
6-Band EQ
Complete equalization with low pass, high pass, band pass, peaking, and shelf filters
Komplette Entzerrung mit Tiefpass-, Hochpass-, Bandpass-, Peaking- und Shelf-Filtern
Specialized Presets
Spezialisierte Voreinstellungen
Purpose-built sound profiles for voice calls, music, podcasts, and more
Zweckgebundene Klangprofile für Sprachanrufe, Musik, Podcasts und mehr
Audio Capture
Audioaufnahme
Record audio with your current EQ settings applied
Nimm Audio mit deinen aktuellen EQ-Einstellungen auf
Accessibility First
Barrierefreiheit an erster Stelle
Designed to accommodate various hearing needs
Entwickelt, um verschiedenen Hörbedürfnissen gerecht zu werden
Real-time Processing
Echtzeit-Verarbeitung
Hear changes to your audio immediately as you adjust settings
Höre Änderungen an deinem Audio sofort, wenn du Einstellungen anpasst
Getting Started
Erste Schritte
After installation, you'll see the BrowserEQ icon in your browser toolbar. Click it to open the equalizer panel.
Basic Controls
- Preset Selection: Choose from ready-made sound profiles
- Volume Control: Adjust the "Main" slider to control overall volume
- Mute Button: Quickly silence all audio
- Transport Controls: Control audio playback and recording
- Mono/Stereo Toggle: Switch between stereo (normal) and mono (combines left and right channels)
- Compact Mode Toggle: Switch between full and minimal interface
Understanding Filters
BrowserEQ gives you six different filters to shape your sound:
- High Pass: Removes low rumbling sounds (like air conditioners, traffic noise)
- Low Pass: Removes high-pitched sounds (like hiss, sibilance)
- Band Pass: Lets you focus on just middle frequencies (great for voices)
- Low Shelf: Adjusts the bass level without cutting it completely
- High Shelf: Adjusts the treble/high frequencies
- Peaking: Creates precise adjustments to specific frequency ranges
Each filter has an on/off toggle, a frequency control (which sound frequencies to affect), and a secondary control (either Resonance, Bandwidth, or Gain).
Nach der Installation, siehst du das BrowserEQ-Symbol in deiner Browser-Symbolleiste. Klicke darauf, um das Equalizer-Panel zu öffnen.
Grundlegende Steuerung
- Voreinstellungsauswahl: Wähle aus vorgefertigten Klangprofilen
- Lautstärkeregelung: Passe den "Main"-Schieberegler an, um die Gesamtlautstärke zu steuern
- Stummschalt-Button: Schalte schnell alle Audioausgaben stumm
- Transportsteuerung: Steuere die Audiowiedergabe und -aufnahme
- Mono/Stereo-Umschalter: Wechsle zwischen Stereo (normal) und Mono (kombiniert linke und rechte Kanäle)
- Kompaktmodus-Umschalter: Wechsle zwischen vollständiger und minimaler Benutzeroberfläche
Filter verstehen
BrowserEQ bietet dir sechs verschiedene Filter, um deinen Klang zu formen:
- Hochpass: Entfernt tiefe Rumpelgeräusche (wie Klimaanlagen, Verkehrslärm)
- Tiefpass: Entfernt hochfrequente Geräusche (wie Zischen, Zischlaute)
- Bandpass: Ermöglicht es dir, dich nur auf mittlere Frequenzen zu konzentrieren (ideal für Stimmen)
- Tiefen-Shelf: Passt den Basspegel an, ohne ihn vollständig zu entfernen
- Höhen-Shelf: Passt die Höhenfrequenzen an
- Peaking: Ermöglicht präzise Anpassungen an bestimmten Frequenzbereichen
Jeder Filter hat einen Ein-/Ausschalter, eine Frequenzregelung (welche Frequenzen beeinflusst werden sollen) und eine sekundäre Regelung (entweder Resonanz, Bandbreite oder Verstärkung).
Accessibility Features
Barrierefreiheitsfunktionen
BrowserEQ was designed with accessibility in mind:
- Hearing Accessibility: Customize audio to accommodate hearing sensitivities or impairments
- Auditory Processing: Enhance clarity by filtering out distracting frequencies
- Sensory Sensitivities: Reduce frequencies that trigger discomfort
- Audio Balance: Correct for imbalanced audio in content
BrowserEQ wurde mit Blick auf Barrierefreiheit entwickelt:
- Hörzugänglichkeit: Passe Audio an, um Hörsensibilitäten oder -beeinträchtigungen gerecht zu werden
- Auditive Verarbeitung: Verbessere die Klarheit, indem du ablenkende Frequenzen herausfilterst
- Sensorische Empfindlichkeiten: Reduziere Frequenzen, die Unbehagen auslösen
- Audiobalance: Korrigiere unausgewogenes Audio in Inhalten
Developer Guide
This guide provides detailed information for developers who want to understand, modify, or contribute to the BrowserEQ project.
Entwicklerhandbuch
Dieses Handbuch bietet detaillierte Informationen für Entwickler, die das BrowserEQ-Projekt verstehen, modifizieren oder dazu beitragen möchten.
Architecture Overview
Architekturübersicht
BrowserEQ uses a Vue 3 frontend with the Composition API, combined with Web Audio API for audio processing. The extension follows a component-based architecture:
UI Components (Vue) → Audio Logic (TypeScript) → Web Audio API → Browser Audio
Key Components
- Popup.vue: The main component that renders the user interface and orchestrates the other components.
- PresetManager.vue: Handles preset selection and management.
- Strip.vue: Represents a single filter strip with its controls.
- Slider.vue & Toggle.vue: Reusable UI controls.
Core Logic Modules
- audioProcessing.ts: Contains the Web Audio API implementation.
- EQValues.ts: Defines the default presets.
- presetStorage.ts: Manages storing preferences in localStorage.
- recordingService.ts: Handles audio recording functionality.
BrowserEQ verwendet ein Vue 3 Frontend mit der Composition API, kombiniert mit der Web Audio API für die Audioverarbeitung. Die Erweiterung folgt einer komponentenbasierten Architektur:
UI-Komponenten (Vue) → Audio-Logik (TypeScript) → Web Audio API → Browser-Audio
Hauptkomponenten
- Popup.vue: Die Hauptkomponente, die die Benutzeroberfläche rendert und die anderen Komponenten orchestriert.
- PresetManager.vue: Verwaltet die Voreinstellungsauswahl und -verwaltung.
- Strip.vue: Repräsentiert einen einzelnen Filterstreifen mit seinen Steuerelementen.
- Slider.vue & Toggle.vue: Wiederverwendbare UI-Steuerelemente.
Kern-Logikmodule
- audioProcessing.ts: Enthält die Web Audio API-Implementierung.
- EQValues.ts: Definiert die Standardvoreinstellungen.
- presetStorage.ts: Verwaltet die Speicherung von Einstellungen im localStorage.
- recordingService.ts: Handhabt die Audio-Aufnahmefunktionalität.
Data Flow
Datenfluss
- User interacts with UI components (sliders, toggles, buttons)
- Component emits events to parent (Popup.vue)
- Popup.vue updates the current preset state
- Audio processing logic applies changes to Web Audio nodes
Key Interfaces
The core data structures are defined in several places:
// EQ Preset structure
interface EQPreset {
mainOut: {
gain: number;
muted: boolean;
};
filters: {
[key: string]: EQFilter;
};
}
// Individual filter structure
interface EQFilter {
name: string;
type: BiquadFilterType; // Web Audio API filter type
enabled: boolean;
frequency: {
value: number;
};
Q?: {
name: string;
value: number;
};
gain?: {
value: number;
};
}
- Benutzer interagiert mit UI-Komponenten (Schieberegler, Umschalter, Buttons)
- Komponente sendet Ereignisse an übergeordnetes Element (Popup.vue)
- Popup.vue aktualisiert den aktuellen Voreinstellungsstatus
- Audio-Verarbeitungslogik wendet Änderungen auf Web Audio-Knoten an
Wichtige Schnittstellen
Die Kerndatenstrukturen sind an mehreren Stellen definiert:
// EQ-Voreinstellungsstruktur
interface EQPreset {
mainOut: {
gain: number;
muted: boolean;
};
filters: {
[key: string]: EQFilter;
};
}
// Individuelle Filterstruktur
interface EQFilter {
name: string;
type: BiquadFilterType; // Web Audio API Filtertyp
enabled: boolean;
frequency: {
value: number;
};
Q?: {
name: string;
value: number;
};
gain?: {
value: number;
};
}
Audio Processing Pipeline
Audio-Verarbeitungspipeline
- Capture: The extension captures tab audio using
chrome.tabCapture. - Source Creation: A MediaStreamAudioSourceNode is created from the capture.
- Filter Chain: Audio is routed through various BiquadFilterNode instances based on user settings.
- Gain Node: Final processing includes volume adjustment through a GainNode.
- Output: Processed audio is sent to the AudioContext destination.
MediaStreamSource → [Enabled Filters] → GainNode → AudioContext.destination
Filter Connectivity Logic
The system dynamically connects and disconnects filters when users toggle them:
- When enabling a filter, it's inserted into the chain at the appropriate point.
- When disabling a filter, it's bypassed, and the chain is reconnected.
- The
lastFilterreference always points to the last active filter in the chain.
- Erfassung: Die Erweiterung erfasst Tab-Audio mit
chrome.tabCapture. - Quellenerstellung: Ein MediaStreamAudioSourceNode wird aus der Erfassung erstellt.
- Filterkette: Audio wird durch verschiedene BiquadFilterNode-Instanzen basierend auf Benutzereinstellungen geleitet.
- Verstärkungsknoten: Abschließende Verarbeitung umfasst Lautstärkeanpassung durch einen GainNode.
- Ausgabe: Verarbeitetes Audio wird an das AudioContext-Ziel gesendet.
MediaStreamSource → [Aktivierte Filter] → GainNode → AudioContext.destination
Filterverbindungslogik
Das System verbindet und trennt Filter dynamisch, wenn Benutzer sie umschalten:
- Beim Aktivieren eines Filters wird er an der entsprechenden Stelle in die Kette eingefügt.
- Beim Deaktivieren eines Filters wird er umgangen, und die Kette wird neu verbunden.
- Die
lastFilter-Referenz zeigt immer auf den letzten aktiven Filter in der Kette.
Build Process
Build-Prozess
The project uses Vite for building:
# Install dependencies npm install # Development build with hot-reload npm run dev # Production build npm run build # Run tests npm test
Testing
We recommend testing your changes in these scenarios:
- Different Content Types: Test with music, voice calls, videos, etc.
- Edge Cases: Test with extreme filter settings and combinations.
- Performance: Ensure changes don't cause audio glitches or high CPU usage.
Das Projekt verwendet Vite zum Erstellen:
# Abhängigkeiten installieren npm install # Entwicklungsbuild mit Hot-Reload npm run dev # Produktionsbuild npm run build # Tests ausführen npm test
Testen
Wir empfehlen, Ihre Änderungen in diesen Szenarien zu testen:
- Verschiedene Inhaltstypen: Testen Sie mit Musik, Sprachanrufen, Videos usw.
- Randfälle: Testen Sie mit extremen Filtereinstellungen und Kombinationen.
- Leistung: Stellen Sie sicher, dass Änderungen keine Audioprobleme oder hohe CPU-Auslastung verursachen.
BrowserEQ in Action
Watch these examples to see how BrowserEQ can enhance your audio experience in different scenarios.
Try It Yourself
After installing BrowserEQ, play these videos and experiment with the relevant presets to hear the difference in real-time. Open the BrowserEQ panel by clicking its icon in your browser toolbar, select an appropriate preset, and adjust the settings as demonstrated in the videos. This hands-on approach will help you better understand how each feature works with actual content.
BrowserEQ in Aktion
Schau dir diese Beispiele an, um zu sehen, wie BrowserEQ dein Audioerlebnis in verschiedenen Szenarien verbessern kann.
Probiere es selbst aus
Nach der Installation von BrowserEQ kannst du diese Videos abspielen und mit den entsprechenden Voreinstellungen experimentieren, um den Unterschied in Echtzeit zu hören. Öffne das BrowserEQ-Panel durch Klicken auf das Symbol in der Browser-Symbolleiste, wähle eine passende Voreinstellung und passe die Einstellungen wie in den Videos gezeigt an. Diese praktische Vorgehensweise wird dir helfen, besser zu verstehen, wie jede Funktion mit tatsächlichen Inhalten funktioniert.
Voice Clarity and Noise Reduction
BrowserEQ excels at enhancing voice intelligibility in video conferences, online meetings, and webinars. This demonstration shows how to eliminate background noise, reduce echo, and enhance speech frequencies for crystal-clear communication. Perfect for improving hard-to-hear speakers or using your computer in noisy environments.
Sprachklarheit und Rauschunterdrückung
BrowserEQ ist hervorragend darin, die Sprachverständlichkeit in Videokonferenzen, Online-Meetings und Webinaren zu verbessern. Diese Demonstration zeigt, wie Hintergrundgeräusche eliminiert, Echo reduziert und Sprachfrequenzen für kristallklare Kommunikation verstärkt werden können. Ideal zur Verbesserung schwer zu hörender Sprecher oder für die Verwendung Ihres Computers in geräuschvollen Umgebungen.
Stereo/Mono Conversion
The Stereo/Mono switch is a powerful accessibility feature that combines left and right audio channels. This demonstration shows how it benefits users with unilateral hearing loss, helps when using a single earbud, and improves audio where stereo separation is too extreme. Learn how to switch between stereo and mono modes, and when each setting is most beneficial for your listening situation.
Stereo/Mono-Umwandlung
Der Stereo/Mono-Schalter ist eine leistungsstarke Barrierefreiheitsfunktion, die den linken und rechten Audiokanal kombiniert. Diese Demonstration zeigt, wie er Nutzern mit einseitigem Hörverlust hilft, die Nutzung mit nur einem Ohrhörer verbessert und Audio optimiert, bei dem die Stereo-Trennung zu extrem ist. Erfahren Sie, wie man zwischen Stereo- und Mono-Modi wechselt und wann welche Einstellung für Ihre Hörsituation am vorteilhaftesten ist.
Music Enhancement and Timbral Control
Transform your music listening experience with BrowserEQ's precise frequency controls. This demonstration shows how to adjust specific frequency ranges to enhance bass response, brighten vocals, or completely reshape the timbral quality of any music. Learn how to create custom sound signatures for different genres, compensate for headphone or speaker deficiencies, and discover new sonic details in your favorite tracks.
Musikverbesserung und Klangfarbensteuerung
Verwandeln Sie Ihr Musikhörerlebnis mit den präzisen Frequenzreglern von BrowserEQ. Diese Demonstration zeigt, wie man bestimmte Frequenzbereiche anpasst, um die Bassansprache zu verbessern, Gesang aufzuhellen oder die Klangqualität jeder Musik komplett neu zu gestalten. Erfahren Sie, wie Sie maßgeschneiderte Klangsignaturen für verschiedene Genres erstellen, Defizite von Kopfhörern oder Lautsprechern ausgleichen und neue klangliche Details in Ihren Lieblingsstücken entdecken können.
Contributing to BrowserEQ
Beitrag zu BrowserEQ leisten
We welcome contributions to BrowserEQ! There are many ways to contribute, from reporting bugs and improving documentation to adding new features.
Bug Reports & Feature Requests
Please use the GitHub issue tracker to report bugs or suggest features. When reporting a bug, include:
- Your browser version
- BrowserEQ version
- Steps to reproduce the issue
- Expected vs actual behavior
- Any relevant screenshots or console logs
Development Process
- Fork the repository
- Create a new branch for your feature (
git checkout -b feature/amazing-feature) - Make your changes
- Add tests if applicable
- Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Create a Pull Request
Code Style Guidelines
- Follow the existing code style
- Use TypeScript's type system
- Write comments for complex logic
- Use descriptive variable and function names
License
By contributing to BrowserEQ, you agree that your contributions will be licensed under the project's BrowserEQ Strong Copyleft License. This license ensures that the software and all derivatives remain perpetually free and open source, and prohibits any commercial exploitation or future relicensing.
Wir begrüßen Beiträge zu BrowserEQ! Es gibt viele Möglichkeiten, einen Beitrag zu leisten, von der Meldung von Fehlern und der Verbesserung der Dokumentation bis hin zum Hinzufügen neuer Funktionen.
Fehlermeldungen & Funktionsanfragen
Bitte verwende den GitHub Issue Tracker, um Fehler zu melden oder Funktionen vorzuschlagen. Bei der Meldung eines Fehlers bitte angeben:
- Deine Browser-Version
- BrowserEQ-Version
- Schritte zur Reproduktion des Problems
- Erwartetes vs. tatsächliches Verhalten
- Alle relevanten Screenshots oder Konsolenprotokolle
Entwicklungsprozess
- Forke das Repository
- Erstelle einen neuen Branch für deine Funktion
(
git checkout -b feature/amazing-feature) - Nimm deine Änderungen vor
- Füge Tests hinzu, falls zutreffend
- Committe deine Änderungen (
git commit -m 'Add some amazing feature') - Push in den Branch (
git push origin feature/amazing-feature) - Erstelle einen Pull Request
Code-Stil-Richtlinien
- Folge dem bestehenden Code-Stil
- Verwende das Typsystem von TypeScript
- Schreibe Kommentare für komplexe Logik
- Verwende beschreibende Variablen- und Funktionsnamen
Lizenz
Durch das Beitragen zu BrowserEQ stimmst du zu, dass deine Beiträge unter der BrowserEQ Strong Copyleft License des Projekts lizenziert werden. Diese Lizenz stellt sicher, dass die Software und alle Derivate dauerhaft frei und Open Source bleiben und verbietet jegliche kommerzielle Ausbeutung oder zukünftige Relizenzierung.