PWAが話し始めたとき

WaveNetを使用して記事の音声合成を追加する

私たちがスピーチについて話すときに私たちが話すこと

すべての記事を他のさまざまな言語に自動翻訳するように設定した後、次に実装できる最新の便利な機能について考え始めました。私の投稿を読むことが最も楽しい経験の1つであることに絶対に同意するので、自動音声合成サービスを使用すると、記事のUXがさらに向上する可能性があると思いました。したがって、計画は単純でした。記事のテキストの先頭に、ユーザーがブラウザのオーディオプレーヤーを介してそれを聞くことができる新しいアクションを追加します。

方法:音声合成

現在のアプリのアーキテクチャを確認した後、自動音声合成とオーディオプレーヤーでPWAを強化するために、次のワークフローが実装されました。

  1. 標準のオプションの代わりに(多くの)価格設定のWaveNetオプションを使用して、GCPのテキスト読み上げサービスを介して合成を実装する
  2. 作成したmp3ファイルをFirebaseStorageに保存します。これは、GCPでもホストされているシンプルなファイルシステムです。ファイルの名前は、記事のスラッグと使用されているロケールで構成されます。これにより、暗黙のIDが得られ、特定の音声のすべてのURLへの参照を保持する個別のドキュメントの追加が回避されます。
  3. 次に、記事ページを作成または更新するときに、Vercelサーバーで上記の2つの手順を呼び出します。これは、現在、最大で24時間ごとに行われます。
  4. オーディオURLが利用可能な場合にWebプレーヤーに遅延読み込みを使用する

怠惰であることは重要です

ウェブアプリケーションの読み込みパフォーマンス(結果として検索エンジンのランキング)を損なうことはしたくないので、ウェブプレーヤーは次の2つの条件が満たされた後にのみオンデマンドで読み込まれます。

  • 記事の音声URLが実際に利用可能です。これは現在、主にコストを抑えるために英語のテキストにのみ適用されます。
  • ユーザーが再生ボタンをクリックして、読み上げた記事を実際に聞きたいことを示します

なぜすべての言語ではないのですか(今のところ)?

実際の音声合成モデルとしてGoogleのWaveNetを使用しているため、この機能のコストを主な懸念事項として考慮する必要があります。 WaveNetの使用には、標準の合成モデルの4倍の費用がかかります。それでも、WaveNetは、Google自体だけでなく、たとえばIBMからも、他のほとんどのモデルよりも大幅に優れているため、私はそれを選択しました。

始まったばかり

これは、このPWAの最初のバージョンで音声合成を実装した方法の概要です。セットアップのほとんどはGCPの顧客であるため、コーディングにかかる時間はわずか数時間でした。生成された出力は非常に優れているように聞こえます。これは、WaveNetおよびMLベースの音声およびテキスト処理へのアプローチの長所を示しています。将来の実装では、サポートされているすべての言語の読み上げが追加される可能性があります。今後数ヶ月の使用量と費用に基づいて、この場合の進め方を決定します。

トム