Amazon Polly を使用してウェブページを読み、コンテンツをハイライトする

この投稿では、使用方法を示します Amazon Pollyテキストを生き生きとした音声に変換する主要なクラウド サービスであり、Web ページのコンテンツを読み上げ、読み上げているコンテンツを強調表示します。 Web ページにオーディオ再生を追加すると、ページのアクセシビリティと訪問者のエクスペリエンスが向上します。 オーディオで強化されたコンテンツは、よりインパクトがあり記憶に残り、ページへのトラフィックを増やし、訪問者の購買力を活用します。 また、ページを公開する会社または組織のブランドを向上させます。 テキスト読み上げテクノロジは、これらのビジネス上の利点を実現可能にします。 Amazon Polly を使用してこの目標を達成する方法を示すことで、その旅を加速させます。

この機能は、障害を持つ訪問者のアクセシビリティを向上させ、組織のアクセシビリティ戦略の一部として採用できます。 同様に重要なのは、障害のない訪問者のページ エクスペリエンスを向上させることです。 どちらのグループもかなりの購買力を持っており、オーディオ エンハンスメントを使用して注意を引くページからより自由に支出できます。

ソリューションの概要

PollyReadsThePage (PRTP) — このソリューションを参照すると、Web ページの発行者はオーディオ コントロールを Web ページにドロップできます。 訪問者が選択した場合 プレイ コントロールでは、コントロールはページを読み取り、コンテンツを強調表示します。 PRTP は、Amazon Polly の一般的な機能を使用して、テキストから音声を合成します。 Amazon Polly を呼び出して、ページごとに XNUMX つのアーティファクトを生成します。

• ブラウザで再生可能な形式の音声コンテンツ：MP3
• テキストの各文について次のことを示すスピーチ マーク ファイル。
  • 文章が読み上げられる再生中の時間
  • 文が表示されるページ上の場所

訪問者が選択した場合 プレイ、ブラウザは MP3 ファイルを再生します。 オーディオが読み上げられると、ブラウザーは時間をチェックし、その時点でどの文を読み上げるかをマーク ファイルから見つけ、ページ上でその文を見つけて強調表示します。

PRTP を使用すると、訪問者はさまざまな声や言語で読むことができます。 各ボイスには、独自のファイルのペアが必要です。 PRTP はニューラル音声を使用します。 サポートされているニューラル音声と言語のリストについては、次を参照してください。 ニューラルボイス. Amazon Polly の標準音声とニューラル音声の完全なリストについては、次を参照してください。 Amazon Pollyの声.

