Amazon Polly'yi kullanarak web sayfalarını okuyun ve içeriği vurgulayın

Bu yazıda, nasıl kullanılacağını gösteriyoruz Amazon Polly—metni gerçeğe yakın konuşmaya dönüştüren lider bir bulut hizmeti — bir web sayfasının içeriğini okumak ve okunmakta olan içeriği vurgulamak için. Bir web sayfasına ses oynatma eklemek, sayfanın erişilebilirliğini ve ziyaretçi deneyimini iyileştirir. Sesle zenginleştirilmiş içerik daha etkili ve akılda kalıcıdır, sayfaya daha fazla trafik çeker ve ziyaretçilerin harcama gücünden yararlanır. Ayrıca sayfayı yayınlayan şirket veya kuruluşun markasını da geliştirir. Metin-konuşma teknolojisi, bu ticari avantajların elde edilmesini sağlar. Amazon Polly'yi kullanarak bu hedefe nasıl ulaşılacağını göstererek bu yolculuğu hızlandırıyoruz.

Bu özellik, engelli ziyaretçilerin erişilebilirliğini artırır ve kuruluşunuzun erişilebilirlik stratejisinin bir parçası olarak benimsenebilir. Bir o kadar önemlisi, engelli olmayan ziyaretçilerin sayfa deneyimini geliştirir. Her iki grup da önemli bir harcama gücüne sahip ve dikkatlerini çekmek için ses geliştirmeyi kullanan sayfalardan daha özgürce harcama yapıyor.

Çözüme genel bakış

PollyReadsThePage (PRTP), çözüm olarak adlandırdığımız şekliyle, bir web sayfası yayıncısının web sayfasına bir ses kontrolü bırakmasına olanak tanır. Ziyaretçi seçtiğinde OYNA kontrolde, kontrol sayfayı okur ve içeriği vurgular. PRTP, metinden konuşmayı sentezlemek için Amazon Polly'nin genel özelliğini kullanır. Her sayfa için iki yapıt oluşturmak üzere Amazon Polly'yi çağırır:

• Tarayıcı tarafından oynatılabilen formattaki ses içeriği: MP3
• Metnin her cümlesi için şunları belirten bir konuşma işaretleri dosyası:
  • Oynatma sırasında cümlenin okunduğu süre
  • Cümlenin sayfada göründüğü yer

Ziyaretçi seçtiğinde OYNAtarayıcı MP3 dosyasını oynatır. Ses okunurken tarayıcı saati kontrol eder, işaretler dosyasında o anda hangi cümlenin okunacağını bulur, sayfada bulur ve vurgular.

PRTP, ziyaretçinin farklı ses ve dillerde okuma yapmasına olanak tanır. Her ses kendi dosya çiftini gerektirir. PRTP sinir seslerini kullanır. Desteklenen sinir sesleri ve dillerin listesi için bkz. Sinirsel Sesler. Amazon Polly'deki standart ve sinirsel seslerin tam listesi için bkz. Amazon Polly'deki Sesler.

İki tür web sayfasını ele alıyoruz: statik ve dinamik sayfalar. İçinde statik Sayfanın içeriği sayfanın içinde yer alır ve yalnızca sayfanın yeni bir sürümü yayınlandığında değişir. Şirket, web oluşturma sürecinin bir parçası olarak sayfayı günlük veya haftalık olarak güncelleyebilir. Bu tür sayfalar için, ses dosyalarını oluşturma sırasında önceden oluşturmak ve bunları oynatmak üzere web sunucusuna yerleştirmek mümkündür. Aşağıdaki şekilde gösterildiği gibi, komut dosyası PRTP Pre-Gen sesi oluşturmak için Amazon Polly'yi çağırır. Giriş olarak HTML sayfasının kendisini ve isteğe bağlı olarak sayfadan hangi metnin çıkarılacağını belirten bir yapılandırma dosyasını alır (Text Extract Config). Çıkarma yapılandırması atlanırsa, oluşturma öncesi komut dosyası, sayfanın gövdesinden çıkarılacak mantıklı bir metin seçimi yapar. Amazon Polly, dosyaların çıktısını bir Amazon Basit Depolama Hizmeti (Amazon S3) kovası; komut dosyası bunları web sunucunuza kopyalar. Ziyaretçi sesi çaldığında, tarayıcı MP3'ü doğrudan web sunucusundan indirir. Öne çıkanlar için, bir drop-in kütüphanesi, PRTP.js, okunmakta olan metni vurgulamak için işaretler dosyasını kullanır.

