קרא דפי אינטרנט והדגש תוכן באמצעות Amazon Polly

בפוסט זה, אנו מדגימים כיצד להשתמש אמזון פולי- שירות ענן מוביל הממיר טקסט לדיבור אמיתי - כדי לקרוא את התוכן של דף אינטרנט ולהדגיש את התוכן תוך כדי הקריאה. הוספת השמעת אודיו לדף אינטרנט משפרת את הנגישות ואת חווית המבקר בדף. תוכן משופר אודיו משפיע ובלתי נשכח יותר, מושך יותר תנועה לדף ומנצל את כוח ההוצאה של המבקרים. זה גם משפר את המותג של החברה או הארגון שמפרסם את הדף. טכנולוגיית טקסט לדיבור הופכת את היתרונות העסקיים הללו לניתנים להשגה. אנו מאיצים את המסע על ידי הדגמה כיצד להשיג מטרה זו באמצעות אמזון פולי.

יכולת זו משפרת את הנגישות למבקרים עם מוגבלויות, וניתן לאמץ אותה כחלק מאסטרטגיית הנגישות של הארגון שלך. לא פחות חשוב, זה משפר את חווית הדף עבור מבקרים ללא מוגבלות. לשתי הקבוצות יש כוח הוצאה משמעותי והן מוציאות בחופשיות רבה יותר מדפים המשתמשים בשיפור שמע כדי למשוך את תשומת הלב שלהם.

סקירה כללית של הפיתרון

PollyReadsThePage (PRTP) - כפי שאנו מתייחסים לפתרון - מאפשר למפרסם דפי אינטרנט לשחרר פקד שמע לדף האינטרנט שלו. כשהמבקר בוחר לְשַׂחֵק בפקד, הפקד קורא את הדף ומדגיש את התוכן. PRTP משתמש ביכולת הכללית של אמזון פולי לסנתז דיבור מטקסט. זה קורא לאמזון פולי ליצור שני חפצים עבור כל עמוד:

• תוכן השמע בפורמט הניתן להשמעה על ידי הדפדפן: MP3
• קובץ סימני דיבור המציין עבור כל משפט טקסט:
  • הזמן במהלך ההשמעה שבו המשפט נקרא
  • המיקום בדף שבו המשפט מופיע

כשהמבקר בוחר לְשַׂחֵק, הדפדפן מנגן את קובץ ה-MP3. בזמן קריאת האודיו, הדפדפן בודק את השעה, מוצא בקובץ הסימנים איזה משפט לקרוא באותו זמן, מאתר אותו בעמוד ומדגיש אותו.

PRTP מאפשר למבקר לקרוא בקולות ובשפות שונות. כל קול דורש זוג קבצים משלו. PRTP משתמש בקולות עצביים. לרשימה של קולות ושפות עצביים נתמכים, ראה קולות עצביים. לרשימה מלאה של קולות סטנדרטיים ועצביים באמזון פולי, ראה קולות באמזון פולי.

אנו מתייחסים לשני סוגים של דפי אינטרנט: דפים סטטיים ודפים דינמיים. ב סטטי בדף, התוכן כלול בדף ומשתנה רק כאשר מתפרסמת גרסה חדשה של הדף. החברה עשויה לעדכן את הדף מדי יום או שבועי כחלק מתהליך בניית האינטרנט שלה. עבור סוג זה של עמוד, ניתן ליצור מראש את קבצי האודיו בזמן הבנייה ולהציב אותם בשרת האינטרנט לצורך השמעה. כפי שמראה האיור הבא, התסריט PRTP Pre-Gen קורא לאמזון פולי ליצור את האודיו. זה לוקח כקלט את דף ה-HTML עצמו, ולחלופין, קובץ תצורה שמציין איזה טקסט מהדף לחלץ (Text Extract Config). אם תצורת החילוץ מושמטת, הסקריפט שלפני הדור עושה בחירה הגיונית של טקסט לחילוץ מגוף העמוד. אמזון פולי מפלט את הקבצים ב-an שירות אחסון פשוט של אמזון (אמזון S3) דלי; הסקריפט מעתיק אותם לשרת האינטרנט שלך. כאשר המבקר מנגן את האודיו, הדפדפן מוריד את ה-MP3 ישירות משרת האינטרנט. להדגשות, ספריית כניסה, PRTP.js, משתמש בקובץ הסימנים כדי להדגיש את הטקסט הנקרא.