静的ページと動的ページの XNUMX 種類の Web ページを検討します。 で 静的な コンテンツはページ内に含まれ、ページの新しいバージョンが公開された場合にのみ変更されます。 会社は、Web 構築プロセスの一環として、ページを毎日または毎週更新する場合があります。 このタイプのページの場合、ビルド時にオーディオ ファイルを事前に生成し、それらを Web サーバーに配置して再生することができます。 次の図に示すように、スクリプトは PRTP Pre-Gen Amazon Polly を呼び出して音声を生成します。 入力として HTML ページ自体と、オプションで、ページから抽出するテキストを指定する構成ファイル (Text Extract Config）。 抽出構成が省略されている場合、生成前スクリプトは、ページの本文から抽出するテキストを賢明に選択します。 Amazon Polly はファイルを Amazon シンプル ストレージ サービス (Amazon S3) バケット; スクリプトはそれらを Web サーバーにコピーします。 訪問者がオーディオを再生すると、ブラウザーは MP3 を Web サーバーから直接ダウンロードします。 ハイライトには、ドロップイン ライブラリ、 PRTP.js、マーク ファイルを使用して、読み取られているテキストを強調表示します。

の内容 ダイナミック ページは訪問者のインタラクションに応じて変化するため、音声を事前に生成することはできず、動的に合成する必要があります。 次の図に示すように、訪問者がオーディオを再生すると、ページは PRTP.js Amazon Polly でオーディオを生成し、静的ページと同じアプローチを使用して合成されたオーディオを強調表示します。 ブラウザから AWS のサービスにアクセスするには、訪問者は AWS ID が必要です。 の使用方法を示します。 アマゾンコグニート ID プールを使用して、ビジターが Amazon Polly と S3 バケットに十分なアクセスを許可し、音声をレンダリングできるようにします。

Mp3 オーディオ マークと音声マークの両方を生成するには、Polly サービスで同じ入力を XNUMX 回合成する必要があります。 を参照してください。 Amazon Polly 料金ページ コストへの影響を理解する。 合成は訪問者とのやり取りごとにオンデマンドで実行されるのではなく、ビルド時に実行されるため、事前生成によりコストが削減されます。

この投稿に付随するコードは、次のサイトでオープンソース リポジトリとして入手できます。 GitHubの.

ソリューションを調べるには、次の手順に従います。

1. pre-gen ビルド サーバー、S3 バケット、ウェブ サーバー、Amazon Cognito ID などのリソースをセットアップします。
2. 静的な pre-gen ビルドを実行し、静的ページをテストします。
3. 動的ページをテストします。

前提条件

この例を実行するには、 AWSアカウント Amazon Polly、Amazon S3、Amazon Cognito、および (デモ目的で) を使用する許可を得て AWS クラウド9.

リソースのプロビジョニング

私たちは共有します AWS CloudFormation テンプレートを使用して、アカウントに自己完結型のデモ環境を作成し、投稿をフォローするのに役立ちます。 独自の環境で PRTP をセットアップする場合は、の手順を参照してください。 README.md.

CloudFormation を使用してデモ環境をプロビジョニングするには、まず、 CloudFormationテンプレート. 次に、次の手順を実行します。

1. AWS CloudFormationコンソールで、 スタックを作成します。
2. 選択する 新しいリソースを使用（標準）.
3. 選択 テンプレートファイルをアップロードします。
4. 選択する ファイルを選ぶ ダウンロードしたテンプレートのローカル コピーをアップロードします。 ファイルの名前は prtp.yml.
5. 選択する Next.
6. 選択したスタック名を入力します。 後でこれを再度入力します。 .
7. デフォルト値を 計測パラメータ のセクションから無料でダウンロードできます。
8. 選択する Next.
9. 残りのセクションを続行します。
10. のチェック ボックスを読んで選択します。 機能 のセクションから無料でダウンロードできます。
11. 選択する スタックを作成.
12. スタックが完成したら、次の値を見つけます。 BucketName スタック出力で。

本番環境で使用する前に、セキュリティ チームと一緒にスタックを確認することをお勧めします。

AWS Cloud9 IDE でウェブサーバーと pre-gen サーバーをセットアップする

次に、AWS Cloud9 コンソールで、環境を見つけます PRTPDemoCloud9 CloudFormation スタックによって作成されます。 選ぶ IDEを開く AWS Cloud9 環境を開きます。 ターミナル ウィンドウを開き、次のコマンドを実行します。これにより、PRTP コードが複製され、生成前の依存関係が設定され、テスト用の Web サーバーが起動されます。

#Obtain PRTP code
cd /home/ec2-user/environment
git clone https://github.com/aws-samples/amazon-polly-reads-the-page.git

# Navigate to that code
cd amazon-polly-reads-the-page/setup

# Install Saxon and html5 Python lib. For pre-gen.
sh ./setup.sh <StackName>

# Run Python simple HTTP server
cd ..
./runwebserver.sh <IngressCIDR> 

、CloudFormation スタックに付けた名前を使用します。 為に で、Web サーバーへのアクセスを許可する IP アドレスの範囲を指定します。 ローカル マシンのブラウザへのアクセスを制限するには、次を使用して IP アドレスを見つけます。 https://whatismyipaddress.com/ と追加 /32 範囲を指定します。 たとえば、あなたのIPが 10.2.3.4, use 10.2.3.4/32. サーバーはポート 8080 でリッスンします。サーバーがリッスンするパブリック IP アドレスが出力に示されます。 例えば：

Public IP is

3.92.33.223

静的ページのテスト

ブラウザで、次の場所に移動します PRTPStaticDefault.html. (デモを使用している場合、URL は http://<cloud9host>:8080/web/PRTPStaticDefault.htmlここで、 は、IDE のセットアップで検出したパブリック IP アドレスです)。 プレイ 上部のオーディオ コントロール。 音声を聞いて、ハイライトをご覧ください。 速度の変更、音声の変更、一時停止、早送り、巻き戻しなどの操作を試してみてください。 次のスクリーンショットはページを示しています。 「非表示の段落をスキップ」というテキストは、現在読み上げられているため強調表示されています。

同じことを試してください PRTPStaticConfig.html & PRTPStaticCustom.html. 結果は似ています。 たとえば、XNUMX 人全員が猫の写真の代替テキスト (「猫のランダムな写真」) を読み上げます。 XNUMX つすべてが、Amazon Polly レキシコンを利用して、NE、NW、SE、および SW を完全な単語 (「北東」、「北西」、「南東」、「南西」) として読みます。

オーディオの主な違いに注意してください。

• PRTPStaticDefault.html 「あなたの考えを一言で」、「クエリを送信」、「最終更新日 1 年 2020 月 XNUMX 日」、「開発チームへの質問」という下部のまとめ部分を含む、ページの本文のすべてのテキストを読み上げます。 PRTPStaticConfig.html & PRTPStaticCustom.html これらは音声合成からラップアップを明示的に除外しているため、読まないでください。
• PRTPStaticCustom.html を読む QBベストセラー 他とは違うテーブル。 最初の XNUMX 行のみを読み取り、各行の行番号を読み取ります。 行ごとに列を繰り返します。 PRTPStaticCustom.html カスタム変換を使用してテーブルの読み出しを調整します。 他のページでは、デフォルトのテーブル レンダリングが使用されます。
• PRTPStaticCustom.html 「Tom Brady」を他のテキストよりも大きな音量で読み上げます。 音声合成マークアップ言語 (SSML) を使用します。 prosody Tom Brady の読み方を調整するためのタグ。 他のページはこのように調整されていません。
• PRTPStaticCustom.html、カスタム変換のおかげで、メイン タイルを NW、SW、NE、SE の順に読み取ります。 つまり、「Today's Articles」、「Quote of the Day」、「Photo of the Day」、「Jokes of the Day」と表示されます。 他のページは、タイルが HTML に表示される自然な NW、NE、SW、SE の順序で表示されます: 「Today's Articles」、「Photo of the Day」、「Quote of the Day」、「Jokes of the日。"

音声がどのように生成されるか、ページがどのようにテキストを強調表示するかをさらに掘り下げてみましょう。

静的プレジェネレータ

GitHub リポジトリには、事前に生成されたオーディオ ファイルが含まれています。 PRPTStatic ただし、自分で生成する場合は、AWS Cloud9 IDE の bash シェルから次のコマンドを実行します。

# navigate to examples
cd /home/ec2-user/environment/amazon-polly-reads-the-page-blog/pregen/examples

# Set env var for my S3 bucket. Example, I called mine prtp-output
S3_BUCKET=prtp-output # Use output BucketName from CloudFormation

#Add lexicon for pronuniciation of NE NW SE NW
#Script invokes aws polly put-lexicon
./addlexicon.sh.

#Gen each variant
./gen_default.sh
./gen_config.sh
./gen_custom.sh

次に、これらのスクリプトがどのように機能するかを見てみましょう。

デフォルトのケース

私たちは gen_default.sh:

cd ..
python FixHTML.py ../web/PRTPStaticDefault.html  
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html generic.xslt example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticDefault compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticDefault compass

スクリプトは、Python プログラムを実行することから始まります。 FixHTML.py ソースHTMLファイルを作る PRTPStaticDefault.html 整形式。 整形式のバージョンのファイルを example/tmp_wff.html. この手順は、次の XNUMX つの理由から重要です。

• ほとんどのソース HTML は整形式ではありません。 この手順により、ソース HTML が整形式になるように修復されます。 たとえば、多くの HTML ページが閉じない P 要素。 この手順でそれらを閉じます。
• HTML ページのどこにテキストがあるかを追跡します。 ブラウザーが使用するのと同じドキュメント オブジェクト モデル (DOM) 構造を使用して場所を追跡する必要があります。 たとえば、ブラウザは自動的に TBODY へ TABLE. Python プログラムは、ブラウザーと同じ整形式の修復に従います。

gen_ssml.sh 整形式の HTML を入力として受け取り、それに XML スタイルシート変換 (XSLT) 変換を適用して、SSML ファイルを出力します。 (SSML は、テキストからオーディオをレンダリングする方法を制御するための Amazon Polly の言語です。) 現在の例では、入力は次のとおりです。 example/tmp_wff.html。 出力は example/tmp.ssml. 変換の仕事は、HTML から抽出して Amazon Polly にフィードするテキストを決定することです。 generic.xslt は、ほとんどの Web ページに適したデフォルトの XSLT 変換です。 次のコード スニペットの例では、オーディオ コントロール、HTML ヘッダー、および次のような HTML 要素が除外されます。 script & form. また、hidden 属性を持つ要素も除外します。 通常、次のようなテキストを含む要素が含まれます。 P, H1, SPAN. これらの場合、要素の完全な XPath 式を含むマークと要素の値の両方をレンダリングします。

<!-- skip the header -->
<xsl:template match="html/head">
</xsl:template>

<!-- skip the audio itself -->
<xsl:template match="html/body/table[@id='prtp-audio']">
</xsl:template>

<!-- For the body, work through it by applying its templates. This is the default. -->
<xsl:template match="html/body">
<speak>
      <xsl:apply-templates />
</speak>
</xsl:template>

<!-- skip these -->
<xsl:template match="audio|option|script|form|input|*[@hidden='']">
</xsl:template>

<!-- include these -->
<xsl:template match="p|h1|h2|h3|h4|li|pre|span|a|th/text()|td/text()">
<xsl:for-each select=".">
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <xsl:value-of select="normalize-space(.)"/>
</p>
</xsl:for-each>
</xsl:template>

以下は、レンダリングされる SSML のスニペットです。 これは、Amazon Polly への入力としてフィードされます。 たとえば、「非表示の段落をスキップ」というテキストが音声で読み上げられることに注意してください。これをマークに関連付けて、このテキストが XPath 式で指定されたページ上の場所にあることを示します。 /html/body[1]/div[2]/ul[1]/li[1].

<speak>
<p><mark name="/html/body[1]/div[1]/h1[1]"/>PollyReadsThePage Normal Test Page</p>
<p><mark name="/html/body[1]/div[2]/p[1]"/>PollyReadsThePage is a test page for audio readout with highlights.</p>
<p><mark name="/html/body[1]/div[2]/p[2]"/>Here are some features:</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[1]"/>Skips hidden paragraph</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[2]"/>Speaks but does not highlight collapsed content</p>
…
</speak>

Amazon Polly で音声を生成するには、スクリプトを呼び出します run_polly.sh。 それは実行されます AWSコマンドラインインターフェイス (AWS CLI) コマンド aws polly start-speech-synthesis-task 3 回: 3 回目は MPXNUMX オーディオを生成し、XNUMX 回目はマーク ファイルを生成します。 生成は非同期であるため、スクリプトは、指定された SXNUMX バケットで出力が見つかるまでポーリングします。 出力が見つかると、ビルド サーバーにダウンロードし、ファイルを web/polly フォルダ。 以下は、Web フォルダーのリストです。

• PRTPStaticDefault.html
• PRTPStaticConfig.html
• PRTPStaticCustom.html
• PRTP.js
• polly/PRTPStaticDefault/Joanna.mp3、Joanna.marks、Matthew.mp3、Matthew.marks
• polly/PRTPStaticConfig/Joanna.mp3、Joanna.marks、Matthew.mp3、Matthew.marks
• polly/PRTPStaticCustom/Joanna.mp3、Joanna.marks、Matthew.mp3、Matthew.marks

各ページには、音声固有の MP3 およびマーク ファイルの独自のセットがあります。 これらのファイルは、事前に生成されたファイルです。 ページは実行時に Amazon Polly を呼び出す必要はありません。 ファイルは Web ビルドの一部です。

構成主導のケース

次に考えてみましょう gen_config.sh:

cd ..
python FixHTML.py ../web/PRTPStaticConfig.html 
  example/tmp_wff.html
python ModGenericXSLT.py example/transform_config.json 
  example/tmp.xslt
./gen_ssml.sh example/tmp_wff.html example/tmp.xslt 
  example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
  ../web/polly/PRTPStaticConfig compass
./run_polly.sh example/tmp.ssml en-US Matthew 
  ../web/polly/PRTPStaticConfig compass

スクリプトはデフォルトのスクリプトと似ていますが、太字の行が主な違いを示しています。 私たちのアプローチは構成主導型です。 コードではなく、構成を通じて何を抽出するかを指定することで、ページから抽出するコンテンツを調整します。 特に、JSON ファイルを使用します。 transform_config.json、含まれるコンテンツが ID を持つ要素であることを指定します title, main, maintable, qbtable. IDを持つ要素 wrapup 除外する必要があります。 次のコードを参照してください。

{
 "inclusions": [ 
 	{"id" : "title"} , 
 	{"id": "main"}, 
 	{"id": "maintable"}, 
 	{"id": "qbtable" }
 ],
 "exclusions": [
 	{"id": "wrapup"}
 ]
}

Python プログラムを実行します ModGenericXSLT.py 変更する generic.xslt、デフォルトのケースで使用され、で指定した包含と除外を使用します transform_config.json. プログラムは結果を一時ファイル (example/tmp.xslt) に渡されます。 gen_ssml.sh XSLT 変換として。

これはローコード オプションです。 Web パブリッシャーは、XSLT の書き方を知る必要はありません。 ただし、HTML ページの構造と、主要な構成要素で使用される ID を理解する必要があります。

カスタマイズ事例

最後に、 gen_custom.sh:

cd ..
python FixHTML.py ../web/PRTPStaticCustom.html 
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html example/custom.xslt  
   example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticCustom compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticCustom compass

このスクリプトは、独自の XSLT を使用する点を除いて、デフォルト スクリプトとほぼ同じです。example/custom.xslt—一般的な XSLT ではなく。 以下は、XSLT のスニペットです。

<!-- Use NW, SW, NE, SE order for main tiles! -->
<xsl:template match="*[@id='maintable']">
    <mark>
        <xsl:attribute name="name">
        <xsl:value-of select="stats:getMark(.)"/>
        </xsl:attribute>
    </mark>
    <xsl:variable name="tiles" select="./tbody"/>
    <xsl:variable name="tiles-nw" select="$tiles/tr[1]/td[1]"/>
    <xsl:variable name="tiles-ne" select="$tiles/tr[1]/td[2]"/>
    <xsl:variable name="tiles-sw" select="$tiles/tr[2]/td[1]"/>
    <xsl:variable name="tiles-se" select="$tiles/tr[2]/td[2]"/>
    <xsl:variable name="tiles-seq" select="($tiles-nw,  $tiles-sw, $tiles-ne, $tiles-se)"/>
    <xsl:for-each select="$tiles-seq">
         <xsl:apply-templates />  
    </xsl:for-each>
</xsl:template>   

<!-- Say Tom Brady load! -->
<xsl:template match="span[@style = 'color:blue']" >
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <prosody volume="x-loud">Tom Brady</prosody>
</p>
</xsl:template>

コードを詳しく調べたい場合は、GitHub リポジトリのスクリプトとプログラムを参照してください。

ブラウザのセットアップとハイライト

静的ページには、Amazon Polly によって生成され、ウェブサーバーにある MP5 ファイルをオーディオ ソースとして使用する HTML3 オーディオ コントロールが含まれています。

<audio id="audio" controls>
  <source src="polly/PRTPStaticDefault/en/Joanna.mp3" type="audio/mpeg">
</audio>

ロード時に、ページは Amazon Polly によって生成されたマーク ファイルもロードします。 これは、 PRTP.js HTML ページに含まれるファイル。 以下は、のマーク ファイルのスニペットです。 PRTPStaticDefault:

{“time”:11747,“type”:“sentence”,“start”:289,“end”:356,“value”:“PollyReadsThePage is a test page for audio readout with highlights.“}
{“time”:15784,“type”:“ssml”,“start”:363,“end”:403,“value”:“/html/body[1]/div[2]/p[2]“}
{“time”:16427,“type”:“sentence”,“start”:403,“end”:426,“value”:“Here are some features:“}
{“time”:17677,“type”:“ssml”,“start”:433,“end”:480,“value”:“/html/body[1]/div[2]/ul[1]/li[1]“}
{“time”:18344,“type”:“sentence”,“start”:480,“end”:502,“value”:“Skips hidden paragraph”}
{“time”:19894,“type”:“ssml”,“start”:509,“end”:556,“value”:“/html/body[1]/div[2]/ul[1]/li[2]“}
{“time”:20537,“type”:“sentence”,“start”:556,“end”:603,“value”:“Speaks but does not highlight collapsed content”}

オーディオの再生中、オーディオ タイマー イベント ハンドラが PRTP.js オーディオの現在の時間をチェックし、強調表示するテキストを見つけ、ページ上の位置を見つけて強調表示します。 強調表示されるテキストはタイプのエントリです sentence マークファイルにあります。 場所は、文の前にあるタイプ SSML のエントリの name 属性の XPath 式です。 たとえば、時刻が 18400 の場合、marks ファイルによると、強調表示される文は 18334 から始まる「隠し段落をスキップ」です。場所は時刻 17667 の SSML エントリです。 /html/body[1]/div[2]/ul[1]/li[1].

動的ページのテスト

ページ PRTPDynamic.html は、デフォルト、構成主導、およびカスタムのオーディオ抽出アプローチを使用した動的オーディオ リードバックを示します。

デフォルトのケース

ブラウザで、次の場所に移動します PRTPDynamic.html. ページには XNUMX つのクエリ パラメータがあり、 dynOption、値を受け入れる default, config, custom。 デフォルトは defaultですので、この場合は省略して構いません。 このページには、動的コンテンツを含む XNUMX つのセクションがあります。

• 最新の記事 – 一日を通して頻繁に変更
• ギリシャの哲学者 日付で検索 – 訪問者がギリシャの哲学者を日付で検索し、結果を表に表示できるようにします

でいくつかのコンテンツを作成します ギリシャの哲学者 例に示すように、-800 から 0 の日付範囲を入力してセクションを作成します。 次に選択 もう完成させ、ワークスペースに掲示しましたか?.

を選択してオーディオを再生します。 プレイ オーディオコントロールで。

舞台裏で、ページは次のコードを実行して、オーディオをレンダリングおよび再生します。

   buildSSMLFromDefault();
   chooseRenderAudio();
   setVoice();

まず、関数を呼び出します buildSSMLFromDefault in PRTP.js HTML ページの本文からほとんどのテキストを抽出します。 その関数は DOM ツリーをたどり、次のような共通要素内のテキストを探します。 p, h1, pre, span, td. 通常、読み上げるテキストを含まない要素内のテキストは無視されます。 audio, option, script. Amazon Polly に入力する SSML マークアップを構築します。 以下は、からの最初の行の抽出を示すスニペットです。 philosopher テーブル：

<speak>
...
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[1]"/>Thales</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]"/>-624 to -546</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[3]"/>Miletus</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[4]"/>presocratic</p>
...
</speak>

　 chooseRenderAudio の機能 PRTP.js まず、Amazon Cognito、Amazon S3、および Amazon Polly 用の AWS SDK を初期化します。 この初期化は XNUMX 回だけ行われます。 もしも chooseRenderAudio ページの内容が変更されたために再度呼び出された場合、初期化はスキップされます。 次のコードを参照してください。

AWS.config.region = env.REGION
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: env.IDP});
audioTracker.sdk.connection = {
   polly: new AWS.Polly({apiVersion: '2016-06-10'}),
   s3: new AWS.S3()
};

