Web Audio Compressor

A Chrome/Chromium browser extension that applies real-time dynamic audio compression to audio and video elements on web pages. It reduces loudness differences so quiet sounds become more audible without distorting loud sounds.

Features

• Dynamic Compression -- Routes page audio through the Web Audio API DynamicsCompressorNode with adjustable parameters:
  • Threshold (-100 to 0 dB) -- Level above which compression kicks in
  • Ratio (1:1 to 20:1) -- How aggressively the signal is compressed
  • Attack (0 to 1 s) -- How quickly compression responds to loud signals
  • Release (0.1 to 1 s) -- How quickly compression lets go
  • Knee (0 to 40 dB) -- Smoothness of the transition into compression
• Live Meters -- Real-time output level and gain reduction meters updated in the popup
• Enable / Disable Toggle -- Turn compression on or off instantly
• Persistent Settings -- Configuration is saved to Chrome sync storage and applied across sessions and devices
• Automatic Media Detection -- Discovers <audio> and <video> elements dynamically via MutationObserver

Installation

1. Clone or download this repository.
2. Open chrome://extensions/ in Chrome or any Chromium-based browser.
3. Enable Developer mode (toggle in the top-right corner).
4. Click Load unpacked and select the repository directory.

The extension icon will appear in the toolbar.

Usage

1. Navigate to any page with audio or video content.
2. Click the extension icon to open the popup.
3. Make sure the Enabled toggle is on.
4. Adjust the compressor parameters to taste and click Apply.
5. The Audio Level section shows the current output level and how much gain reduction is being applied.

Project Structure

web-audio-compressor/
├── manifest.json   # Chrome Extension Manifest V3 configuration
├── common.js       # Shared utilities: Config class, input helpers
├── content.js      # Content script: Web Audio graph, media element routing
├── popup.html      # Popup UI markup
├── popup.css       # Popup styles
├── popup.js        # Popup logic: settings controls, meter polling
└── icon/           # Extension icons (16 / 32 / 48 / 128 / 1024 px)

Requirements

• Chrome or a Chromium-based browser (Edge, Brave, Vivaldi, etc.)
• No build step, bundler, or external dependencies required.

---

_{This document was generated by Claude Opus 4.6 on Claude Code and reviewed and adjusted by @voidCaffeLatte.}