התוכן של א דינמי שינויים בדף בתגובה לאינטראקציה של המבקר, כך שלא ניתן ליצור מראש אודיו אלא יש לסנתז אותו באופן דינמי. כפי שמראה האיור הבא, כאשר המבקר מנגן את האודיו, הדף משתמש PRTP.js ליצור את האודיו באמזון פולי, וזה מדגיש את האודיו המסונתז באמצעות אותה גישה כמו בדפים סטטיים. כדי לגשת לשירותי AWS מהדפדפן, המבקר דורש זהות AWS. אנו מראים כיצד להשתמש ב-an אמזון קוגניטו מאגר זהויות כדי לאפשר למבקר גישה מספקת לאמזון פולי ולדלי S3 כדי להציג את האודיו.

יצירת סימני אודיו Mp3 וגם דיבור מחייבת את שירות Polly לסנתז את אותה קלט פעמיים. עיין ב עמוד התמחור של אמזון פולי להבין את השלכות העלות. הדור מראש חוסך בעלויות מכיוון שהסינתזה מתבצעת בזמן הבנייה ולא לפי דרישה עבור כל אינטראקציה של מבקר.

הקוד הנלווה לפוסט זה זמין כמאגר קוד פתוח ב- GitHub.

כדי לחקור את הפתרון, אנו מבצעים את השלבים הבאים:

1. הגדר את המשאבים, כולל שרת הבנייה שלפני הדור, דלי S3, שרת האינטרנט וזהות אמזון קוגניטו.
2. הפעל את הבנייה הסטטית שלפני הדור ובדוק דפים סטטיים.
3. בדוק דפים דינמיים.

תנאים מוקדמים

כדי להפעיל את הדוגמה הזו, אתה צריך חשבון AWS עם הרשאה להשתמש באמזון פולי, אמזון S3, אמזון קוגניטו ו(למטרות הדגמה) AWS Cloud9.

אספקת משאבים

אנו חולקים א AWS CloudFormation תבנית ליצירת בחשבונך סביבת הדגמה עצמאית שתעזור לך לעקוב אחרי הפוסט. אם אתה מעדיף להגדיר PRTP בסביבה שלך, עיין בהוראות ב README.md.

כדי לספק את סביבת ההדגמה באמצעות CloudFormation, הורד תחילה עותק של תבנית CloudFormation. לאחר מכן השלם את השלבים הבאים:

1. במסוף CloudFormation של AWS, בחר צור ערימה.
2. לבחור עם משאבים חדשים (סטנדרטי).
3. בחר העלה קובץ תבנית.
4. לבחור בחר קובץ כדי להעלות את העותק המקומי של התבנית שהורדת. שם הקובץ הוא prtp.yml.
5. לבחור הַבָּא.
6. הזן שם מחסנית לבחירתך. מאוחר יותר תזין את זה שוב כתחליף ל .
7. אתה יכול לשמור ערכי ברירת מחדל ב- פרמטרים סָעִיף.
8. לבחור הַבָּא.
9. המשך דרך החלקים הנותרים.
10. קרא ובחר את תיבות הסימון ב- יכולות סָעִיף.
11. לבחור צור ערימה.
12. כאשר הערימה הושלמה, מצא את הערך עבור BucketName ביציאות המחסנית.

אנו ממליצים לך לסקור את הערימה עם צוות האבטחה שלך לפני השימוש בה בסביבת ייצור.

הגדר את שרת האינטרנט ואת השרת שלפני הדור ב-IDE של AWS Cloud9

לאחר מכן, במסוף AWS Cloud9, אתר את הסביבה PRTPDemoCloud9 נוצר על ידי מחסנית CloudFormation. בחר פתח את IDE כדי לפתוח את סביבת AWS Cloud9. פתח חלון מסוף והפעל את הפקודות הבאות, אשר משכפל את קוד ה-PRTP, מגדיר תלות טרום-דור, ומתחיל שרת אינטרנט לבדיקה איתו:

#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. ל , ציין טווח של כתובות 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. (אם אתה משתמש בהדגמה, כתובת האתר היא http://<cloud9host>:8080/web/PRTPStaticDefault.html, שם היא כתובת ה-IP הציבורית שגילית בהגדרת ה-IDE.) בחר לְשַׂחֵק על בקרת השמע בחלק העליון. האזינו לאודיו וצפו בהדגשים. חקור את השליטה על ידי שינוי מהירויות, שינוי קולות, השהייה, העברה מהירה קדימה והרצה אחורה. צילום המסך הבא מציג את העמוד; הטקסט "דילג על פסקה מוסתרת" מודגש מכיוון שהוא נמצא כעת בקריאה.

נסה אותו דבר עבור PRTPStaticConfig.html ו PRTPStaticCustom.html. התוצאות דומות. לדוגמה, שלושתם קראו את הטקסט האלטרנטיבי לתמונה של החתול ("תמונה אקראית של חתול"). שלושתם קוראים NE, NW, SE ו-SW כמילים מלאות ("צפון-מזרח", "צפון-מערב", "דרום-מזרח", "דרום-מערב"), תוך שימוש בלקסיקוני אמזון פולי.

שימו לב להבדלים העיקריים באודיו:

• PRTPStaticDefault.html קורא את כל הטקסט בגוף הדף, כולל חלק הסיכום בתחתית עם "המחשבות שלך במילה אחת", "שלח שאילתה", "עודכן לאחרונה ב-1 באפריל 2020" ו"שאלות לצוות המפתחים". PRTPStaticConfig.html ו PRTPStaticCustom.html אל תקראו את אלה כי הם אינם כוללים במפורש את הסיכום מסינתזת דיבור.
• PRTPStaticCustom.html קורא את QB רבי מכר שולחן שונה מהאחרים. הוא קורא את שלוש השורות הראשונות בלבד, וקורא את מספר השורה עבור כל שורה. זה חוזר על העמודות עבור כל שורה. PRTPStaticCustom.html משתמש בטרנספורמציה מותאמת אישית כדי להתאים את קריאת הטבלה. הדפים האחרים משתמשים בעיבוד טבלאות ברירת מחדל.
• PRTPStaticCustom.html קורא את "טום בריידי" בווליום חזק יותר משאר הטקסט. הוא משתמש בשפת הסימון של סינתזת דיבור (SSML) prosody תג כדי להתאים את הקריאה של טום בריידי. שאר הדפים אינם מותאמים בצורה זו.
• PRTPStaticCustom.html, הודות לשינוי מותאם אישית, קורא את האריחים העיקריים בסדר NW, SW, NE, SE; כלומר, כתוב "המאמרים של היום", "ציטוט היום", "תמונת היום", "בדיחות היום". שאר הדפים נקראים לפי סדר הופעת האריחים בסדר הטבעי NW, NE, SW, SE שהם מופיעים ב-HTML: "מאמרים של היום", "תמונת היום", "ציטוט היום", "בדיחות של יְוֹם."

בואו נחפור לעומק כיצד נוצר האודיו, וכיצד העמוד מדגיש את הטקסט.

מחולל קדם סטטי

ריפו GitHub שלנו כולל קבצי אודיו שנוצרו מראש עבור ה PRPTStatic דפים, אבל אם אתה רוצה ליצור אותם בעצמך, מה-bash shell ב-AWS Cloud9 IDE, הרץ את הפקודות הבאות:

# 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. שלב זה חיוני משתי סיבות:

• רוב ה-HTML במקור אינו בנוי היטב. שלב זה מתקן את ה-HTML המקור בצורה טובה. לדוגמה, דפי HTML רבים אינם נסגרים P אלמנטים. השלב הזה סוגר אותם.
• אנו עוקבים אחר היכן בדף ה-HTML אנו מוצאים טקסט. עלינו לעקוב אחר מיקומים באמצעות אותו מבנה של מודל אובייקט מסמך (DOM) שבו משתמש הדפדפן. לדוגמה, הדפדפן מוסיף אוטומטית א TBODY כדי TABLE. תוכנית Python עוקבת אחר אותם תיקונים מעוצבים היטב כמו הדפדפן.

