Sebastian Krüger 546c80e4ae feat: display dB values and use gauge icon for level meters
Changed level meter display to show professional dB values instead
of percentages, and replaced volume icon with gauge icon.

Display Changes:
- Show dB values (-60 to 0) instead of percentage (0-100%)
- Use monospace font for consistent digit alignment
- Show "-∞" for silence (level = 0) instead of "-60"
- Rounded to nearest integer dB (no decimals for cleaner display)

Icon Updates:
- Replaced Volume2 icon with Gauge icon for playback levels
- Kept Mic icon for recording input levels
- Gauge better represents metering/measurement vs audio control

dB Conversion:
- Formula: dB = (normalized * 60) - 60
- Reverse of: normalized = (dB + 60) / 60
- Range: -60dB (silence) to 0dB (full scale)

Display Examples:
  0.00 (0%) = -∞   (silence)
  0.17 (17%) = -50dB (very quiet)
  0.50 (50%) = -30dB (moderate)
  0.83 (83%) = -10dB (loud)
  1.00 (100%) = 0dB (full scale)

Benefits:
 Professional dB notation matching industry standards
 Clearer for audio engineers and musicians
 Easier to identify levels relative to 0dBFS
 Gauge icon better conveys "measurement"
 Monospace font prevents number jumping

Now meters show "-18" instead of "70%" making it immediately
clear where you are in the dynamic range.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 15:28:35 +01:00

Audio UI

A sophisticated browser-only audio editor built with Next.js 16, React 19, and Tailwind CSS 4.

Features (Planned)

  • 100% Client-Side: All audio processing happens in your browser
  • Multi-Track Editing: Professional multi-track audio editing
  • Advanced Effects: EQ, compression, reverb, delay, and more
  • Automation: Automate volume, pan, and effect parameters
  • Recording: Record audio directly from your microphone
  • Analysis Tools: Frequency analyzer, spectrogram, and loudness metering
  • Export Formats: WAV, MP3, OGG, FLAC
  • Project Management: Save and load complete projects
  • Privacy-First: No uploads, all data stays local in your browser

Tech Stack

  • Next.js 16 with React 19
  • TypeScript 5
  • Tailwind CSS 4 with OKLCH colors
  • Web Audio API for audio processing
  • Canvas API for waveform visualization
  • IndexedDB for project storage

Getting Started

This project is currently in the planning phase. See PLAN.md for the complete implementation plan.

Development (Coming Soon)

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

Inspiration

Inspired by AudioMass and professional DAWs like Ableton Live, Logic Pro, and FL Studio.

License

TBD

Contributing

This is a personal project, but suggestions and ideas are welcome!

Description
No description provided
Readme 2.4 MiB
Languages
TypeScript 98.8%
CSS 1.1%
Dockerfile 0.1%