Voice Leveling (untested)

This commit is contained in:
2026-03-03 03:41:59 +01:00
parent cf91d77502
commit 8315df42fc
9 changed files with 1313 additions and 19 deletions

View File

@@ -145,4 +145,138 @@
</div>
</div>
</section>
<!-- Voice Leveling -->
<section>
<div class="flex items-center gap-2 mb-3">
<ng-icon name="lucideActivity" class="w-5 h-5 text-muted-foreground" />
<h4 class="text-sm font-semibold text-foreground">Voice Leveling</h4>
</div>
<div class="space-y-3">
<!-- Master toggle -->
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-foreground">Voice Leveling</p>
<p class="text-xs text-muted-foreground">
Automatically equalise volume across speakers
</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
[checked]="voiceLeveling.enabled()"
(change)="onVoiceLevelingToggle()"
class="sr-only peer"
/>
<div
class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
></div>
</label>
</div>
<!-- Advanced controls — visible only when enabled -->
@if (voiceLeveling.enabled()) {
<div class="space-y-3 pl-1 border-l-2 border-primary/20 ml-1">
<!-- Target Loudness -->
<div class="pl-3">
<label class="block text-xs font-medium text-muted-foreground mb-1">
Target Loudness: {{ voiceLeveling.targetDbfs() }} dBFS
</label>
<input
type="range"
[value]="voiceLeveling.targetDbfs()"
(input)="onTargetDbfsChange($event)"
min="-30"
max="-12"
step="1"
class="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
/>
<div class="flex justify-between text-[10px] text-muted-foreground/60 mt-0.5">
<span>-30 (quiet)</span>
<span>-12 (loud)</span>
</div>
</div>
<!-- AGC Strength -->
<div class="pl-3">
<label class="block text-xs font-medium text-muted-foreground mb-1">AGC Strength</label>
<select
(change)="onStrengthChange($event)"
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
>
<option value="low" [selected]="voiceLeveling.strength() === 'low'">
Low (gentle)
</option>
<option value="medium" [selected]="voiceLeveling.strength() === 'medium'">
Medium
</option>
<option value="high" [selected]="voiceLeveling.strength() === 'high'">
High (aggressive)
</option>
</select>
</div>
<!-- Max Gain Boost -->
<div class="pl-3">
<label class="block text-xs font-medium text-muted-foreground mb-1">
Max Gain Boost: {{ voiceLeveling.maxGainDb() }} dB
</label>
<input
type="range"
[value]="voiceLeveling.maxGainDb()"
(input)="onMaxGainDbChange($event)"
min="3"
max="20"
step="1"
class="w-full h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
/>
<div class="flex justify-between text-[10px] text-muted-foreground/60 mt-0.5">
<span>3 dB (subtle)</span>
<span>20 dB (strong)</span>
</div>
</div>
<!-- Response Speed -->
<div class="pl-3">
<label class="block text-xs font-medium text-muted-foreground mb-1">
Response Speed
</label>
<select
(change)="onSpeedChange($event)"
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
>
<option value="slow" [selected]="voiceLeveling.speed() === 'slow'">
Slow (natural)
</option>
<option value="medium" [selected]="voiceLeveling.speed() === 'medium'">
Medium
</option>
<option value="fast" [selected]="voiceLeveling.speed() === 'fast'">
Fast (aggressive)
</option>
</select>
</div>
<!-- Noise Floor Gate -->
<div class="pl-3 flex items-center justify-between">
<div>
<p class="text-sm font-medium text-foreground">Noise Floor Gate</p>
<p class="text-xs text-muted-foreground">Prevents boosting silence</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
[checked]="voiceLeveling.noiseGate()"
(change)="onNoiseGateToggle()"
class="sr-only peer"
/>
<div
class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
></div>
</label>
</div>
</div>
}
</div>
</section>
</div>

View File

@@ -2,9 +2,10 @@ import { Component, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMic, lucideHeadphones, lucideAudioLines } from '@ng-icons/lucide';
import { lucideMic, lucideHeadphones, lucideAudioLines, lucideActivity } from '@ng-icons/lucide';
import { WebRTCService } from '../../../../core/services/webrtc.service';
import { VoiceLevelingService } from '../../../../core/services/voice-leveling.service';
import { STORAGE_KEY_VOICE_SETTINGS } from '../../../../core/constants';
interface AudioDevice {
@@ -21,12 +22,14 @@ interface AudioDevice {
lucideMic,
lucideHeadphones,
lucideAudioLines,
lucideActivity,
}),
],
templateUrl: './voice-settings.component.html',
})
export class VoiceSettingsComponent {
private webrtcService = inject(WebRTCService);
readonly voiceLeveling = inject(VoiceLevelingService);
inputDevices = signal<AudioDevice[]>([]);
outputDevices = signal<AudioDevice[]>([]);
@@ -151,4 +154,34 @@ export class VoiceSettingsComponent {
await this.webrtcService.toggleNoiseReduction(this.noiseReduction());
this.saveVoiceSettings();
}
/* ── Voice Leveling handlers ───────────────────────────────── */
onVoiceLevelingToggle(): void {
this.voiceLeveling.setEnabled(!this.voiceLeveling.enabled());
}
onTargetDbfsChange(event: Event): void {
const input = event.target as HTMLInputElement;
this.voiceLeveling.setTargetDbfs(parseInt(input.value, 10));
}
onStrengthChange(event: Event): void {
const select = event.target as HTMLSelectElement;
this.voiceLeveling.setStrength(select.value as 'low' | 'medium' | 'high');
}
onMaxGainDbChange(event: Event): void {
const input = event.target as HTMLInputElement;
this.voiceLeveling.setMaxGainDb(parseInt(input.value, 10));
}
onSpeedChange(event: Event): void {
const select = event.target as HTMLSelectElement;
this.voiceLeveling.setSpeed(select.value as 'slow' | 'medium' | 'fast');
}
onNoiseGateToggle(): void {
this.voiceLeveling.setNoiseGate(!this.voiceLeveling.noiseGate());
}
}