Amazon Polly から MP3 オーディオを生成します。 生成は、小さな SSML 入力の場合は同期であり、大きな SSML 入力 (3 文字を超える) の場合は非同期 (S6,000 バケットに出力が送信されます) です。 同期の場合、署名付き URL を使用して MP3 ファイルを提供するよう Amazon Polly に依頼します。 合成出力の準備ができたら、 src オーディオ コントロールの属性をその URL に追加し、コントロールをロードします。 次に、マーク ファイルを要求し、静的な場合と同じ方法でロードします。 次のコードを参照してください。

// create signed URL
const signer = new AWS.Polly.Presigner(pollyAudioInput, audioTracker.sdk.connection.polly);

// call Polly to get MP3 into signed URL
signer.getSynthesizeSpeechUrl(pollyAudioInput, function(error, url) {
  // Audio control uses signed URL
  audioTracker.audioControl.src =
    audioTracker.sdk.audio[audioTracker.voice];
  audioTracker.audioControl.load();

  // call Polly to get marks
  audioTracker.sdk.connection.polly.synthesizeSpeech(
    pollyMarksInput, function(markError, markData) {
    const marksStr = new
      TextDecoder().decode(markData.AudioStream);
    // load marks into page the same as with static
    doLoadMarks(marksStr);
  });
});

