Cách thêm tính năng chuyển văn bản thành giọng nói trên bất kỳ trang web nào

Các chuyển văn bản thành giọng nói tính năng đề cập đến lời kể của một văn bản hiển thị trên thiết bị. Hiện tại, các thiết bị như máy tính xách tay, máy tính bảng và điện thoại di động đã có tính năng này. Bất kỳ ứng dụng nào chạy trên các thiết bị này, như trình duyệt web, đều có thể sử dụng nó, và mở rộng chức năng của nó. Tính năng tường thuật có thể là một trợ giúp phù hợp cho một ứng dụng hiển thị văn bản phong phú, vì nó cung cấp tùy chọn nghe đến khách truy cập trang web.

API bài phát biểu trên web

Các API bài phát biểu trên web là cửa ngõ để truy cập tính năng Chuyển văn bản thành giọng nói bằng trình duyệt web. Vì vậy, nếu bạn muốn giới thiệu chức năng chuyển văn bản thành giọng nói trên một trang web nặng văn bản và cho phép người đọc của bạn nghe nội dung, bạn có thể sử dụng API tiện dụng này, hoặc cụ thể hơn, cụ thể hơn Tổng hợp giọng nói giao diện.

Mã ban đầu và kiểm tra hỗ trợ

Để bắt đầu, hãy tạo một trang web với tôi văn bản mẫu để được thuật lại, và ba nút.

     
  Thỏ rừng với nhiều bạn bè
  Một thỏ rừng rất phổ biến với giáo dục 
 Nhưng anh từ chối, nói rằng 
  Đạo đức của câu chuyện

Các nút sẽ là kiểm soát tường thuật. Bây giờ chúng ta cần đảm bảo nếu UA hỗ trợ Tổng hợp giọng nói giao diện. Để làm như vậy, chúng tôi nhanh chóng kiểm tra bằng JavaScript nếu cửa sổ đối tượng có 'Tổng hợp giọng nói' bất động sản, hay không.

 onload = function () if ('speechSynt tổng hợp' trong cửa sổ) / * tổng hợp giọng nói được hỗ trợ * / khác / * tổng hợp giọng nói không được hỗ trợ * /

Nếu Tổng hợp giọng nói có sẵn, đầu tiên chúng tôi tạo một tài liệu tham khảo cho Tổng hợp giọng nói mà chúng ta gán cho tổng hợp biến. Chúng tôi cũng bắt đầu một lá cờ với sai giá trị (chúng ta sẽ thấy mục đích của nó sau trong bài viết) và chúng tôi tạo tài liệu tham khảo và nhấp vào xử lý sự kiện cũng cho ba nút (Phát, Tạm dừng, Dừng).

Khi người dùng nhấp vào một trong các nút, chức năng tương ứng của nó (onClickPlay (), onClickPause (), onClickStop ()) sẽ được gọi.

 if ('speechSynt tổng hợp' trong cửa sổ) var synth = speechSynt tổng hợp; cờ var = false; / * tham chiếu đến các nút * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * nhấp vào trình xử lý sự kiện cho các nút * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); chức năng onClickPlay ()  chức năng onClickPause ()  chức năng onClickStop ()

Tạo các chức năng tùy chỉnh

Bây giờ chúng ta hãy xây dựng các chức năng nhấp trong số ba nút riêng lẻ sẽ được gọi bởi trình xử lý sự kiện.

1. Chơi / Tiếp tục

Khi nhấp vào nút Play, đầu tiên chúng tôi kiểm tra cờ. Nếu nó sai, chúng tôi đặt nó thành thật, vì vậy nếu bất cứ lúc nào nút được bấm sau đó, mã bên trong Đầu tiên nếu điều kiện sẽ không thực thi (không phải cho đến khi cờ sai lần nữa).

Sau đó chúng ta tạo một thể hiện mới của Bài phát biểu tổng hợp giao diện chứa thông tin về bài phát biểu, như, văn bản cần đọc, âm lượng giọng nói, giọng nói, tốc độ, cao độ và ngôn ngữ của bài phát biểu. Chúng tôi thêm văn bản bài viết như tham số của hàm tạo, và gán nó cho cách nói biến.

 chức năng onClickPlay () if (! flag) flag = true; utterance = new SpeechSynt tổng hợpUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (cách nói);  if (synth.paused) / * bỏ tạm dừng / tiếp tục tường thuật * / synth.resume ();

