Đọc các trang web và đánh dấu nội dung bằng Amazon Polly

Trong bài đăng này, chúng tôi trình bày cách sử dụng Amazon Polly—Một dịch vụ đám mây hàng đầu giúp chuyển đổi văn bản thành lời nói sống động như thật — để đọc nội dung của một trang web và làm nổi bật nội dung khi nó đang được đọc. Thêm tính năng phát lại âm thanh vào trang web sẽ cải thiện khả năng truy cập và trải nghiệm của khách truy cập trang. Nội dung nâng cao âm thanh có tác động và đáng nhớ hơn, thu hút nhiều lưu lượng truy cập hơn vào trang và khai thác khả năng chi tiêu của khách truy cập. Nó cũng cải thiện thương hiệu của công ty hoặc tổ chức xuất bản trang. Công nghệ chuyển văn bản thành giọng nói giúp đạt được những lợi ích kinh doanh này. Chúng tôi đẩy nhanh hành trình đó bằng cách trình bày cách đạt được mục tiêu này bằng cách sử dụng Amazon Polly.

Khả năng này cải thiện khả năng tiếp cận cho khách truy cập là người khuyết tật và có thể được áp dụng như một phần của chiến lược hỗ trợ tiếp cận của tổ chức bạn. Điều quan trọng là nó nâng cao trải nghiệm trang cho khách truy cập mà không bị khuyết tật. Cả hai nhóm đều có khả năng chi tiêu đáng kể và chi tiêu thoải mái hơn từ các trang sử dụng tính năng nâng cao âm thanh để thu hút sự chú ý của họ.

Tổng quan về giải pháp

PollyReadsThePage (PRTP) —như chúng tôi đề cập đến giải pháp — cho phép nhà xuất bản trang web thả điều khiển âm thanh vào trang web của họ. Khi khách truy cập chọn Play trên điều khiển, điều khiển đọc trang và làm nổi bật nội dung. PRTP sử dụng khả năng chung của Amazon Polly để tổng hợp lời nói từ văn bản. Nó yêu cầu Amazon Polly tạo ra hai tạo tác cho mỗi trang:

• Nội dung âm thanh ở định dạng có thể phát được bằng trình duyệt: MP3
• Tệp đánh dấu lời nói cho biết cho mỗi câu văn bản:
  • Thời gian trong khi phát lại mà câu được đọc
  • Vị trí trên trang mà câu xuất hiện

Khi khách truy cập chọn Play, trình duyệt phát tệp MP3. Khi âm thanh được đọc, trình duyệt sẽ kiểm tra thời gian, tìm trong tệp đánh dấu câu nào sẽ đọc tại thời điểm đó, định vị câu đó trên trang và đánh dấu câu đó.

PRTP cho phép khách truy cập đọc bằng các giọng nói và ngôn ngữ khác nhau. Mỗi giọng nói yêu cầu một cặp tệp riêng. PRTP sử dụng giọng nói thần kinh. Để biết danh sách các ngôn ngữ và giọng nói thần kinh được hỗ trợ, hãy xem Giọng nói thần kinh. Để biết danh sách đầy đủ các giọng nói chuẩn và thần kinh trong Amazon Polly, hãy xem Tiếng nói trong Amazon Polly.

Chúng tôi xem xét hai loại trang web: trang tĩnh và trang động. Trong một tĩnh trang, nội dung được chứa trong trang và chỉ thay đổi khi phiên bản mới của trang được xuất bản. Công ty có thể cập nhật trang hàng ngày hoặc hàng tuần như một phần của quy trình xây dựng web của mình. Đối với loại trang này, bạn có thể tạo trước các tệp âm thanh tại thời điểm xây dựng và đặt chúng trên máy chủ web để phát lại. Như hình sau cho thấy, kịch bản PRTP Pre-Gen gọi Amazon Polly để tạo âm thanh. Nó có vai trò là đầu vào của chính trang HTML và, tùy chọn, một tệp cấu hình chỉ định văn bản nào từ trang cần trích xuất (Text Extract Config). Nếu cấu hình trích xuất bị bỏ qua, tập lệnh pre-gen sẽ tạo ra một lựa chọn hợp lý về văn bản để trích xuất từ ​​phần nội dung của trang. Amazon Polly xuất các tệp trong một Dịch vụ lưu trữ đơn giản của Amazon (Amazon S3) thùng; tập lệnh sao chép chúng vào máy chủ web của bạn. Khi khách truy cập phát âm thanh, trình duyệt sẽ tải xuống MP3 trực tiếp từ máy chủ web. Đối với các điểm nổi bật, một thư viện thả xuống, PRTP.js, sử dụng tệp dấu để đánh dấu văn bản đang được đọc.

