Installationsprinzip
Um den VoiceDropper Audio Player zu verwenden, bindest du zuerst die Bibliothek in deine Website ein und platzierst anschließend das Ziel-Element an der Stelle, an der der Player erscheinen soll.
Schritt 1: Bibliothek einbinden
Die Bibliothek muss in den Ressourcen deiner Website geladen werden, bevor du den Player initialisierst.
Schritt 2: Ziel-Element platzieren
Setze das Player-Element in den <body> deiner Seite. An dieser Stelle wird der Audio Player gerendert.
Schritt 3: Audio-ID oder Content Target verwenden
Je nach Integration kannst du direkt mit einer Audio-ID arbeiten oder ein Content Target definieren, das im Auto Mode ausgewertet wird.
Worauf du achten solltest
- Die Bibliothek muss vor der Initialisierung verfügbar sein.
- Das Ziel-Element sollte nur einmal pro Player verwendet werden.
- Wenn du mehrere Instanzen einsetzt, halte IDs und Selektoren sauber getrennt.
- Teste das Einbinden immer zuerst auf einer öffentlich erreichbaren Seite.
WordPress-Plugin
Das offizielle VoiceDropper-Plugin für WordPress installiert und lädt die VoiceDropper-Bibliothek automatisch. Du musst weder dein Theme bearbeiten noch das Installationsskript manuell hinzufügen.
1. Plugin installieren und aktivieren
Öffne im WordPress-Dashboard Plugins → Neues Plugin hinzufügen, suche nach VoiceDropper und installiere und aktiviere das Plugin.
2. Projekt für die Website erstellen
Jede Website muss mit einem eigenen VoiceDropper-Projekt und einem eindeutigen Client Key verbunden sein. Erstelle oder öffne in VoiceDropper das Projekt für diese Website, öffne den Bereich Installation und kopiere den Client Key.
3. WordPress verbinden
Öffne VoiceDropper im WordPress-Adminmenü, füge den Client Key ein und speichere ihn. Nach der Verbindung lädt das Plugin automatisch die richtige VoiceDropper-Bibliothek auf der öffentlichen Website.
4. Einbettungsmethode auswählen
Nach der Verbindung kannst du Audio auf zwei Arten in WordPress veröffentlichen:
- Veröffentlichtes Speech: Erstelle und veröffentliche ein Speech in VoiceDropper und füge dessen Embed-Tag mit der generierten Speech ID in einen individuellen HTML-Block in WordPress ein.
- Auto Mode: Konfiguriere Auto Mode für das Projekt und definiere das Seitenelement, das VoiceDropper lesen soll. Das Audio-Erlebnis wird anschließend automatisch aus diesem Ziel erzeugt.
Beispiel für ein veröffentlichtes Speech
<voicedropper data-speech="[YOUR_SPEECH_ID]"></voicedropper>Auto-Mode-Beispiel
<voicedropper data-mode="auto" data-content-target="#article"></voicedropper>Nach der Installation
Nach dem Setup kannst du Farben, Labels, Verhalten und Tracking des Players anpassen. Diese Themen findest du in den nachfolgenden Dokumenten.