Bir içeriği dinamik sayfa ziyaretçi etkileşimine yanıt olarak değişir; dolayısıyla ses önceden oluşturulamaz ancak dinamik olarak sentezlenmesi gerekir. Aşağıdaki şekilde gösterildiği gibi, ziyaretçi sesi oynattığında sayfa şunları kullanır: PRTP.js Amazon Polly'de ses oluşturmak için kullanılır ve statik sayfalarda olduğu gibi aynı yaklaşımı kullanarak sentezlenmiş sesi vurgular. AWS hizmetlerine tarayıcıdan erişmek için ziyaretçinin bir AWS kimliğine ihtiyacı vardır. Nasıl kullanılacağını gösteriyoruz Amazon Cognito'su ziyaretçinin sesi işlemek için Amazon Polly'ye ve S3 klasörüne yeterli erişim sağlamasına olanak tanıyan kimlik havuzu.

Hem Mp3 ses hem de konuşma işaretlerinin oluşturulması Polly hizmetinin aynı girişi iki kez sentezlemesini gerektirir. Bakın Amazon Polly Fiyatlandırma Sayfası Maliyet etkilerini anlamak için. Ön oluşturma, sentezlemenin her ziyaretçi etkileşimi için talep üzerine yerine oluşturma sırasında gerçekleştirilmesi nedeniyle maliyet tasarrufu sağlar.

Bu yazıya eşlik eden kod, açık kaynak kodlu bir depo olarak mevcuttur. GitHub.

Çözümü keşfetmek için şu adımları izliyoruz:

1. Gen öncesi derleme sunucusu, S3 klasörü, web sunucusu ve Amazon Cognito kimliği de dahil olmak üzere kaynakları ayarlayın.
2. Statik oluşturma öncesi derlemeyi çalıştırın ve statik sayfaları test edin.
3. Dinamik sayfaları test edin.

Önkoşullar

Bu örneği çalıştırmak için bir AWS hesabı Amazon Polly, Amazon S3, Amazon Cognito'yu kullanma izniyle ve (demo amaçlı) AWS Bulut9.

Kaynakları sağlayın

bir paylaşım yapıyoruz AWS CloudFormation Gönderiyi takip etmenize yardımcı olacak, hesabınızda bağımsız bir demo ortamı oluşturmak için şablon. PRTP'yi kendi ortamınızda kurmayı tercih ederseniz, aşağıdaki talimatlara bakın. README.md.

Demo ortamını CloudFormation kullanarak hazırlamak için öncelikle CloudFormation şablonu. Ardından aşağıdaki adımları tamamlayın:

1. AWS CloudFormation konsolunda şunu seçin: Yığın oluşturun.
2. Klinik Yeni kaynaklarla (standart).
3. seç Bir şablon dosyası yükleyin.
4. Klinik Dosya seçin İndirdiğiniz şablonun yerel kopyasını yüklemek için. Dosyanın adı prtp.yml.
5. Klinik Sonraki.
6. Seçtiğiniz bir yığın adını girin. Daha sonra bunun yerine bunu tekrar girersiniz. .
7. Varsayılan değerleri şurada tutabilirsiniz: parametreler Bölüm.
8. Klinik Sonraki.
9. Kalan bölümlere devam edin.
10. içindeki onay kutularını okuyun ve seçin. Uygulama Alanı Bölüm.
11. Klinik Yığın oluştur.
12. Yığın tamamlandığında değerini bulun. BucketName yığın çıktılarında.

Yığını bir üretim ortamı olarak kullanmadan önce güvenlik ekibinizle birlikte incelemenizi öneririz.

Web sunucusunu ve gen öncesi sunucuyu bir AWS Cloud9 IDE'de kurun

Daha sonra AWS Cloud9 konsolunda ortamı bulun PRTPDemoCloud9 CloudFormation yığını tarafından oluşturuldu. Seçmek IDE'yi aç AWS Cloud9 ortamını açmak için. Bir terminal penceresi açın ve PRTP kodunu klonlayan, gen öncesi bağımlılıkları ayarlayan ve test edilecek bir web sunucusunu başlatan aşağıdaki komutları çalıştırın:

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