構成主導のケース

ブラウザで、次の場所に移動します PRTPDynamic.html?dynOption=config. オーディオを再生します。 オーディオの再生はデフォルトの場合と似ていますが、若干の違いがあります。 特に、一部のコンテンツはスキップされます。

舞台裏で、 config オプションの場合、ページはデフォルトの場合とは異なる方法でコンテンツを抽出します。 デフォルトの場合、ページは buildSSMLFromDefault. 構成主導の場合、ページは、含めたいセクションと除外したいセクションを指定します。

const ssml = buildSSMLFromConfig({
	 "inclusions": [ 
	 	{"id": "title"}, 
	 	{"id": "main"}, 
	 	{"id": "maintable"}, 
	 	{"id": "phil-result"},
	 	{"id": "qbtable"}, 
	 ],
	 "exclusions": [
	 	{"id": "wrapup"}
	 ]
	});

　 buildSSMLFromConfig 関数、で定義されています PRTP.jsで、ID が提供されている各セクションの DOM ツリーをたどります。 inclusions. それぞれからコンテンツを抽出し、指定された順序でそれらを組み合わせて、SSML ドキュメントを形成します。 以下で指定されたセクションを除外します。 exclusions. 同じように各セクションからコンテンツを抽出します buildSSMLFromDefault ページ本文からコンテンツを抽出します。

