# Audio Guide - NIP-05 Tutorial Video

Dieser Guide erklärt, wie du Musik und Sound-Effekte zum Video hinzufügst.

## 📁 Ordnerstruktur

Erstelle folgende Ordner im `public/` Verzeichnis:

```
public/
├── music/
│   └── background-music.mp3
└── sfx/
    ├── logo-whoosh.mp3
    ├── logo-reveal.mp3
    ├── card-slide.mp3
    ├── ui-appear.mp3
    ├── typing.mp3
    ├── slide-in.mp3
    ├── button-hover.mp3
    ├── button-click.mp3
    ├── success-chime.mp3
    ├── success-fanfare.mp3
    ├── badge-appear.mp3
    ├── checkmark-pop.mp3
    ├── outro-entrance.mp3
    ├── url-emphasis.mp3
    └── final-chime.mp3
```

## 🎵 Benötigte Audio-Dateien

### Hintergrundmusik (Optional)

**Datei:** `music/background-music.mp3`
**Beschreibung:** Motivierende, moderne elektronische Musik
**Dauer:** ~40 Sekunden (zum Loopen)
**Stimmung:** Energetisch, technologisch, Bitcoin/Crypto-Theme

**Suchbegriffe:**
- "tech background music"
- "corporate technology music"
- "modern electronic beat"
- "crypto blockchain music"
- "upbeat tech loop"

### Sound-Effekte

#### 1. Logo Whoosh (Intro - 0s)
**Datei:** `sfx/logo-whoosh.mp3`
**Beschreibung:** Schneller Whoosh/Swoosh für Logo-Entrance
**Dauer:** ~0.5s
**Suchbegriffe:** "whoosh", "swoosh", "fast transition", "logo reveal"

#### 2. Logo Reveal (Intro - 0.5s)
**Datei:** `sfx/logo-reveal.mp3`
**Beschreibung:** Heller Chime/Bell für Logo-Erscheinen
**Dauer:** ~1s
**Suchbegriffe:** "chime", "bell", "reveal", "logo ding", "notification"

#### 3. Card Slide (UI Showcase - 4s)
**Datei:** `sfx/card-slide.mp3`
**Beschreibung:** Sanfter Slide/Swoosh für Karten-Animation
**Dauer:** ~0.5s
**Suchbegriffe:** "slide in", "swoosh", "card appear", "UI transition"

#### 4. UI Appear (UI Showcase - 4.5s)
**Datei:** `sfx/ui-appear.mp3`
**Beschreibung:** Leichter Pop/Click für UI-Elemente
**Dauer:** ~0.3s
**Suchbegriffe:** "pop", "bubble", "UI click", "soft notification"

#### 5. Typing (Input Demo - 10s)
**Datei:** `sfx/typing.mp3`
**Beschreibung:** Tastatur-Typing Sound (Loop oder lang)
**Dauer:** ~2s
**Suchbegriffe:** "keyboard typing", "mechanical keyboard", "type sound", "typing loop"

#### 6. Slide In (Input Demo - 12.5s)
**Datei:** `sfx/slide-in.mp3`
**Beschreibung:** Slide für Rules-Box
**Dauer:** ~0.4s
**Suchbegriffe:** "slide", "smooth transition", "panel slide"

#### 7. Button Hover (Save Button - 19.5s)
**Datei:** `sfx/button-hover.mp3`
**Beschreibung:** Subtiler Hover-Sound
**Dauer:** ~0.2s
**Suchbegriffe:** "button hover", "UI hover", "soft beep", "subtle click"

#### 8. Button Click (Save Button - 20s)
**Datei:** `sfx/button-click.mp3`
**Beschreibung:** Klarer Button-Click
**Dauer:** ~0.3s
**Suchbegriffe:** "button click", "UI button", "click", "press button"

#### 9. Success Chime (Save Button - 20.5s)
**Datei:** `sfx/success-chime.mp3`
**Beschreibung:** Positiver Success-Sound
**Dauer:** ~1s
**Suchbegriffe:** "success", "achievement", "positive chime", "notification success"

