Baca halaman web dan sorot konten menggunakan Amazon Polly

Dalam posting ini, kami menunjukkan cara menggunakan Amazon Polly—layanan cloud terkemuka yang mengubah teks menjadi ucapan yang nyata—untuk membaca konten halaman web dan menyorot konten saat sedang dibaca. Menambahkan pemutaran audio ke halaman web meningkatkan aksesibilitas dan pengalaman pengunjung halaman. Konten yang disempurnakan dengan audio lebih berdampak dan mudah diingat, menarik lebih banyak lalu lintas ke halaman, dan memanfaatkan daya beli pengunjung. Ini juga meningkatkan merek perusahaan atau organisasi yang menerbitkan halaman tersebut. Teknologi text-to-speech membuat keuntungan bisnis ini dapat dicapai. Kami mempercepat perjalanan itu dengan mendemonstrasikan cara mencapai tujuan ini menggunakan Amazon Polly.

Kemampuan ini meningkatkan aksesibilitas bagi pengunjung penyandang disabilitas, dan dapat diadopsi sebagai bagian dari strategi aksesibilitas organisasi Anda. Sama pentingnya, ini meningkatkan pengalaman halaman bagi pengunjung tanpa disabilitas. Kedua kelompok memiliki daya beli yang signifikan dan menghabiskan lebih bebas dari halaman yang menggunakan peningkatan audio untuk menarik perhatian mereka.

Ikhtisar solusi

PollyReadsThePage (PRTP)—seperti yang kami rujuk ke solusi—memungkinkan penerbit halaman web untuk menjatuhkan kontrol audio ke halaman web mereka. Ketika pengunjung memilih Bermain pada kontrol, kontrol membaca halaman dan menyoroti konten. PRTP menggunakan kemampuan umum Amazon Polly untuk mensintesis ucapan dari teks. Ini memanggil Amazon Polly untuk menghasilkan dua artefak untuk setiap halaman:

• Konten audio dalam format yang dapat diputar oleh browser: MP3
• File tanda ucapan yang menunjukkan untuk setiap kalimat teks:
  • Waktu selama pemutaran kalimat dibaca
  • Lokasi di halaman kalimat itu muncul

Ketika pengunjung memilih Bermain, browser memutar file MP3. Saat audio dibaca, browser memeriksa waktu, menemukan dalam file tanda kalimat mana yang harus dibaca pada saat itu, menempatkannya di halaman, dan menyorotnya.

PRTP memungkinkan pengunjung membaca dengan suara dan bahasa yang berbeda. Setiap suara membutuhkan pasangan filenya sendiri. PRTP menggunakan suara saraf. Untuk daftar suara dan bahasa saraf yang didukung, lihat Suara Neural. Untuk daftar lengkap suara standar dan neural di Amazon Polly, lihat Suara di Amazon Polly.

Kami mempertimbangkan dua jenis halaman web: halaman statis dan dinamis. Di sebuah statis halaman, konten terkandung di dalam halaman dan hanya berubah ketika versi baru halaman diterbitkan. Perusahaan mungkin memperbarui halaman setiap hari atau setiap minggu sebagai bagian dari proses pembuatan webnya. Untuk jenis halaman ini, dimungkinkan untuk membuat file audio terlebih dahulu pada waktu pembuatan dan menempatkannya di server web untuk pemutaran. Seperti yang ditunjukkan gambar berikut, skrip PRTP Pre-Gen memanggil Amazon Polly untuk menghasilkan audio. Dibutuhkan sebagai input halaman HTML itu sendiri dan, secara opsional, file konfigurasi yang menentukan teks mana dari halaman yang akan diekstrak (Text Extract Config). Jika konfigurasi ekstrak dihilangkan, skrip pra-gen membuat pilihan teks yang masuk akal untuk diekstrak dari badan halaman. Amazon Polly mengeluarkan file dalam bentuk Layanan Penyimpanan Sederhana Amazon (Amazon S3) ember; skrip menyalinnya ke server web Anda. Saat pengunjung memutar audio, browser mengunduh MP3 langsung dari server web. Untuk sorotan, perpustakaan drop-in, PRTP.js, menggunakan file tanda untuk menyorot teks yang sedang dibaca.