カスタマイズ事例

ブラウザで、次の場所に移動します PRTPDynamic.html?dynOption=custom. オーディオを再生します。 顕著な違いは XNUMX つあります。 これらに注意して、舞台裏で実行されるカスタム コードを考えてみましょう。

• 主なタイルを NW、SW、NE、SE の順に読み取ります。 カスタム コードは、これらのセル ブロックをそれぞれ取得します。 maintable そしてそれらを NW、SW、NE、SE の順に SSML に追加します。

const nw = getElementByXpath("//*[@id='maintable']//tr[1]/td[1]");
const sw = getElementByXpath("//*[@id='maintable']//tr[2]/td[1]");
const ne = getElementByXpath("//*[@id='maintable']//tr[1]/td[2]");
const se = getElementByXpath("//*[@id='maintable']//tr[2]/td[2]");
[nw, sw, ne, se].forEach(dir => buildSSMLSection(dir, []));

• 「トム・ブレイディ」は大声で話されます。 カスタム コードは、SSML 内に「Tom Brady」テキストを配置します。 prosody タグ：

if (cellText == "Tom Brady") {
   addSSMLMark(getXpathOfNode( node.childNodes[tdi]));
   startSSMLParagraph();
   startSSMLTag("prosody", {"volume": "x-loud"});
   addSSMLText(cellText);
   endSSMLTag();
   endSSMLParagraph();
}

