🚀 Bereit für Ihre digitale Transformation?
Vereinbaren Sie ein unverbindliches Strategiegespräch
📊 Business Value
Dieses Web-Frontend macht den Hörbuch-Generator für jeden nutzbar — ohne Python-Installation, ohne Kommandozeile. JSON-Datei per Drag & Drop hochladen, ein Klick, Audio-Dateien werden generiert.
⚙️ Web-App Workflow
JSON Upload
Nutzer lädt eine JSON-Datei mit Dialog/Erzähler-Struktur hoch (von GPT-4 voranalysiert).
AJAX Request
jQuery sendet die Datei per FormData asynchron an generate_audio.php.
PHP Audio-Generator
Backend verarbeitet JSON, ordnet Stimmen zu und generiert MP3s via ElevenLabs API.
Live-Ergebnis
Generierte Dateiliste erscheint im #resultContainer ohne Page-Reload.
💻 Echter Code aus dem Projekt
Code aus D:\arbeit\git\hoerbuch_web\. Ein PHP-Backend mit jQuery-Frontend,
das JSON-Dateien entgegennimmt und ElevenLabs Audio generiert.
📄 HTML Formular mit File-Upload (index.php)
<form id="audioForm">
<div class="form-group">
<label for="jsonFile">JSON-Datei hochladen:</label>
<input type="file" class="form-control-file"
id="jsonFile" accept=".json" required>
</div>
<button type="submit" class="btn btn-primary">
Hörspiel generieren
</button>
</form>
<div id="resultContainer"></div>
🔄 jQuery AJAX File-Upload (script.js)
$(document).ready(function() {
$('#audioForm').submit(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('jsonFile',
$('#jsonFile')[0].files[0]);
$.ajax({
url: 'generate_audio.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#resultContainer').html(response);
},
error: function() {
alert('Es ist ein Fehler aufgetreten.');
}
});
});
});
🎙️ PHP Audio-Generator Backend (generate_audio.php)
if ($_SERVER['REQUEST_METHOD'] === 'POST'
&& isset($_FILES['jsonFile'])) {
$jsonData = file_get_contents(
$_FILES['jsonFile']['tmp_name']);
$data = json_decode($jsonData, true);
// Charaktere aus JSON extrahieren
$characters = array_unique(array_column(
array_filter($data, function($item) {
return $item['typ'] === 'Charakter';
}), 'name'));
$characters[] = 'Erzähler';
// Stimmen zuweisen & Audio generieren
$voiceAssignments = assignVoices($characters);
foreach ($data as $index => $item) {
$audio = generateAudio($item['text'],
$voiceId, $voiceSettings);
$filename = sprintf('%03d_%s.mp3',
$index + 1,
$item['name'] ?? 'unbekannt');
file_put_contents($filename, $audio);
}
}
🔑 API-Key Konfiguration (config.php)
<?php
define('API_KEY', 'DEIN_ELEVENLABS_API_KEY');
?>
💻 Tech-Stack
🚀 Web-App für Jedermann — kein Python nötig
🎯 Strategische Erkenntnisse
Web-First senkt Einstiegshürde
Kein Endanwender installiert Python für ein Tool. Die Web-Version eliminiert diese Barriere komplett — Browser öffnen, loslegen.
Der beste Code nutzt nichts, wenn ihn keiner bedienen kann.
API-Key im Backend = Sicherheit
Der ElevenLabs-API-Key liegt ausschließlich serverseitig in config.php. Kein Exposure im Client-JavaScript, keine CORS-Probleme.
Sensitive Keys gehören ins Backend. Immer.
Frontend-Backend-Trennung
jQuery spricht mit einem PHP-Endpoint. Morgen könnte ein React-Frontend denselben Endpoint nutzen — zero Backend-Änderungen.
Entkoppelte Architektur = maximale Flexibilität bei minimalen Kosten.
Bootstrap als Universalsprache
Bootstrap 4 ist der gemeinsame Nenner für Designer und Entwickler. Kein CSS-Diskussion — Klassen-Namen sprechen für sich.
Standardisierte UI-Frameworks eliminieren Design-Debatten.
Ihr Tool als Web-App verfügbar machen?
Als Brückenbauer zwischen Business und Technik unterstütze ich Sie bei der Webifizierung Ihrer Tools — pragmatisch, ergebnisorientiert, ohne Berater-Bullshit.