Isi dari dinamis halaman berubah sebagai respons terhadap interaksi pengunjung, jadi audio tidak dapat dibuat sebelumnya tetapi harus disintesis secara dinamis. Seperti yang ditunjukkan gambar berikut, ketika pengunjung memutar audio, halaman menggunakan PRTP.js untuk menghasilkan audio di Amazon Polly, dan menyoroti audio yang disintesis menggunakan pendekatan yang sama seperti dengan halaman statis. Untuk mengakses layanan AWS dari browser, pengunjung memerlukan identitas AWS. Kami menunjukkan cara menggunakan Amazon Kognito kumpulan identitas untuk memungkinkan pengunjung cukup mengakses Amazon Polly dan bucket S3 untuk merender audio.

Menghasilkan audio Mp3 dan tanda ucapan memerlukan layanan Polly untuk mensintesis input yang sama dua kali. Mengacu kepada Halaman Harga Amazon Polly untuk memahami implikasi biaya. Pra-generasi menghemat biaya karena sintesis dilakukan pada waktu pembuatan dan bukan berdasarkan permintaan untuk setiap interaksi pengunjung.

Kode yang menyertai posting ini tersedia sebagai repositori open-source di GitHub.

Untuk menjelajahi solusinya, kami mengikuti langkah-langkah ini:

1. Siapkan sumber daya, termasuk server build pra-gen, bucket S3, server web, dan identitas Amazon Cognito.
2. Jalankan static pre-gen build dan uji halaman statis.
3. Uji halaman dinamis.

Prasyarat

Untuk menjalankan contoh ini, Anda memerlukan sebuah Akun AWS dengan izin untuk menggunakan Amazon Polly, Amazon S3, Amazon Cognito, dan (untuk tujuan demo) AWS Cloud9.

Sumber daya penyediaan

Kami berbagi Formasi AWS Cloud template untuk membuat di akun Anda lingkungan demo mandiri untuk membantu Anda mengikuti postingan. Jika Anda lebih suka mengatur PRTP di lingkungan Anda sendiri, lihat petunjuk di README.md.

Untuk menyediakan lingkungan demo menggunakan CloudFormation, pertama-tama unduh salinan dari Templat CloudFormation. Kemudian selesaikan langkah-langkah berikut:

1. Pada konsol AWS CloudFormation, pilih Buat tumpukan.
2. Pilih Dengan sumber daya baru (standar).
3. Pilih Unggah file templat.
4. Pilih Pilih File untuk mengunggah salinan lokal dari template yang Anda unduh. Nama filenya adalah prtp.yml.
5. Pilih Selanjutnya.
6. Masukkan nama tumpukan yang Anda pilih. Nanti kamu masukkan ini lagi sebagai pengganti .
7. Anda dapat menyimpan nilai default di parameter bagian.
8. Pilih Selanjutnya.
9. Lanjutkan melalui bagian yang tersisa.
10. Baca dan pilih kotak centang di Kemampuan bagian.
11. Pilih Buat tumpukan.
12. Ketika tumpukan selesai, cari nilai untuk BucketName dalam keluaran tumpukan.

Kami mendorong Anda untuk meninjau tumpukan dengan tim keamanan Anda sebelum menggunakannya di lingkungan produksi.

Siapkan server web dan server pra-gen di AWS Cloud9 IDE

Selanjutnya, di konsol AWS Cloud9, temukan lingkungan PRTPDemoCloud9 dibuat oleh tumpukan CloudFormation. Memilih Buka IDE untuk membuka lingkungan AWS Cloud9. Buka jendela terminal dan jalankan perintah berikut, yang mengkloning kode PRTP, menyiapkan dependensi pra-gen, dan memulai server web untuk diuji dengan:

#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> 