Nội dung của một năng động trang thay đổi theo tương tác của khách truy cập, do đó, âm thanh không thể được tạo trước mà phải được tổng hợp động. Như hình sau cho thấy, khi khách truy cập phát âm thanh, trang sẽ sử dụng PRTP.js để tạo âm thanh trong Amazon Polly và nó làm nổi bật âm thanh tổng hợp bằng cách sử dụng phương pháp tương tự như với các trang tĩnh. Để truy cập các dịch vụ AWS từ trình duyệt, khách truy cập yêu cầu nhận dạng AWS. Chúng tôi hướng dẫn cách sử dụng Nhận thức về Amazon nhóm nhận dạng để cho phép khách truy cập vừa đủ quyền truy cập vào Amazon Polly và bộ chứa S3 để hiển thị âm thanh.

Việc tạo cả âm thanh Mp3 và dấu giọng nói yêu cầu dịch vụ Polly tổng hợp cùng một đầu vào hai lần. Tham khảo đến Trang định giá Amazon Polly để hiểu ý nghĩa chi phí. Tạo trước tiết kiệm chi phí vì tổng hợp được thực hiện tại thời điểm xây dựng thay vì theo yêu cầu cho mỗi tương tác của khách truy cập.

Mã kèm theo bài đăng này có sẵn dưới dạng kho lưu trữ mã nguồn mở trên GitHub.

Để khám phá giải pháp, chúng tôi làm theo các bước sau:

1. Thiết lập các tài nguyên, bao gồm máy chủ xây dựng trước thế hệ, bộ chứa S3, máy chủ web và danh tính Amazon Cognito.
2. Chạy bản dựng tĩnh trước thế hệ và kiểm tra các trang tĩnh.
3. Kiểm tra các trang động.

Điều kiện tiên quyết

Để chạy ví dụ này, bạn cần một Tài khoản AWS với quyền sử dụng Amazon Polly, Amazon S3, Amazon Cognito và (cho mục đích demo) Đám mây AWS9.

Nguồn cung cấp

Chúng tôi chia sẻ một Hình thành đám mây AWS mẫu để tạo trong tài khoản của bạn một môi trường demo khép kín để giúp bạn theo dõi bài đăng. Nếu bạn muốn thiết lập PRTP trong môi trường của riêng mình, hãy tham khảo hướng dẫn trong README.md.

Để cung cấp môi trường demo bằng CloudFormation, trước tiên hãy tải xuống bản sao của Mẫu CloudFormation. Sau đó hoàn thành các bước sau:

1. Trên bảng điều khiển AWS CloudFormation, hãy chọn Tạo ngăn xếp.
2. Chọn Với các tài nguyên mới (tiêu chuẩn).
3. Chọn Tải lên tệp mẫu.
4. Chọn Chọn tập tin để tải lên bản sao cục bộ của mẫu mà bạn đã tải xuống. Tên của tệp là prtp.yml.
5. Chọn Sau.
6. Nhập tên ngăn xếp mà bạn chọn. Sau đó, bạn nhập lại mã này để thay thế cho .
7. Bạn có thể giữ các giá trị mặc định trong Thông số phần.
8. Chọn Sau.
9. Tiếp tục qua các phần còn lại.
10. Đọc và chọn các hộp kiểm trong Khả năng phần.
11. Chọn Tạo ngăn xếp.
12. Khi ngăn xếp hoàn tất, hãy tìm giá trị cho BucketName trong các đầu ra ngăn xếp.

Chúng tôi khuyến khích bạn xem xét ngăn xếp với nhóm bảo mật của mình trước khi sử dụng nó trong môi trường sản xuất.

Thiết lập máy chủ web và máy chủ thế hệ trước trong AWS Cloud9 IDE

Tiếp theo, trên bảng điều khiển AWS Cloud9, định vị môi trường PRTPDemoCloud9 được tạo bởi ngăn xếp CloudFormation. Chọn Mở IDE để mở môi trường AWS Cloud9. Mở cửa sổ đầu cuối và chạy các lệnh sau, sao chép mã PRTP, thiết lập phụ thuộc thế hệ trước và khởi động máy chủ web để kiểm tra:

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