İçin CloudFormation yığınına verdiğiniz adı kullanın. İçin , web sunucusuna erişmesine izin verilen IP adreslerinin aralığını belirtin. Yerel makinenizdeki tarayıcıya erişimi kısıtlamak için IP adresinizi şunu kullanarak bulun: https://whatismyipaddress.com/ ve ekle /32 aralığı belirtmek için. Örneğin, IP'niz 10.2.3.4, use 10.2.3.4/32. Sunucu 8080 numaralı bağlantı noktasını dinler. Sunucunun dinlediği genel IP adresi çıktıda verilir. Örneğin:

Public IP is

3.92.33.223

Statik sayfaları test edin

Tarayıcınızda şuraya gidin: PRTPStaticDefault.html. (Demoyu kullanıyorsanız URL: http://<cloud9host>:8080/web/PRTPStaticDefault.html, Burada IDE kurulumu sırasında bulduğunuz genel IP adresidir.) OYNA üstteki ses kontrolünde. Sesi dinleyin ve önemli anları izleyin. Hızları değiştirerek, sesleri değiştirerek, duraklatarak, hızlı ileri ve geri sararak kontrolü keşfedin. Aşağıdaki ekran görüntüsü sayfayı göstermektedir; "Gizli paragrafı atla" metni şu anda okunduğu için vurgulanmıştır.

için de aynısını deneyin PRTPStaticConfig.html ve PRTPStaticCustom.html. Sonuçlar benzer. Örneğin, üçü de kedi fotoğrafının alternatif metnini okuyor (“Bir kedinin rastgele resmi”). Üçü de Amazon Polly sözlüklerinden yararlanarak NE, NW, SE ve SW'yi tam kelimeler olarak ("kuzeydoğu", "kuzeybatı", "güneydoğu", "güneybatı") okur.

Sesteki temel farklılıklara dikkat edin:

• PRTPStaticDefault.html "Tek kelimeyle düşünceleriniz", "Sorgu Gönder", "Son güncelleme 1 Nisan 2020" ve "Geliştirici ekibine sorular" yazan alt kısımdaki özet kısmı da dahil olmak üzere sayfanın gövdesindeki tüm metni okur. PRTPStaticConfig.html ve PRTPStaticCustom.html bunları okumayın çünkü bunlar, toparlamayı açıkça konuşma sentezinin dışında tutuyor.
• PRTPStaticCustom.html okur QB En Çok Satanlar diğerlerinden farklı bir tablo. Yalnızca ilk üç satırı okur ve her satırın satır numarasını okur. Her satır için sütunları tekrarlar. PRTPStaticCustom.html tablonun okunmasını uyarlamak için özel bir dönüşüm kullanır. Diğer sayfalar varsayılan tablo oluşturmayı kullanır.
• PRTPStaticCustom.html "Tom Brady"yi metnin geri kalanından daha yüksek sesle okuyor. Konuşma sentezi biçimlendirme dilini (SSML) kullanır prosody Tom Brady'nin okumasını uyarlamak için etiket. Diğer sayfalar bu şekilde uyarlanmıyor.
• PRTPStaticCustom.html, özel bir dönüşüm sayesinde ana döşemeleri NW, SW, NE, SE sırasıyla okur; yani "Günün Yazıları", "Günün Alıntısı", "Günün Fotoğrafı", "Günün Şakaları" yazıyor. Diğer sayfalar, döşemelerin HTML'de göründükleri doğal KD, KD, GB, GD düzeninde göründükleri sırayla okunur: "Günün Makaleleri", "Günün Fotoğrafı", "Günün Sözü", "Şakalar" Gün."

Sesin nasıl oluşturulduğunu ve sayfanın metni nasıl vurguladığını daha ayrıntılı olarak inceleyelim.

Statik ön jeneratör

GitHub depomuz, önceden oluşturulmuş ses dosyalarını içerir. PRPTStatic ancak bunları kendiniz oluşturmak istiyorsanız AWS Cloud9 IDE'deki bash kabuğundan aşağıdaki komutları çalıştırın:

# 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

Şimdi bu scriptlerin nasıl çalıştığına bakalım.

Varsayılan durum

Başlıyoruz 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

Betik Python programını çalıştırarak başlar FixHTML.py kaynak HTML dosyasını oluşturmak için PRTPStaticDefault.html iyi biçimlendirilmiş. Dosyanın iyi biçimlendirilmiş sürümünü yazar. example/tmp_wff.html. Bu adım iki nedenden dolayı çok önemlidir:

• Çoğu kaynak HTML'si iyi biçimlendirilmemiştir. Bu adım, kaynak HTML'nin iyi biçimlendirilmiş olmasını onarır. Örneğin birçok HTML sayfası kapanmıyor P elementler. Bu adım onları kapatır.
• Metni HTML sayfasının neresinde bulduğumuzun kaydını tutuyoruz. Tarayıcının kullandığı aynı belge nesne modeli (DOM) yapısını kullanarak konumları izlememiz gerekir. Örneğin, tarayıcı otomatik olarak bir TBODY a TABLE. Python programı, tarayıcıyla aynı iyi biçimlendirilmiş onarımları izler.

gen_ssml.sh girdi olarak iyi biçimlendirilmiş HTML'yi alır, ona bir XML stil sayfası dönüşümü (XSLT) dönüşümü uygular ve bir SSML dosyası çıkarır. (SSML, Amazon Polly'de sesin metinden nasıl oluşturulacağını kontrol eden dildir.) Mevcut örnekte giriş şöyledir: example/tmp_wff.html. çıktı example/tmp.ssml. Dönüşümün görevi, HTML'den hangi metnin çıkarılıp Amazon Polly'ye aktarılacağına karar vermektir. generic.xslt çoğu web sayfası için mantıklı bir varsayılan XSLT dönüşümüdür. Aşağıdaki örnek kod pasajında, ses kontrolünü, HTML başlığını ve ayrıca aşağıdaki gibi HTML öğelerini hariç tutar: script ve form. Aynı zamanda gizli özniteliğe sahip öğeleri de hariç tutar. Genellikle metin içeren öğeleri içerir; P, H1, ve SPAN. Bunlar için hem öğenin tam XPath ifadesini içeren bir işaret hem de öğenin değerini işler.

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