Untuk , gunakan nama yang Anda berikan pada tumpukan CloudFormation. Untuk , tentukan rentang alamat IP yang diizinkan untuk mengakses server web. Untuk membatasi akses ke browser di mesin lokal Anda, temukan alamat IP Anda menggunakan https://whatismyipaddress.com/ dan tambahkan /32 untuk menentukan rentang. Misalnya, jika IP Anda adalah 10.2.3.4, use 10.2.3.4/32. Server mendengarkan pada port 8080. Alamat IP publik tempat server mendengarkan diberikan dalam output. Sebagai contoh:

Public IP is

3.92.33.223

Uji halaman statis

Di browser Anda, navigasikan ke PRTPStaticDefault.html. (Jika Anda menggunakan demo, URL-nya adalah http://<cloud9host>:8080/web/PRTPStaticDefault.html, Di mana adalah alamat IP publik yang Anda temukan saat menyiapkan IDE.) Pilih Bermain pada kontrol audio di bagian atas. Dengarkan audio dan tonton sorotannya. Jelajahi kontrol dengan mengubah kecepatan, mengubah suara, menjeda, memajukan cepat, dan memutar ulang. Tangkapan layar berikut menunjukkan halaman; teks "Lewati paragraf tersembunyi" disorot karena sedang dibaca.

Coba hal yang sama untuk PRTPStaticConfig.html dan PRTPStaticCustom.html. Hasilnya serupa. Misalnya, ketiganya membaca teks alt untuk foto kucing (“Gambar kucing acak”). Ketiganya membaca NE, NW, SE, dan SW sebagai kata lengkap (“timur laut,” “barat laut,” “tenggara,” “barat daya”), memanfaatkan leksikon Amazon Polly.

Perhatikan perbedaan utama dalam audio:

• PRTPStaticDefault.html membaca semua teks di badan halaman, termasuk bagian penutup di bagian bawah dengan "Pikiran Anda dalam satu kata", "Kirim Permintaan", "Terakhir diperbarui 1 April 2020", dan "Pertanyaan untuk tim pengembang". PRTPStaticConfig.html dan PRTPStaticCustom.html jangan baca ini karena mereka secara eksplisit mengecualikan penutup dari sintesis ucapan.
• PRTPStaticCustom.html membaca Penjual Terbaik QB meja yang berbeda dari yang lain. Itu membaca tiga baris pertama saja, dan membaca nomor baris untuk setiap baris. Ini mengulangi kolom untuk setiap baris. PRTPStaticCustom.html menggunakan transformasi khusus untuk menyesuaikan pembacaan tabel. Halaman lain menggunakan rendering tabel default.
• PRTPStaticCustom.html membaca "Tom Brady" dengan volume yang lebih keras daripada teks lainnya. Ini menggunakan bahasa markup sintesis ucapan (SSML) prosody tag untuk menyesuaikan pembacaan Tom Brady. Halaman lain tidak menyesuaikan dengan cara ini.
• PRTPStaticCustom.html, berkat transformasi khusus, membaca ubin utama dalam urutan NW, SW, NE, SE; yaitu, berbunyi "Artikel Hari Ini," "Kutipan Hari Ini," "Foto Hari Ini," "Lelucon Hari Ini." Halaman-halaman lain membaca dalam urutan ubin muncul dalam urutan NW, NE, SW, SE alami mereka muncul dalam HTML: “Artikel Hari Ini,” “Foto Hari Ini,” “Kutipan Hari Ini,” “Lelucon Hari Ini Hari."

Mari gali lebih dalam bagaimana audio dihasilkan, dan bagaimana halaman menyoroti teks.

Pra-generator statis

Repo GitHub kami menyertakan file audio yang dibuat sebelumnya untuk PRPTStatic halaman, tetapi jika Anda ingin membuatnya sendiri, dari bash shell di AWS Cloud9 IDE, jalankan perintah berikut:

# 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

Sekarang mari kita lihat bagaimana skrip tersebut bekerja.

Kasus default

Kami mulai dengan 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

Script dimulai dengan menjalankan program Python FixHTML.py untuk membuat file HTML sumber PRTPStaticDefault.html terbentuk dengan baik. Itu menulis versi file yang terbentuk dengan baik ke example/tmp_wff.html. Langkah ini sangat penting karena dua alasan:

• Sebagian besar HTML sumber tidak terbentuk dengan baik. Langkah ini memperbaiki source HTML agar terbentuk dengan baik. Misalnya, banyak halaman HTML tidak dapat ditutup P elemen. Langkah ini menutup mereka.
• Kami melacak di mana di halaman HTML kami menemukan teks. Kita perlu melacak lokasi menggunakan struktur model objek dokumen (DOM) yang sama dengan yang digunakan browser. Misalnya, browser secara otomatis menambahkan TBODY ke TABLE. Program Python mengikuti perbaikan yang dibuat dengan baik seperti browser.

gen_ssml.sh mengambil HTML yang terbentuk dengan baik sebagai input, menerapkan transformasi XML stylesheet transformation (XSLT) padanya, dan mengeluarkan file SSML. (SSML adalah bahasa di Amazon Polly untuk mengontrol bagaimana audio dirender dari teks.) Dalam contoh saat ini, inputnya adalah example/tmp_wff.html. Keluarannya adalah example/tmp.ssml. Tugas transformasi adalah memutuskan teks apa yang akan diekstrak dari HTML dan dimasukkan ke Amazon Polly. generic.xslt adalah transformasi XSLT default yang masuk akal untuk sebagian besar halaman web. Dalam cuplikan kode contoh berikut, tidak termasuk kontrol audio, header HTML, serta elemen HTML seperti script dan form. Itu juga mengecualikan elemen dengan atribut tersembunyi. Ini mencakup elemen yang biasanya berisi teks, seperti P, H1, dan SPAN. Untuk ini, itu membuat tanda, termasuk ekspresi XPath lengkap dari elemen, dan nilai elemen.

<!-- 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>

Berikut ini adalah cuplikan SSML yang di-render. Ini dimasukkan sebagai masukan ke Amazon Polly. Perhatikan, misalnya, bahwa teks "Lewati paragraf tersembunyi" harus dibaca di audio, dan kami mengaitkannya dengan tanda, yang memberi tahu kami bahwa teks ini muncul di lokasi pada halaman yang diberikan oleh ekspresi 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>

Untuk menghasilkan audio di Amazon Polly, kami memanggil skrip run_polly.sh. Ini menjalankan Antarmuka Baris Perintah AWS (AWS CLI) perintah aws polly start-speech-synthesis-task dua kali: sekali untuk menghasilkan audio MP3, dan sekali lagi untuk menghasilkan file tanda. Karena pembuatannya tidak sinkron, skrip melakukan polling hingga menemukan output di bucket S3 yang ditentukan. Ketika menemukan output, download ke server build dan menyalin file ke web/polly map. Berikut ini adalah daftar folder 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

Setiap halaman memiliki kumpulan MP3 khusus suara dan file tanda. File-file ini adalah file yang dibuat sebelumnya. Halaman tidak perlu memanggil Amazon Polly saat runtime; file adalah bagian dari web build.

Kasing yang digerakkan oleh konfigurasi

Selanjutnya, pertimbangkan 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

Skripnya mirip dengan skrip dalam kasus default, tetapi garis tebal menunjukkan perbedaan utama. Pendekatan kami didorong oleh konfigurasi. Kami menyesuaikan konten yang akan diekstraksi dari halaman dengan menentukan apa yang akan diekstraksi melalui konfigurasi, bukan kode. Secara khusus, kami menggunakan file JSON transform_config.json, yang menetapkan bahwa konten yang akan disertakan adalah elemen dengan ID title, main, maintable, dan qbtable. Elemen dengan ID wrapup harus dikecualikan. Lihat kode berikut:

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

Kami menjalankan program Python ModGenericXSLT.py untuk mengubah generic.xslt, digunakan dalam kasus default, untuk menggunakan inklusi dan pengecualian yang kami tentukan di transform_config.json. Program menulis hasilnya ke file temp (example/tmp.xslt), yang diteruskan ke gen_ssml.sh sebagai transformasi XSLT-nya.

Ini adalah opsi kode rendah. Penerbit web tidak perlu tahu cara menulis XSLT. Tetapi mereka perlu memahami struktur halaman HTML dan ID yang digunakan dalam elemen pengorganisasian utamanya.

Kasus kustomisasi

Akhirnya, pertimbangkan 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

Skrip ini hampir identik dengan skrip default, kecuali skrip ini menggunakan XSLT-nya sendiri—example/custom.xslt—bukan XSLT generik. Berikut ini adalah cuplikan dari 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>

Jika Anda ingin mempelajari kode secara detail, lihat skrip dan program di repo GitHub.

Pengaturan dan sorotan browser

Halaman statis menyertakan kontrol audio HTML5, yang mengambil sebagai sumber audio file MP3 yang dihasilkan oleh Amazon Polly dan berada di server web:

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

Saat memuat, halaman juga memuat file tanda yang dihasilkan Amazon Polly. Ini terjadi di PRTP.js file, yang termasuk halaman HTML. Berikut ini adalah cuplikan dari file tanda untuk 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”}