Trong , sử dụng tên bạn đã đặt cho ngăn xếp CloudFormation. Vì , chỉ định một dải địa chỉ IP được phép truy cập vào máy chủ web. Để hạn chế quyền truy cập vào trình duyệt trên máy cục bộ của bạn, hãy tìm địa chỉ IP của bạn bằng https://whatismyipaddress.com/ và nối /32 để xác định phạm vi. Ví dụ: nếu IP của bạn là 10.2.3.4, use 10.2.3.4/32. Máy chủ lắng nghe trên cổng 8080. Địa chỉ IP công cộng mà máy chủ lắng nghe được đưa ra trong đầu ra. Ví dụ:

Public IP is

3.92.33.223

Kiểm tra các trang tĩnh

Trong trình duyệt của bạn, điều hướng đến PRTPStaticDefault.html. (Nếu bạn đang sử dụng bản demo, URL là http://<cloud9host>:8080/web/PRTPStaticDefault.html, Nơi là địa chỉ IP công cộng mà bạn đã phát hiện ra khi thiết lập IDE.) Chọn Play trên điều khiển âm thanh ở trên cùng. Nghe âm thanh và xem các điểm nổi bật. Khám phá điều khiển bằng cách thay đổi tốc độ, thay đổi giọng nói, tạm dừng, tua đi nhanh và tua lại. Ảnh chụp màn hình sau đây cho thấy trang; văn bản “Bỏ qua đoạn ẩn” được đánh dấu vì nó hiện đang được đọc.

Hãy thử tương tự cho PRTPStaticConfig.html và PRTPStaticCustom.html. Kết quả cũng tương tự. Ví dụ: cả ba đều đọc văn bản thay thế cho bức ảnh của con mèo (“Hình ảnh ngẫu nhiên của một con mèo”). Cả ba đều đọc NE, NW, SE và SW dưới dạng các từ đầy đủ (“đông bắc”, “tây bắc”, “đông nam”, “tây nam”), tận dụng các từ vựng của Amazon Polly.

Lưu ý những điểm khác biệt chính trong âm thanh:

• PRTPStaticDefault.html đọc tất cả văn bản trong phần nội dung của trang, bao gồm cả phần tóm tắt ở cuối với “Suy nghĩ của bạn trong một từ”, “Gửi truy vấn”, “Cập nhật lần cuối vào ngày 1 tháng 2020 năm XNUMX” và “Câu hỏi dành cho nhóm phát triển”. PRTPStaticConfig.html và PRTPStaticCustom.html không đọc những điều này vì chúng loại trừ rõ ràng phần tóm tắt khỏi tổng hợp giọng nói.
• PRTPStaticCustom.html đọc Người bán chạy nhất QB bảng khác với những cái khác. Nó chỉ đọc ba hàng đầu tiên và đọc số hàng cho mỗi hàng. Nó lặp lại các cột cho mỗi hàng. PRTPStaticCustom.html sử dụng một chuyển đổi tùy chỉnh để điều chỉnh mức đọc của bảng. Các trang khác sử dụng kết xuất bảng mặc định.
• PRTPStaticCustom.html đọc “Tom Brady” với âm lượng to hơn phần còn lại của văn bản. Nó sử dụng ngôn ngữ đánh dấu tổng hợp giọng nói (SSML) prosody để điều chỉnh cách đọc của Tom Brady. Các trang khác không điều chỉnh theo cách này.
• PRTPStaticCustom.html, nhờ một chuyển đổi tùy chỉnh, đọc các ô chính theo thứ tự NW, SW, NE, SE; nghĩa là, nó có nội dung “Các bài báo của ngày hôm nay”, “Trích dẫn trong ngày”, “Hình ảnh trong ngày”, “Truyện cười trong ngày”. Các trang khác được đọc theo thứ tự các ô xuất hiện theo thứ tự NW, NE, SW, SE tự nhiên mà chúng xuất hiện trong HTML: “Bài báo của ngày hôm nay”, “Ảnh trong ngày”, “Trích dẫn trong ngày”, “Truyện cười của Ngày."

Hãy cùng tìm hiểu sâu hơn về cách âm thanh được tạo ra và cách trang làm nổi bật văn bản.

Bộ tạo trước tĩnh

Kho lưu trữ GitHub của chúng tôi bao gồm các tệp âm thanh được tạo trước cho PRPTStatic nhưng nếu bạn muốn tự tạo chúng, từ bash shell trong AWS Cloud9 IDE, hãy chạy các lệnh sau:

# 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

Bây giờ chúng ta hãy xem xét cách thức hoạt động của các tập lệnh đó.

Trường hợp mặc định

Chúng tôi bắt đầu với 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

Tập lệnh bắt đầu bằng cách chạy chương trình Python FixHTML.py để tạo tệp HTML nguồn PRTPStaticDefault.html đúng ngữ pháp. Nó ghi phiên bản được định dạng tốt của tệp vào example/tmp_wff.html. Bước này rất quan trọng vì hai lý do:

• Hầu hết mã nguồn HTML không được định hình tốt. Bước này sửa chữa HTML nguồn để được định dạng tốt. Ví dụ: nhiều trang HTML không đóng P các yếu tố. Bước này đóng chúng lại.
• Chúng tôi theo dõi vị trí trong trang HTML mà chúng tôi tìm thấy văn bản. Chúng ta cần theo dõi các vị trí bằng cách sử dụng cùng một cấu trúc mô hình đối tượng tài liệu (DOM) mà trình duyệt sử dụng. Ví dụ: trình duyệt tự động thêm TBODY đến một TABLE. Chương trình Python tuân theo các sửa chữa được định hình tốt giống như trình duyệt.

gen_ssml.sh lấy HTML được định dạng tốt làm đầu vào, áp dụng phép chuyển đổi biểu định kiểu XML (XSLT) cho nó và xuất ra tệp SSML. (SSML là ngôn ngữ trong Amazon Polly để kiểm soát cách âm thanh được hiển thị từ văn bản.) Trong ví dụ hiện tại, đầu vào là example/tmp_wff.html. Đầu ra là example/tmp.ssml. Công việc của bộ chuyển đổi là quyết định văn bản nào sẽ trích xuất từ ​​HTML và cung cấp cho Amazon Polly. generic.xslt là một biến đổi XSLT mặc định hợp lý cho hầu hết các trang web. Trong đoạn mã ví dụ sau, nó loại trừ điều khiển âm thanh, tiêu đề HTML, cũng như các phần tử HTML như script và form. Nó cũng loại trừ các phần tử có thuộc tính ẩn. Nó bao gồm các phần tử thường chứa văn bản, chẳng hạn như P, H1và SPAN. Đối với những điều này, nó hiển thị cả một dấu, bao gồm biểu thức XPath đầy đủ của phần tử và giá trị của phần tử.

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

Sau đây là một đoạn mã của SSML được hiển thị. Điều này được cung cấp làm đầu vào cho Amazon Polly. Ví dụ: lưu ý rằng văn bản “Bỏ qua đoạn ẩn” sẽ được đọc trong âm thanh và chúng tôi liên kết nó với một dấu, cho chúng tôi biết rằng văn bản này xuất hiện ở vị trí trên trang được cung cấp bởi biểu thức 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>

Để tạo âm thanh trong Amazon Polly, chúng tôi gọi tập lệnh run_polly.sh. Nó chạy Giao diện dòng lệnh AWS Lệnh (AWS CLI) aws polly start-speech-synthesis-task hai lần: một lần để tạo âm thanh MP3 và một lần nữa để tạo tệp dấu. Bởi vì quá trình tạo không đồng bộ, tập lệnh sẽ thăm dò ý kiến ​​cho đến khi nó tìm thấy đầu ra trong nhóm S3 được chỉ định. Khi nó tìm thấy đầu ra, nó sẽ tải xuống máy chủ xây dựng và sao chép các tệp vào web/polly thư mục. Sau đây là danh sách các thư mục 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

Mỗi trang có một bộ MP3 dành riêng cho giọng nói và đánh dấu các tệp. Các tệp này là các tệp được tạo trước. Trang không cần gọi Amazon Polly trong thời gian chạy; các tệp là một phần của quá trình xây dựng web.

Trường hợp điều khiển cấu hình

Tiếp theo, hãy xem xét 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

Tập lệnh tương tự như tập lệnh trong trường hợp mặc định, nhưng các dòng được in đậm chỉ ra sự khác biệt chính. Cách tiếp cận của chúng tôi là theo hướng cấu hình. Chúng tôi điều chỉnh nội dung được trích xuất từ ​​trang bằng cách chỉ định nội dung cần trích xuất thông qua cấu hình, không phải mã. Đặc biệt, chúng tôi sử dụng tệp JSON transform_config.json, chỉ định rằng nội dung được đưa vào là các phần tử có ID title, main, maintablevà qbtable. Phần tử có ID wrapup nên được loại trừ. Xem đoạn mã sau:

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

Chúng tôi chạy chương trình Python ModGenericXSLT.py để sửa đổi generic.xslt, được sử dụng trong trường hợp mặc định, để sử dụng các bao gồm và loại trừ mà chúng tôi chỉ định trong transform_config.json. Chương trình ghi kết quả vào một tệp tạm thời (example/tmp.xslt), mà nó chuyển đến gen_ssml.sh như biến đổi XSLT của nó.

Đây là một tùy chọn mã thấp. Nhà xuất bản web không cần biết cách viết XSLT. Nhưng họ cần hiểu cấu trúc của trang HTML và các ID được sử dụng trong các phần tử tổ chức chính của nó.

Trường hợp tùy chỉnh

Cuối cùng, hãy xem xét 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

Tập lệnh này gần giống với tập lệnh mặc định, ngoại trừ nó sử dụng XSLT của chính nó—example/custom.xslt—Khác với XSLT chung chung. Sau đây là một đoạn trích của 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>

Nếu bạn muốn nghiên cứu chi tiết về mã, hãy tham khảo các tập lệnh và chương trình trong repo GitHub.

Thiết lập và điểm nổi bật của trình duyệt

Các trang tĩnh bao gồm điều khiển âm thanh HTML5, lấy nguồn âm thanh của nó là tệp MP3 do Amazon Polly tạo ra và nằm trên máy chủ web:

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

Tại thời điểm tải, trang cũng tải tệp nhãn hiệu do Amazon Polly tạo. Điều này xảy ra trong PRTP.js tệp mà trang HTML bao gồm. Sau đây là một đoạn mã của tệp nhãn hiệu cho 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”}