Aşağıda, oluşturulan SSML'nin bir parçacığı verilmiştir. Bu, Amazon Polly'ye girdi olarak beslenir. Örneğin, seste "Gizli paragrafı atlar" metninin okunması gerektiğine dikkat edin ve bunu bir işaretle ilişkilendiririz, bu bize bu metnin sayfada XPath ifadesi tarafından verilen konumda oluştuğunu söyler. /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'de ses oluşturmak için betiği çağırıyoruz run_polly.sh. Çalıştırır AWS Komut Satırı Arayüzü (AWS CLI) komutu aws polly start-speech-synthesis-task iki kez: bir kez MP3 sesi oluşturmak için ve bir kez de işaretler dosyasını oluşturmak için. Oluşturma eşzamansız olduğundan, komut dosyası, belirtilen S3 klasöründeki çıktıyı bulana kadar yoklama yapar. Çıktıyı bulduğunda derleme sunucusuna indirir ve dosyaları web/polly dosya. Web klasörlerinin listesi aşağıdadır:

• 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

Her sayfanın kendi sese özgü MP3 seti ve işaret dosyaları vardır. Bu dosyalar önceden oluşturulmuş dosyalardır. Sayfanın çalışma zamanında Amazon Polly'yi çağırmasına gerek yoktur; dosyalar web yapısının bir parçasıdır.

Yapılandırmaya dayalı durum

Sonra, düşünün 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

Komut dosyası, varsayılan durumdaki komut dosyasına benzer, ancak kalın çizgiler temel farkı gösterir. Yaklaşımımız yapılandırmaya dayalıdır. Neyin çıkarılacağını kod yoluyla değil, yapılandırma yoluyla belirterek, sayfadan çıkarılacak içeriği uyarlıyoruz. Özellikle JSON dosyasını kullanıyoruz transform_config.json, eklenecek içeriğin kimlikleri olan öğeler olduğunu belirtir title, main, maintable, ve qbtable. Kimliği olan öğe wrapup hariç tutulmalıdır. Aşağıdaki koda bakın:

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