Chúng tôi sử dụng SpeechSynt tổng hợp.getVoices () phương pháp để chỉ định một giọng nói cho bài phát biểu từ các giọng nói có sẵn trong thiết bị của người dùng. Vì phương thức này trả về một mảng của tất cả các tùy chọn giọng nói có sẵn trong một thiết bị, chúng tôi chỉ định giọng nói thiết bị có sẵn đầu tiên bằng cách sử dụng utterance.voice = synth.getVoices () [0]; tuyên bố.

Các vào cuối tài sản đại diện cho một xử lý sự kiện đó là thực hiện khi bài phát biểu kết thúc. Bên trong nó, chúng tôi thay đổi giá trị của cờ biến trở lại sai để mã bắt đầu bài phát biểu có thể được thực thi khi nút là bấm lần nữa.

Sau đó, chúng tôi gọi SpeechSynt tổng hợp.speak () phương pháp để bắt đầu bài tường thuật. Chúng tôi cũng cần kiểm tra nếu bài tường thuật bị tạm dừng, mà chúng tôi sử dụng chỉ đọc SpeechSynt tổng hợp. bất động sản. Nếu bài tường thuật bị tạm dừng, chúng ta cần phải tiếp tục bài tường thuật trên nút bấm, cái mà chúng ta có thể đạt được bằng cách sử dụng Bài phát biểu Tổng hợp.resume () phương pháp.

2. Tạm dừng

Bây giờ hãy tạo onClickPause () chức năng mà trước tiên chúng ta kiểm tra nếu tường thuật đang diễn ra và không bị tạm dừng. Chúng ta có thể kiểm tra các điều kiện này bằng cách sử dụng Bài phát biểu tổng hợp và SpeechSynt tổng hợp. tính chất. Nếu cả hai điều kiện đều đúng, chúng tôi onClickPause () chức năng tạm dừng bài phát biểu bằng cách gọi SpeechSynt tổng hợp. Nguyên nhân () phương pháp.

 hàm onClickPause () if (synth.speaking &&! synth.paused) / * tạm dừng tường thuật * / synth.pause ();

3. Dừng lại

Các onClickStop () chức năng là được xây dựng tương tự như onClickPause (). Nếu bài phát biểu đang diễn ra, chúng tôi dừng lại đi bằng cách gọi SpeechSynt tổng hợp.celon () phương pháp đó loại bỏ tất cả các cách nói.

 hàm onClickStop () if (synth.speaking) / * dừng tường thuật * / / * cho safari * / flag = false; synth.celon ();

Lưu ý rằng về việc hủy bài phát biểu, vào cuối sự kiện được tự động kích hoạt, và chúng tôi đã thêm mã đặt lại cờ bên trong nó. Tuy nhiên, có một lỗi trong trình duyệt Safari điều đó ngăn sự kiện này nổ súng, đó là lý do tại sao chúng tôi đặt lại cờ trong onClickStop () chức năng. Bạn không phải làm điều đó nếu bạn không muốn hỗ trợ Safari.

Hỗ trợ trình duyệt

Tất cả các phiên bản mới nhất của trình duyệt hiện đại có hỗ trợ đầy đủ hoặc một phần cho API tổng hợp giọng nói. Các trình duyệt Webkit không phát lời nói từ nhiều tab, tạm dừng là lỗi (hoạt động nhưng lỗi) và lời nói không được đặt lại khi người dùng tải lại trang trong trình duyệt Webkit.

Bản demo làm việc

Hãy xem bản demo trực tiếp bên dưới hoặc xem mã đầy đủ trên Github.

Xem Bút Ã ?? Â ° Ã Â Â¸Ã¢Â ?? Â ?? £ £ Văn bản thành lời nói - JavaScript của HONGKIAT (@hkdc) trên CodePen.