• クォーターバック テーブルの最初の XNUMX 行のみを読み取ります。 各行の列ヘッダーを読み取ります。 GitHub リポジトリのコードをチェックして、これがどのように実装されているかを確認してください。

クリーンアップ

今後料金が発生しないようにするには、CloudFormation スタックを削除します。

まとめ

この投稿では、価値の高いビジネス上の問題に対する技術的な解決策を示しました。Amazon Polly を使用してウェブページのコンテンツを読み取り、読み取られているコンテンツを強調表示する方法です。 静的ページと動的ページの両方を使用してこれを示しました。 ページからコンテンツを抽出するために、DOM トラバーサルと XSLT を使用しました。 強調表示を容易にするために、Amazon Polly のスピーチ マーク機能を使用しました。

にアクセスして、Amazon Polly の詳細をご覧ください。 サービスページ.

コメントで気軽に質問してください。

著者について

マイク・ヘイビー エンタープライズ アプリケーションの構築に 25 年以上の経験を持つ AWS のソリューション アーキテクトです。 マイクは XNUMX 冊の本と多数の記事の著者です。 彼のアマゾンにアクセス 著者ページ もっと読む。

ヴィニート・カチャワハ 機械学習の専門知識を持つ AWS のソリューション アーキテクトです。 彼は、顧客が AWS でスケーラブルで安全で費用対効果の高いワークロードを設計するのを支援する責任を負っています。