Selama pemutaran audio, ada pengatur acara pengatur waktu audio di PRTP.js yang memeriksa waktu audio saat ini, menemukan teks untuk disorot, menemukan lokasinya di halaman, dan menyorotnya. Teks yang akan disorot adalah entri tipe sentence dalam file tanda. Lokasi adalah ekspresi XPath pada atribut name dari entri tipe SSML yang mendahului kalimat. Misalnya, jika waktunya 18400, menurut file tanda, kalimat yang akan disorot adalah "Lewati paragraf tersembunyi", yang dimulai pada 18334. Lokasi adalah entri SSML pada waktu 17667: /html/body[1]/div[2]/ul[1]/li[1].

Uji halaman dinamis

Halaman PRTPDynamic.html mendemonstrasikan pembacaan ulang audio dinamis menggunakan pendekatan ekstraksi audio default, berbasis konfigurasi, dan kustom.

Kasus default

Di browser Anda, navigasikan ke PRTPDynamic.html. Halaman memiliki satu parameter kueri, dynOption, yang menerima nilai default, config, dan custom. Ini default untuk default, jadi Anda dapat menghilangkannya dalam kasus ini. Halaman ini memiliki dua bagian dengan konten dinamis:

• Artikel Terbaru – Sering berubah sepanjang hari
• Filsuf Yunani Cari Berdasarkan Tanggal – Memungkinkan pengunjung untuk mencari filsuf Yunani berdasarkan tanggal dan menunjukkan hasilnya dalam tabel

