Wenn Ihre PWA zu sprechen beginnt

Verwenden von WaveNet zum Hinzufügen von Sprachsynthese für Artikel

Worüber wir reden, wenn wir über Sprache sprechen

Nachdem ich die automatische Übersetzung aller meiner Artikel in verschiedene andere Sprachen eingerichtet hatte, machte ich mir Gedanken, was ich als nächstes modernes und nützliches Feature implementieren könnte. Da Sie absolut zustimmen werden, dass das Lesen meiner Beiträge eine der schönsten Erfahrungen ist, dachte ich, dass die Verwendung eines automatischen Sprachsynthesedienstes die UX des Artikels noch weiter verbessern könnte. Der Plan war daher einfach: Ich füge am Anfang eines Artikeltextes eine neue Aktion hinzu, die es Nutzern ermöglicht, ihn über den Audioplayer des Browsers anzuhören.

Gewusst wie: Sprachsynthese

Nachdem ich mir die Architektur der aktuellen App angeschaut habe, wurde folgender Workflow implementiert, um die PWA mit automatischer Sprachsynthese und einem Audioplayer zu erweitern:

  1. Umsetzung der Synthese über den Text-to-Speech-Service von GCP unter Verwendung der (sehr) teureren WaveNet-Option anstelle der Standardoption
  2. Speichern der erstellten mp3-Datei in Firebase Storage, einem einfachen Dateisystem, das ebenfalls in der GCP gehostet wird; Der Name der Datei besteht aus dem Slug des Artikels und dem verwendeten Gebietsschema, was mir eine implizite ID gibt und das Hinzufügen eines separaten Dokuments vermeidet, das auf alle URLs für eine bestimmte Rede verweist
  3. dann rufe ich beim Erstellen oder Aktualisieren einer Artikelseite die beiden obigen Schritte auf dem Vercel-Server auf, was derzeit maximal alle 24 Stunden geschieht happens
  4. Verwenden von Lazy Loading für den Webplayer, falls eine Audio-URL verfügbar ist

Faul sein ist wichtig

Ich möchte die Ladeleistung meiner Webanwendungen (und folglich das Suchmaschinen-Ranking) nicht beeinträchtigen, daher wird der Webplayer bei Bedarf erst geladen, wenn zwei Bedingungen erfüllt sind:

  • Tatsächlich ist eine Audio-URL für den Artikel vorhanden, die derzeit nur für englische Texte gilt, um die Kosten hauptsächlich gering zu halten
  • Ein Benutzer klickt auf den Play-Button und zeigt damit den Wunsch an, den vorgelesenen Artikel tatsächlich anzuhören

Warum nicht alle Sprachen (vorerst)?

Aufgrund der Verwendung von Googles WaveNet als eigentliches Sprachsynthesemodell muss ich die Kosten für diese Funktion als Hauptproblem berücksichtigen. Die Nutzung von WaveNet kostet das Vierfache des Standardsynthesemodells. Dennoch habe ich es gewählt, da WaveNet die meisten anderen Modelle weit übertrifft, nicht nur von Google selbst, sondern zum Beispiel auch von IBM.

Nur der Anfang

Dies war ein kurzer Überblick, wie ich in einer ersten Version für diese PWA Sprachsynthese implementiert habe. Die Codierung dauerte nur wenige Stunden, da ich als GCP-Kunde den größten Teil der Einrichtung bereits erledigen ließ. Die generierte Ausgabe klingt unglaublich gut, was die Stärken von WaveNet und ML-basierten Ansätzen für Sprache sowie Textverarbeitung zeigt. Eine zukünftige Implementierung könnte das Vorlesen für alle unterstützten Sprachen hinzufügen. Anhand der Nutzung und Kosten in den kommenden Monaten werde ich festlegen, wie in diesem Fall vorzugehen ist.

Tom