Python programını çalıştırıyoruz ModGenericXSLT.py düzenlemek generic.xslt, varsayılan durumda, belirttiğimiz dahil edilenleri ve hariç tutulanları kullanmak için kullanılır. transform_config.json. Program sonuçları geçici bir dosyaya yazar (example/tmp.xslt), geçtiği yer gen_ssml.sh XSLT dönüşümü olarak.

Bu düşük kodlu bir seçenektir. Web yayıncısının XSLT'nin nasıl yazılacağını bilmesine gerek yoktur. Ancak HTML sayfasının yapısını ve ana düzenleme öğelerinde kullanılan kimlikleri anlamaları gerekir.

Özelleştirme durumu

Son olarak, düşünün 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

Bu komut dosyası, kendi XSLT'sini kullanması dışında varsayılan komut dosyasıyla neredeyse aynıdır.example/custom.xslt—genel XSLT yerine. Aşağıdaki XSLT'nin bir pasajıdır:

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

Kodu ayrıntılı olarak incelemek istiyorsanız GitHub deposundaki komut dosyalarına ve programlara bakın.

Tarayıcı kurulumu ve öne çıkanlar

Statik sayfalar, Amazon Polly tarafından oluşturulan ve web sunucusunda bulunan MP5 dosyasını ses kaynağı olarak alan bir HTML3 ses kontrolü içerir:

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

Yükleme sırasında sayfa, Amazon Polly tarafından oluşturulan işaretler dosyasını da yükler. Bu şu durumlarda meydana gelir: PRTP.js HTML sayfasının içerdiği dosya. Aşağıda işaretler dosyasının bir pasajı verilmiştir: 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”}

Ses oynatımı sırasında, bir ses zamanlayıcı olay işleyicisi bulunur. PRTP.js Bu, sesin geçerli saatini kontrol eder, vurgulanacak metni bulur, sayfadaki konumunu bulur ve vurgular. Vurgulanacak metin bir tür giriştir sentence işaretler dosyasında. Konum, cümleden önce gelen SSML türündeki girişin name özelliğindeki XPath ifadesidir. Örneğin saat 18400 ise marks dosyasına göre vurgulanması gereken cümle 18334'ten başlayan "Gizli paragrafı atla"dır. Konum ise 17667 saatindeki SSML girişidir: /html/body[1]/div[2]/ul[1]/li[1].

Dinamik sayfaları test edin

Sayfa PRTPDynamic.html varsayılan, konfigürasyona dayalı ve özel ses çıkarma yaklaşımlarını kullanarak dinamik ses geri okumasını gösterir.

Varsayılan durum

Tarayıcınızda şuraya gidin: PRTPDynamic.html. Sayfada bir sorgu parametresi var, dynOptiondeğerleri kabul eden default, config, ve custom. Varsayılan olarak default, dolayısıyla bu durumda onu atlayabilirsiniz. Sayfanın dinamik içeriğe sahip iki bölümü vardır:

• En son makaleler – Gün içerisinde sık sık değişir
• Yunan Filozofları Tarihe Göre Arama – Ziyaretçinin Yunan filozoflarını tarihe göre aramasına ve sonuçları bir tabloda göstermesine olanak tanır

İçinde biraz içerik oluşturun Yunan Filozofu Örnekte gösterildiği gibi -800 ile 0 arasında bir tarih aralığı girerek bölüm. O zaman seç bulmak.

Şimdi seçerek sesi oynatın OYNA ses kontrolünde.

Sahne arkasında sayfa, sesi oluşturmak ve oynatmak için aşağıdaki kodu çalıştırır:

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

İlk önce işlevi çağırır buildSSMLFromDefault in PRTP.js Metnin çoğunu HTML sayfa gövdesinden çıkarmak için. Bu işlev DOM ağacında gezinerek aşağıdaki gibi ortak öğelerdeki metni arar: p, h1, pre, span, ve td. Genellikle yüksek sesle okunacak metin içermeyen öğelerdeki metni yok sayar. audio, option, ve script. Amazon Polly'ye girilecek SSML işaretlemesini oluşturur. Aşağıda ilk satırın çıkarılmasını gösteren bir pasaj bulunmaktadır. philosopher tablosu:

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