Trong khi phát lại âm thanh, có một trình xử lý sự kiện hẹn giờ âm thanh trong PRTP.js kiểm tra thời gian hiện tại của âm thanh, tìm văn bản để đánh dấu, tìm vị trí của nó trên trang và đánh dấu nó. Văn bản được đánh dấu là một mục nhập loại sentence trong tệp đánh dấu. Vị trí là biểu thức XPath trong thuộc tính tên của mục nhập kiểu SSML đứng trước câu. Ví dụ: nếu thời gian là 18400, theo tệp dấu, câu được đánh dấu là "Bỏ qua đoạn ẩn", bắt đầu từ năm 18334. Vị trí là mục nhập SSML tại thời điểm 17667: /html/body[1]/div[2]/ul[1]/li[1].

Kiểm tra các trang động

Trang PRTPDynamic.html thể hiện khả năng đọc lại âm thanh động bằng cách sử dụng các phương pháp trích xuất âm thanh mặc định, theo hướng cấu hình và tùy chỉnh.

Trường hợp mặc định

Trong trình duyệt của bạn, điều hướng đến PRTPDynamic.html. Trang có một tham số truy vấn, dynOption, chấp nhận các giá trị default, configvà custom. Nó mặc định là default, vì vậy bạn có thể bỏ qua nó trong trường hợp này. Trang có hai phần với nội dung động:

• Bài viết mới nhất - Thay đổi thường xuyên trong ngày
• Các nhà triết học Hy Lạp Tìm kiếm theo ngày - Cho phép khách truy cập tìm kiếm các nhà triết học Hy Lạp theo ngày tháng và hiển thị kết quả trong bảng

Tạo một số nội dung trong Nhà triết học người Hy lạp bằng cách nhập phạm vi ngày từ -800 đến 0, như được hiển thị trong ví dụ. Tiếp đó hãy chọn Tìm kiếm.

Bây giờ phát âm thanh bằng cách chọn Play trong điều khiển âm thanh.

Phía sau, trang chạy đoạn mã sau để hiển thị và phát âm thanh:

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

Đầu tiên nó gọi hàm buildSSMLFromDefault in PRTP.js để trích xuất hầu hết văn bản từ nội dung trang HTML. Hàm đó đi qua cây DOM, tìm kiếm văn bản trong các phần tử phổ biến như p, h1, pre, spanvà td. Nó bỏ qua văn bản trong các phần tử thường không chứa văn bản để đọc to, chẳng hạn như audio, optionvà script. Nó xây dựng đánh dấu SSML để được nhập vào Amazon Polly. Sau đây là một đoạn mã hiển thị trích xuất hàng đầu tiên từ philosopher bàn:

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

Sản phẩm chooseRenderAudio chức năng trong PRTP.js bắt đầu bằng cách khởi chạy AWS SDK cho Amazon Cognito, Amazon S3 và Amazon Polly. Việc khởi tạo này chỉ xảy ra một lần. Nếu chooseRenderAudio được gọi lại vì nội dung của trang đã thay đổi, quá trình khởi tạo bị bỏ qua. Xem đoạn mã sau:

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