#### 10. Success Fanfare (Verification - 23s)
**Datei:** `sfx/success-fanfare.mp3`
**Beschreibung:** Celebration/Achievement Sound
**Dauer:** ~2s
**Suchbegriffe:** "fanfare", "victory", "achievement", "level up", "success fanfare"

#### 11. Badge Appear (Verification - 23.5s)
**Datei:** `sfx/badge-appear.mp3`
**Beschreibung:** Sparkle/Shimmer für Badge
**Dauer:** ~0.5s
**Suchbegriffe:** "sparkle", "shimmer", "magic", "badge unlock", "achievement pop"

#### 12. Checkmark Pop (Verification - 25s)
**Datei:** `sfx/checkmark-pop.mp3`
**Beschreibung:** Pop für Checkmark
**Dauer:** ~0.3s
**Suchbegriffe:** "pop", "bubble pop", "checkmark", "confirm sound"

#### 13. Outro Entrance (Outro - 28s)
**Datei:** `sfx/outro-entrance.mp3`
**Beschreibung:** Eleganter Entrance für Outro
**Dauer:** ~1s
**Suchbegriffe:** "elegant whoosh", "smooth transition", "outro intro"

#### 14. URL Emphasis (Outro - 30s)
**Datei:** `sfx/url-emphasis.mp3`
**Beschreibung:** Attention-grabbing Sound für URL
**Dauer:** ~1.5s
**Suchbegriffe:** "emphasis", "attention", "important", "highlight sound", "focus"

#### 15. Final Chime (Outro - 36s)
**Datei:** `sfx/final-chime.mp3`
**Beschreibung:** Abschließender harmonischer Chime
**Dauer:** ~2s
**Suchbegriffe:** "final chime", "ending bell", "closure", "harmonious end"

## 🌐 Lizenzfreie Audio-Quellen

### Kostenlos & Hochwertig

1. **Pixabay Sound Effects** (Empfohlen!)
   - URL: https://pixabay.com/sound-effects/
   - Lizenz: Pixabay License (kostenlose kommerzielle Nutzung)
   - Qualität: Sehr gut
   - Suche: Englische Begriffe verwenden

2. **Freesound.org**
   - URL: https://freesound.org/
   - Lizenz: Creative Commons (verschiedene, CC0 bevorzugen)
   - Qualität: Variiert
   - Hinweis: Account erforderlich

3. **ZapSplat**
   - URL: https://www.zapsplat.com/
   - Lizenz: Kostenlos mit Namensnennung
   - Qualität: Professionell
   - Hinweis: Account erforderlich

4. **Mixkit**
   - URL: https://mixkit.co/free-sound-effects/
   - Lizenz: Mixkit License (frei verwendbar)
   - Qualität: Sehr gut
   - Kategorien: Gut sortiert

5. **Adobe Sound Effects** (Kostenlos)
   - URL: https://www.adobe.com/products/audition/offers/AdobeAuditionDLCSFX.html
   - Lizenz: Kostenlos für Adobe-Nutzer
   - Qualität: Professionell

### Musik-Spezifisch

1. **Pixabay Music**
   - URL: https://pixabay.com/music/
   - Lizenz: Kostenlos
   - Gut für Background Music

2. **YouTube Audio Library**
   - URL: https://studio.youtube.com/ → Audio Library
   - Lizenz: Meist frei verwendbar
   - Große Auswahl

3. **Incompetech**
   - URL: https://incompetech.com/music/
   - Lizenz: CC BY (mit Namensnennung)
   - Bekannt für Royalty-Free Music

## 🎬 Audio aktivieren/deaktivieren

### Einzelne Sounds deaktivieren

Kommentiere einfach die entsprechende `<Audio>`-Komponente in `src/components/AudioManager.tsx` aus:

```tsx
{/* Dieser Sound ist deaktiviert
<Sequence from={0}>
  <Audio src={staticFile("sfx/logo-whoosh.mp3")} volume={0.6} />
</Sequence>
*/}
```

### Hintergrundmusik aktivieren

Entferne die Kommentare um die Background Music in `AudioManager.tsx`:

```tsx
<Audio
  src={staticFile("music/background-music.mp3")}
  volume={0.3}
  loop
/>
```

