einundzwanzig-verein/videos/AUDIO_GUIDE.md

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:

{/* 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:

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

Lautstärke anpassen

Ändere den volume Wert (0.0 bis 1.0):

<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:

<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! 🎵🔊