Buat beberapa konten di Filsuf Yunani dengan memasukkan rentang tanggal -800 hingga 0, seperti yang ditunjukkan pada contoh. Lalu pilih Menemukan.

Sekarang putar audio dengan memilih Bermain dalam kontrol audio.

Di balik layar, halaman menjalankan kode berikut untuk merender dan memutar audio:

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

Pertama itu memanggil fungsi buildSSMLFromDefault in PRTP.js untuk mengekstrak sebagian besar teks dari badan halaman HTML. Fungsi itu berjalan di pohon DOM, mencari teks dalam elemen umum seperti p, h1, pre, span, dan td. Itu mengabaikan teks dalam elemen yang biasanya tidak berisi teks untuk dibacakan, seperti audio, option, dan script. Itu membangun markup SSML untuk dimasukkan ke Amazon Polly. Berikut ini adalah cuplikan yang menunjukkan ekstraksi baris pertama dari philosopher meja:

<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>

Grafik chooseRenderAudio fungsi di PRTP.js dimulai dengan menginisialisasi AWS SDK untuk Amazon Cognito, Amazon S3, dan Amazon Polly. Inisialisasi ini hanya terjadi sekali. Jika chooseRenderAudio dipanggil lagi karena konten halaman telah berubah, inisialisasi dilewati. Lihat kode berikut:

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()
};

