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>
This commit is contained in:
2025-11-18 15:28:35 +01:00
parent dc567d0144
commit 546c80e4ae

View File

@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic } from 'lucide-react';
import { Volume2, VolumeX, Headphones, Trash2, ChevronDown, ChevronRight, CircleArrowOutUpRight, Upload, Plus, Mic, Gauge } from 'lucide-react';
import type { Track as TrackType } from '@/types/track';
import { Button } from '@/components/ui/Button';
import { Slider } from '@/components/ui/Slider';
@@ -559,7 +559,7 @@ export function Track({
</>
) : (
<>
<Volume2 className="h-3 w-3" />
<Gauge className="h-3 w-3" />
Level
</>
)}
@@ -570,8 +570,14 @@ export function Track({
orientation="horizontal"
/>
</div>
<span className="text-xs text-muted-foreground w-10 text-right flex-shrink-0">
{Math.round((track.recordEnabled || isRecording ? recordingLevel : playbackLevel) * 100)}%
<span className="text-xs text-muted-foreground w-12 text-right flex-shrink-0 font-mono">
{(() => {
const level = track.recordEnabled || isRecording ? recordingLevel : playbackLevel;
// Convert normalized (0-1) back to dB
// normalized = (dB - (-60)) / 60, so dB = (normalized * 60) - 60
const db = (level * 60) - 60;
return level === 0 ? '-∞' : `${db.toFixed(0)}`;
})()}
</span>
</div>
</>