66e1c3b54e95ff38f144ca1fd08086b72c8d980f
🎵 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.
- Apple ProRes 4444 (
- 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
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
- Rendere dein Video in Orfel Viz im Format Apple ProRes 4444 oder QuickTime Animation RLE.
- Ziehe die heruntergeladene
.mov-Datei in den DaVinci Resolve Media Pool. - Lege deinen Video-Hintergrund auf Videospur V1.
- Lege die exportierte
.mov-Datei auf Videospur V2. - 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.
Languages
JavaScript
77.8%
HTML
15.2%
CSS
5.2%
Python
1.3%
Shell
0.3%
Other
0.1%