### Lautstärke anpassen

Ändere den `volume` Wert (0.0 bis 1.0):

```tsx
<Audio src={staticFile("sfx/button-click.mp3")} volume={0.8} />
```

## 🔧 Tipps & Best Practices

### Lautstärke-Balance

- **Hintergrundmusik:** 0.2 - 0.4 (leise)
- **Wichtige UI-Sounds:** 0.4 - 0.6 (mittel)
- **Success/Celebration:** 0.5 - 0.7 (laut)
- **Subtile Effekte:** 0.2 - 0.4 (sehr leise)

### Audio-Dateien optimieren

1. **Format:** MP3 (beste Kompatibilität)
2. **Bitrate:** 128-192 kbps (gute Qualität, kleine Dateigröße)
3. **Sample Rate:** 44.1 kHz (Standard)
4. **Mono vs Stereo:** Stereo für Musik, Mono oft ausreichend für SFX

### Conversion Tools

- **Audacity** (kostenlos): https://www.audacityteam.org/
- **Online Audio Converter**: https://online-audio-converter.com/

### Timing anpassen

Wenn ein Sound zu früh/spät kommt, ändere den `from` Wert in `AudioManager.tsx`:

```tsx
<Sequence from={4.2 * fps}> {/* Verschoben von 4s auf 4.2s */}
  <Audio src={staticFile("sfx/card-slide.mp3")} volume={0.4} />
</Sequence>
```

## ✅ Schnellstart-Checklist

1. ✅ `@remotion/media` installiert (bereits erledigt)
2. ✅ `AudioManager.tsx` erstellt (bereits erledigt)
3. ✅ AudioManager in `Nip05Tutorial.tsx` eingebunden (bereits erledigt)
4. ⏳ Ordner `public/music/` und `public/sfx/` erstellen
5. ⏳ Sound-Dateien von Pixabay/Freesound herunterladen
6. ⏳ Dateien in die richtigen Ordner kopieren
7. ⏳ Video im Remotion Studio testen
8. ⏳ Lautstärken nach Bedarf anpassen

## 🎯 Empfohlenes Vorgehen

### Phase 1: Wichtigste Sounds (5 Minuten)
Starte mit diesen essentiellen Sounds:
1. `button-click.mp3` (Save Button)
2. `success-chime.mp3` (Erfolg)
3. `typing.mp3` (Input Demo)

### Phase 2: UI-Feedback (5 Minuten)
Füge UI-Interaktionen hinzu:
4. `card-slide.mp3`
5. `ui-appear.mp3`
6. `slide-in.mp3`

### Phase 3: Polish (10 Minuten)
Vervollständige das Erlebnis:
7. Alle restlichen SFX
8. Hintergrundmusik (optional)
9. Feintuning der Lautstärken

## 🎼 Musik-Alternative: AI-generierte Musik

Falls du Musik generieren lassen möchtest (nicht durch mich, aber durch spezialisierte Tools):

1. **Suno AI** (suno.ai) - AI Music Generator
2. **Mubert** (mubert.com) - AI Music für Videos
3. **AIVA** (aiva.ai) - AI Composer
4. **Soundraw** (soundraw.io) - Customize AI Music

Prompt-Beispiel für Bitcoin/Tech-Musik:
```
"Upbeat electronic background music, modern tech vibe,
cryptocurrency theme, motivational, 120 BPM, loop-friendly,
no vocals, 40 seconds"
```

## 🆘 Troubleshooting

### Audio spielt nicht
- Prüfe, ob die Datei im richtigen Ordner liegt
- Dateiname korrekt? (case-sensitive!)
- Format ist MP3?

### Audio ist zu leise/laut
- Passe `volume` Wert an (0.0 - 1.0)
- Prüfe Lautstärke der Originaldatei

### Audio ist nicht synchron
- Ändere `from` Wert in Frames
- Nutze `fps` Variable: `from={4.5 * fps}`

### Audio wird nicht gerendert
- `@remotion/media` installiert?
- Importiert in `AudioManager.tsx`?
- `AudioManager` in Hauptkomposition eingebunden?

---

Viel Erfolg beim Sound-Design! 🎵🔊