Nó tạo ra âm thanh MP3 từ Amazon Polly. Việc tạo là đồng bộ cho các đầu vào SSML nhỏ và không đồng bộ (với đầu ra được gửi đến nhóm S3) cho các đầu vào SSML lớn (lớn hơn 6,000 ký tự). Trong trường hợp đồng bộ, chúng tôi yêu cầu Amazon Polly cung cấp tệp MP3 bằng URL được chỉ định trước. Khi đầu ra tổng hợp đã sẵn sàng, chúng tôi đặt src thuộc tính của điều khiển âm thanh cho URL đó và tải điều khiển. Sau đó, chúng tôi yêu cầu tệp dấu và tải nó theo cách tương tự như trong trường hợp tĩnh. Xem đoạn mã sau:

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

Trường hợp điều khiển cấu hình

Trong trình duyệt của bạn, điều hướng đến PRTPDynamic.html?dynOption=config. Phát âm thanh. Việc phát lại âm thanh tương tự như trường hợp mặc định, nhưng có sự khác biệt nhỏ. Đặc biệt, một số nội dung bị lược bỏ.

Hậu trường, khi sử dụng config tùy chọn, trang trích xuất nội dung khác với trong trường hợp mặc định. Trong trường hợp mặc định, trang sử dụng buildSSMLFromDefault. Trong trường hợp hướng cấu hình, trang chỉ định các phần mà nó muốn bao gồm và loại trừ:

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

Sản phẩm buildSSMLFromConfig chức năng, được định nghĩa trong PRTP.js, đi qua cây DOM trong từng phần có ID được cung cấp trong inclusions. Nó trích xuất nội dung từ mỗi và kết hợp chúng với nhau, theo thứ tự được chỉ định, để tạo thành một tài liệu SSML. Nó loại trừ các phần được chỉ định trong exclusions. Nó trích xuất nội dung từ mỗi phần theo cùng một cách buildSSMLFromDefault trích xuất nội dung từ phần thân trang.

Trường hợp tùy chỉnh

Trong trình duyệt của bạn, điều hướng đến PRTPDynamic.html?dynOption=custom. Phát âm thanh. Có ba điểm khác biệt đáng chú ý. Hãy lưu ý những điều này và xem xét mã tùy chỉnh chạy đằng sau hậu trường:

• Nó đọc các ô chính theo thứ tự NW, SW, NE, SE. Mã tùy chỉnh lấy từng khối ô này từ maintable và thêm chúng vào SSML theo thứ tự 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” được nói lớn. Mã tùy chỉnh đặt văn bản “Tom Brady” bên trong SSML prosody nhãn:

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

• Nó chỉ đọc ba hàng đầu tiên của bảng phần tư. Nó đọc tiêu đề cột cho mỗi hàng. Kiểm tra mã trong repo GitHub để khám phá cách thực hiện điều này.

Làm sạch

Để tránh phát sinh các khoản phí trong tương lai, hãy xóa ngăn xếp CloudFormation.

Kết luận

Trong bài đăng này, chúng tôi đã trình bày một giải pháp kỹ thuật cho một vấn đề kinh doanh có giá trị cao: cách sử dụng Amazon Polly để đọc nội dung của một trang web và làm nổi bật nội dung khi nó đang được đọc. Chúng tôi đã hiển thị điều này bằng cách sử dụng cả trang tĩnh và trang động. Để trích xuất nội dung từ trang, chúng tôi đã sử dụng truyền tải DOM và XSLT. Để tạo điều kiện đánh dấu, chúng tôi đã sử dụng khả năng đánh dấu giọng nói trong Amazon Polly.

Tìm hiểu thêm về Amazon Polly bằng cách truy cập trang dịch vụ.

Hãy đặt câu hỏi trong phần bình luận.

Giới thiệu về tác giả

Mike Havey là Kiến trúc sư Giải pháp cho AWS với hơn 25 năm kinh nghiệm xây dựng các ứng dụng doanh nghiệp. Mike là tác giả của hai cuốn sách và nhiều bài báo. Ghé thăm Amazon của anh ấy trang tác giả để đọc thêm

Cây nho Kachhawaha là Kiến trúc sư giải pháp tại AWS với chuyên môn về máy học. Anh ấy chịu trách nhiệm giúp khách hàng kiến ​​trúc khối lượng công việc có thể mở rộng, bảo mật và tiết kiệm chi phí trên AWS.