Ini menghasilkan audio MP3 dari Amazon Polly. Pembuatan sinkron untuk input SSML kecil dan asinkron (dengan output dikirim ke bucket S3) untuk input SSML besar (lebih dari 6,000 karakter). Dalam kasus sinkron, kami meminta Amazon Polly untuk menyediakan file MP3 menggunakan URL yang telah ditentukan sebelumnya. Ketika output yang disintesis sudah siap, kami mengatur src atribut kontrol audio ke URL itu dan memuat kontrol. Kami kemudian meminta file tanda dan memuatnya dengan cara yang sama seperti dalam kasus statis. Lihat kode berikut:

// 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);
  });
});

Kasing yang digerakkan oleh konfigurasi

Di browser Anda, navigasikan ke PRTPDynamic.html?dynOption=config. Putar audionya. Pemutaran audio mirip dengan kasus default, tetapi ada perbedaan kecil. Secara khusus, beberapa konten dilewati.

Di balik layar, saat menggunakan config pilihan, halaman mengekstrak konten secara berbeda dari dalam kasus default. Dalam kasus default, halaman menggunakan buildSSMLFromDefault. Dalam kasus yang digerakkan oleh konfigurasi, halaman menentukan bagian yang ingin disertakan dan dikecualikan:

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

Grafik buildSSMLFromConfig fungsi, didefinisikan dalam PRTP.js, berjalan di pohon DOM di setiap bagian yang ID-nya disediakan di bawah inclusions. Ini mengekstrak konten dari masing-masing dan menggabungkannya bersama-sama, dalam urutan yang ditentukan, untuk membentuk dokumen SSML. Ini tidak termasuk bagian yang ditentukan di bawah exclusions. Ini mengekstrak konten dari setiap bagian dengan cara yang sama buildSSMLFromDefault mengekstrak konten dari badan halaman.

Kasus kustomisasi

Di browser Anda, navigasikan ke PRTPDynamic.html?dynOption=custom. Putar audionya. Ada tiga perbedaan mencolok. Mari kita perhatikan ini dan pertimbangkan kode khusus yang berjalan di belakang layar:

• Bunyinya ubin utama di NW, SW, NE, SE urutan. Kode khusus mendapatkan masing-masing blok sel ini dari maintable dan menambahkannya ke SSML dalam urutan NW, SW, NE, SE:

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, []));

• "Tom Brady" diucapkan dengan keras. Kode kustom menempatkan teks "Tom Brady" di dalam SSML prosody menandai:

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

• Itu hanya membaca tiga baris pertama dari tabel quarterback. Itu membaca tajuk kolom untuk setiap baris. Periksa kode di repo GitHub untuk mengetahui bagaimana ini diterapkan.

Membersihkan

Untuk menghindari timbulnya biaya di masa mendatang, hapus tumpukan CloudFormation.

Kesimpulan

Dalam posting ini, kami mendemonstrasikan solusi teknis untuk masalah bisnis bernilai tinggi: cara menggunakan Amazon Polly untuk membaca konten halaman web dan menyorot konten saat sedang dibaca. Kami menunjukkan ini menggunakan halaman statis dan dinamis. Untuk mengekstrak konten dari halaman, kami menggunakan DOM traversal dan XSLT. Untuk memfasilitasi penyorotan, kami menggunakan kemampuan tanda ucapan di Amazon Polly.

Pelajari lebih lanjut tentang Amazon Polly dengan mengunjungi halaman layanan.

Jangan ragu untuk mengajukan pertanyaan di komentar.

Tentang penulis

Mike Havey adalah Arsitek Solusi untuk AWS dengan pengalaman lebih dari 25 tahun dalam membangun aplikasi perusahaan. Mike adalah penulis dua buku dan banyak artikel. Kunjungi Amazonnya halaman penulis untuk membaca lebih lanjut.

Vineet Kachhawaha adalah Arsitek Solusi di AWS dengan keahlian dalam pembelajaran mesin. Dia bertanggung jawab untuk membantu pelanggan merancang beban kerja yang skalabel, aman, dan hemat biaya di AWS.