gen_ssml.sh לוקח את ה-HTML המעוצב היטב כקלט, מחיל עליו טרנספורמציה של גיליון סגנונות XML (XSLT), ומוציא קובץ SSML. (SSML היא השפה באמזון פולי לשלוט על אופן עיבוד האודיו מטקסט.) בדוגמה הנוכחית, הקלט הוא example/tmp_wff.html. הפלט הוא example/tmp.ssml. תפקידו של הטרנספורמציה הוא להחליט איזה טקסט לחלץ מה-HTML ולהאכיל לאמזון פולי. generic.xslt הוא שינוי ברירת מחדל הגיוני של XSLT עבור רוב דפי האינטרנט. בקטע הקוד לדוגמה הבא, הוא אינו כולל את בקרת האודיו, את כותרת ה-HTML, כמו גם רכיבי HTML כמו script ו form. זה גם לא כולל אלמנטים עם התכונה הנסתרת. הוא כולל אלמנטים המכילים בדרך כלל טקסט, כגון 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 שמעובד. זה מוזן כקלט לאמזון פולי. שימו לב, למשל, שהטקסט "דילג על פסקה מוסתרת" אמור להיקרא באודיו, ואנו משייכים אותו לסימן, שאומר לנו שהטקסט הזה מתרחש במיקום בדף שניתן על ידי הביטוי 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>

כדי ליצור אודיו באמזון פולי, אנו קוראים לסקריפט run_polly.sh. זה מפעיל את ממשק שורת הפקודה של AWS (AWS CLI) פקודת aws polly start-speech-synthesis-task פעמיים: פעם אחת כדי ליצור אודיו MP3, ושוב כדי ליצור את קובץ הסימנים. מכיוון שהדור הוא אסינכרוני, הסקריפט סוקר עד שהוא מוצא את הפלט בדלי S3 שצוין. כאשר הוא מוצא את הפלט, הוא מוריד לשרת ה-build ומעתיק את הקבצים ל- web/polly תיקייה. להלן רשימה של תיקיות האינטרנט:

• 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 בזמן הריצה; הקבצים הם חלק מבניית הרשת.

מארז מונע תצורה

לאחר מכן, שקול 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, המציין שהתוכן שייכלל הוא האלמנטים עם מזהים title, main, maintable, ו qbtable. האלמנט עם מזהה 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.

זוהי אפשרות עם קוד נמוך. מפרסם האינטרנט לא צריך לדעת איך לכתוב XSLT. אבל הם כן צריכים להבין את המבנה של דף ה-HTML ואת המזהים המשמשים באלמנטים הארגוניים העיקריים שלו.

מארז התאמה אישית

לבסוף, שקול 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 repo.

הגדרת דפדפן והדגשים

הדפים הסטטיים כוללים בקרת שמע HTML5, שלוקחת כמקור השמע את קובץ ה-MP3 שנוצר על ידי אמזון פולי ושוכן בשרת האינטרנט:

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

בזמן הטעינה, הדף טוען גם את קובץ הסימנים שנוצרו על ידי אמזון פולי. זה מתרחש ב 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 בקובץ הסימנים. המיקום הוא ביטוי XPath בתכונת name של הערך מסוג SSML שלפני המשפט. לדוגמה, אם השעה היא 18400, לפי קובץ הסימנים, המשפט שיש להדגיש הוא "דילג על פסקה מוסתרת", שמתחיל ב-18334. המיקום הוא ערך ה-SSML בזמן 17667: /html/body[1]/div[2]/ul[1]/li[1].

בדוק דפים דינמיים

הדף PRTPDynamic.html מדגים קריאת אודיו דינמית תוך שימוש בגישות חילוץ אודיו מותאמות אישית המוגדרות כברירת מחדל, מונעות תצורה והתאמה אישית.

מקרה ברירת מחדל

בדפדפן שלך, נווט אל PRTPDynamic.html. לדף יש פרמטר שאילתה אחד, dynOption, שמקבל ערכים default, config, ו custom. זה כברירת מחדל ל default, אז אתה יכול להשמיט אותו במקרה זה. לדף שני חלקים עם תוכן דינמי:

• הכתבות האחרונות - משתנה לעתים קרובות במהלך היום
• פילוסופים יוונים מחפשים לפי תאריך – מאפשר למבקר לחפש פילוסופים יווניים לפי תאריך ומציג את התוצאות בטבלה

