2026-08-09 12:51:13 +02:00
2026-08-09 20:51:13 +02:00

🎵 Orfel Viz - Studio Audio Visualizer Suite

High-Performance Audio Visualizer Web-Anwendung mit hardware-beschleunigtem Offline-Render-Engine und echtem Alphakanal-Export für DaVinci Resolve, Adobe Premiere Pro und YouTube / Social Media.


🌟 Highlights & Features

  • Echter Alphakanal (Transparenz):
    • Apple ProRes 4444 (.mov): Unkomprimierter 10-Bit Broadcast-Master mit makellosem Alphakanal.
    • QuickTime Animation RLE (.mov): 100 % verlustfreier RGB+Alpha-Export, blitzschnell gerendert und kompakt.
    • WebM VP9 (.webm): Extrem kompakter transparenter Stream für Web-Overlays.
    • MP4 Video (.mp4): Broadcast CRF 14 H.264 für direkten YouTube- und Social-Media-Upload.
  • Topologie & Formen: Kreis, Dreieck, Hexagon, Diamond, Octagon, Oszilloskop, 3D Retro Grid & Tunnel.
  • Spektrum-Modi: Radial Bars, Solid Waveform, Outline Waves, Concentric Energy Rings, Mirrored Center.
  • Typografie & Customizing:
    • Individuelle Schalter für Titel, Artist, Timecode und Fortschrittsbalken.
    • Einstellbare Schriftarten (Outfit, Montserrat, Inter, Orbitron, Russo One, Cinzel, Syncopate), Farben, Größen, Groß-/Kleinschreibung und Neon-Glow.
  • Presets & Paletten: Über 16 kuratierte Studio-Presets (Trap Nation, NCS Electro, Synthwave, Cyberpunk, Toxic Emerald, etc.) + JSON Import/Export.
  • Format-Umschaltung: 16:9 (YouTube Standard), 9:16 (TikTok / YouTube Shorts / Instagram Reels) inkl. Safe-Zone Overlay, 1:1 (Quadratisch).

🚀 Schnellstart (Lokal)

Voraussetzungen

  • Node.js (Version 18 oder höher)
  • FFmpeg (im System-PATH hinterlegt)

Installation & Start

# Abhängigkeiten installieren
npm install

# Server starten
npm start

Öffne anschließend http://localhost:3000 in deinem Browser (Chrome / Edge / Firefox).

Unter Windows kannst du auch einfach doppelt auf Start-Local.bat klicken.


🌐 Server Deployment (Linux VPS / Hetzner / DigitalOcean)

Option A: Docker (Empfohlen)

Die Anwendung enthält bereits eine produktionsreife Dockerfile und docker-compose.yml inklusive Node.js und FFmpeg.

# 1. Repository auf den Server klonen
git clone <dein-repo-url> orfel-viz
cd orfel-viz

# 2. Container im Hintergrund starten
docker compose up -d

Fertig! Die App läuft unter http://<deine-server-ip>:3000.

Option B: Mit Deployment-Skript

chmod +x deploy.sh
./deploy.sh

Option C: Mit PM2 (Ohne Docker)

sudo apt update && sudo apt install -y nodejs npm ffmpeg
npm install
npm install -g pm2
pm2 start server.mjs --name "orfel-viz"
pm2 save
pm2 startup

🔒 Nginx Reverse Proxy & SSL (Optional)

Beispiel-Konfiguration für Nginx (/etc/nginx/sites-available/viz.deinedomain.de):

server {
    server_name viz.deinedomain.de;

    # Maximale Upload-Größe für große Audiodateien und Frame-Batches
    client_max_body_size 500M;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 600s;
        proxy_send_timeout 600s;
    }
}

SSL-Zertifikat via Let's Encrypt aktivieren:

sudo certbot --nginx -d viz.deinedomain.de

🎬 Workflow in DaVinci Resolve

  1. Rendere dein Video in Orfel Viz im Format Apple ProRes 4444 oder QuickTime Animation RLE.
  2. Ziehe die heruntergeladene .mov-Datei in den DaVinci Resolve Media Pool.
  3. Lege deinen Video-Hintergrund auf Videospur V1.
  4. Lege die exportierte .mov-Datei auf Videospur V2.
  5. DaVinci Resolve erkennt den Alphakanal automatisch („Straight“ Alpha). Der Visualizer liegt sofort perfekt freigestellt über deinem Video!

📄 Lizenz

MIT License. Erstellt für professionelle Audio-Visualisierungen.

S
Description
No description provided
Readme
7.7 MiB
0 Stars 1 Watchers 0 Forks
Languages
JavaScript 77.8%
HTML 15.2%
CSS 5.2%
Python 1.3%
Shell 0.3%
Other 0.1%