The chooseRenderAudio içinde işlemek PRTP.js Amazon Cognito, Amazon S3 ve Amazon Polly için AWS SDK'nın başlatılmasıyla başlar. Bu başlatma yalnızca bir kez gerçekleşir. Eğer chooseRenderAudio sayfanın içeriği değiştiği için tekrar çağrılır, başlatma atlanır. Aşağıdaki koda bakın:

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'den MP3 ses üretir. Oluşturma, küçük SSML girişleri için eşzamanlıdır ve büyük SSML girişleri (3 karakterden büyük) için eşzamansızdır (çıkış S6,000 kümesine gönderilir). Eşzamanlı durumda Amazon Polly'den MP3 dosyasını önceden imzalanmış bir URL kullanarak sağlamasını isteriz. Sentezlenen çıktı hazır olduğunda, src ses kontrolünün niteliğini bu URL'ye aktarın ve kontrolü yükleyin. Daha sonra işaretler dosyasını talep ediyoruz ve onu statik durumda olduğu gibi yüklüyoruz. Aşağıdaki koda bakın:

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

Yapılandırmaya dayalı durum

Tarayıcınızda şuraya gidin: PRTPDynamic.html?dynOption=config. Sesi çalın. Sesin oynatılması varsayılan duruma benzer ancak küçük farklılıklar vardır. Özellikle bazı içerikler atlanıyor.

Kamerayı kullanırken perde arkasında config seçeneğinde sayfa, içeriği varsayılan durumdan farklı şekilde çıkarır. Varsayılan durumda, sayfa şunu kullanır: buildSSMLFromDefault. Yapılandırmaya dayalı durumda sayfa, dahil etmek ve hariç tutmak istediği bölümleri belirtir:

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

The buildSSMLFromConfig içinde tanımlanan fonksiyon PRTP.jsaltında kimliği sağlanan bölümlerin her birinde DOM ağacında yürür. inclusions. Her birinden içerik çıkarır ve bunları belirtilen sırayla birleştirerek bir SSML belgesi oluşturur. Aşağıda belirtilen bölümler hariçtir. exclusions. Her bölümden içeriği aynı şekilde çıkarır buildSSMLFromDefault içeriği sayfa gövdesinden çıkarır.

Özelleştirme durumu

Tarayıcınızda şuraya gidin: PRTPDynamic.html?dynOption=custom. Sesi çalın. Göze çarpan üç fark var. Bunları not edelim ve perde arkasında çalışan özel kodu ele alalım:

• Ana döşemeleri NW, SW, NE, SE sırasıyla okur. Özel kod, bu hücre bloklarının her birini maintable ve bunları SSML'ye NW, SW, NE, SE sırasıyla ekler:

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” yüksek sesle konuşuluyor. Özel kod, "Tom Brady" metnini SSML'nin içine yerleştirir prosody etiket:

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

• Oyun kurucu tablosunun yalnızca ilk üç satırını okur. Her satırın sütun başlıklarını okur. Bunun nasıl uygulandığını keşfetmek için GitHub deposundaki kodu kontrol edin.

Temizlemek

Gelecekte ücret alınmasını önlemek için CloudFormation yığınını silin.

Sonuç

Bu yazıda, yüksek değerli bir iş sorununa teknik bir çözüm gösterdik: Amazon Polly'nin bir web sayfasının içeriğini okumak ve okunmakta olan içeriği vurgulamak için nasıl kullanılacağı. Bunu hem statik hem de dinamik sayfaları kullanarak gösterdik. Sayfadan içerik çıkarmak için DOM geçişini ve XSLT'yi kullandık. Vurgulamayı kolaylaştırmak için Amazon Polly'deki konuşma işaretleri özelliğini kullandık.

Amazon Polly'yi ziyaret ederek hakkında daha fazla bilgi edinin. servis sayfası.

Yorumlarda soru sormaktan çekinmeyin.

yazarlar hakkında

Mike Hayy kurumsal uygulamalar oluşturma konusunda 25 yılı aşkın deneyime sahip bir AWS Çözüm Mimarıdır. Mike iki kitabın ve çok sayıda makalenin yazarıdır. Amazon'unu ziyaret et yazar sayfası daha fazla okumak için.

Vineet Kachhawaha AWS'de makine öğrenimi konusunda uzmanlığa sahip bir Çözüm Mimarıdır. Müşterilerin AWS'de ölçeklenebilir, güvenli ve uygun maliyetli iş yükleri tasarlamasına yardımcı olmaktan sorumludur.