צור קצת תוכן ב- פילוסוף יווני על ידי הזנת טווח תאריכים של -800 עד 0, כפי שמוצג בדוגמה. אז תבחר .

כעת הפעל את האודיו על ידי בחירה לְשַׂחֵק בבקרת השמע.

מאחורי הקלעים, הדף מריץ את הקוד הבא כדי לרנדר ולהשמיע את האודיו:

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

ראשית זה קורא לפונקציה buildSSMLFromDefault in PRTP.js כדי לחלץ את רוב הטקסט מגוף דף ה-HTML. פונקציה זו עוברת על עץ ה-DOM, מחפשת טקסט באלמנטים נפוצים כגון p, h1, pre, span, ו td. הוא מתעלם מטקסט באלמנטים שבדרך כלל אינם מכילים טקסט לקריאה בקול, כגון audio, option, ו script. זה בונה סימון 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 מתחיל באתחול ה-AWS SDK עבור Amazon Cognito, Amazon S3 ו-Amazon Polly. אתחול זה מתרחש פעם אחת בלבד. אם 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()
};

זה מייצר אודיו MP3 מאמזון פולי. הדור הוא סינכרוני עבור כניסות SSML קטנות ואסינכרוני (עם פלט שנשלח לדלי S3) עבור כניסות SSML גדולות (יותר מ-6,000 תווים). במקרה הסינכרוני, אנו מבקשים מאמזון פולי לספק את קובץ ה-MP3 באמצעות כתובת URL מוגדרת מראש. כאשר הפלט המסונתז מוכן, אנו מגדירים את 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, הולך על עץ ה-DOM בכל אחד מהקטעים שתחת המזהה שלהם מסופק inclusions. הוא מחלץ תוכן מכל אחד ומשלב אותם יחד, בסדר שצוין, ליצירת מסמך SSML. זה לא כולל את הסעיפים שצוינו תחת exclusions. זה מחלץ תוכן מכל סעיף באותו אופן buildSSMLFromDefault מחלץ תוכן מגוף הדף.

מארז התאמה אישית

בדפדפן שלך, נווט אל PRTPDynamic.html?dynOption=custom. הפעל את האודיו. ישנם שלושה הבדלים בולטים. בואו נציין את אלה ונשקול את הקוד המותאם אישית שרץ מאחורי הקלעים:

• זה קורא את האריחים הראשיים בסדר NW, SW, NE, SE. הקוד המותאם אישית מקבל כל אחד מבלוק התאים הללו maintable ומוסיף אותם ל-SSML בסדר 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, []));

• "טום בריידי" נאמר בקול רם. הקוד המותאם אישית מכניס טקסט "טום בריידי" בתוך SSML prosody תג:

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

• זה קורא רק את שלוש השורות הראשונות של טבלת הקוורטרבק. הוא קורא את כותרות העמודות עבור כל שורה. בדוק את הקוד ב-Repo GitHub כדי לגלות כיצד זה מיושם.

לנקות את

כדי להימנע מחיובים עתידיים, מחק את ערימת CloudFormation.

סיכום

בפוסט זה, הדגמנו פתרון טכני לבעיה עסקית בעלת ערך גבוה: כיצד להשתמש באמזון פולי כדי לקרוא את התוכן של דף אינטרנט ולהדגיש את התוכן תוך כדי הקריאה. הראינו זאת באמצעות דפים סטטיים ודינאמיים כאחד. כדי לחלץ תוכן מהעמוד, השתמשנו ב-DOM traversal ו-XSLT. כדי להקל על ההדגשה, השתמשנו ביכולת סימני הדיבור באמזון פולי.

למד עוד על אמזון פולי על ידי ביקור שלו דף שירות.

אתם מוזמנים לשאול שאלות בתגובות.

על המחברים

מייק הווי הוא אדריכל פתרונות עבור AWS עם למעלה מ-25 שנות ניסיון בבניית יישומים ארגוניים. מייק הוא מחברם של שני ספרים ומאמרים רבים. בקר באמזון שלו דף המחבר כדי לקרוא עוד.

Vineet Kachhawaha הוא אדריכל פתרונות ב-AWS עם מומחיות בלמידת מכונה. הוא אחראי לעזור ללקוחות לבנות עומסי עבודה ניתנים להרחבה, מאובטחים וחסכוניים ב-AWS.