GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 12/12/2019 | 00:00 GMT+7

Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web

Giả sử rằng bạn đã sử dụng một số ứng dụng trong nhiều năm, thì khả năng rất cao là bạn đã tương tác với các ứng dụng cung cấp một số dạng trải nghiệm giọng nói. Đó có thể là một ứng dụng có chức năng chuyển văn bản thành giọng nói, chẳng hạn như đọc to tin nhắn văn bản hoặc thông báo của bạn. Nó cũng có thể là một ứng dụng có chức năng nhận dạng giọng nói như Siri hoặc Trợ lý Google.

Với sự ra đời của HTML5, đã có sự tăng trưởng rất nhanh về số lượng API có sẵn trên nền tảng web. Trong những năm qua, ta đã bắt gặp các API như WebSocket, File, Geolocation, Notification, Battery, Vibration, DeviceOrientation, WebRTC, v.v. Một số API này đã nhận được sự hỗ trợ rất cao trên các trình duyệt khác nhau.

Có một vài API được gọi là API Web Speech đã được phát triển để giúp bạn dễ dàng xây dựng liền mạch các loại ứng dụng và trải nghiệm thoại khác nhau cho web. Các API này vẫn còn khá thử nghiệm, mặc dù ngày càng có nhiều hỗ trợ cho hầu hết chúng trên tất cả các trình duyệt hiện đại.

Bước 1 - Sử dụng Web Speech API

API Web Speech được chia thành hai giao diện chính:

  • SpeechSynthesis - Đối với các ứng dụng chuyển văn bản thành giọng nói. Điều này cho phép các ứng dụng đọc nội dung văn bản của chúng bằng bộ tổng hợp giọng nói của thiết bị. Các kiểu giọng nói có sẵn được biểu thị bằng đối tượng SpeechSynthesisVoice , trong khi văn bản được phát ra được biểu diễn bằng đối tượng SpeechSynthesisUtterance . Xem bảng hỗ trợ cho giao diện SpeechSynthesis để tìm hiểu thêm về hỗ trợ trình duyệt.

  • SpeechRecognition - Dành cho các ứng dụng yêu cầu nhận dạng giọng nói không đồng bộ. Điều này cho phép các ứng dụng nhận dạng ngữ cảnh giọng nói từ đầu vào âm thanh. Một đối tượng SpeechRecognition có thể được tạo bằng cách sử dụng hàm tạo. Giao diện SpeechGrammar tồn tại để đại diện cho tập hợp ngữ pháp mà ứng dụng sẽ nhận ra. Xem bảng hỗ trợ cho giao diện SpeechRecognition để tìm hiểu thêm về hỗ trợ trình duyệt.

Trong hướng dẫn này, bạn sẽ sử dụng giao diện SpeechSynthesis để tạo ứng dụng chuyển văn bản thành giọng nói. Đây là ảnh chụp màn hình demo về ứng dụng sẽ trông như thế nào (không có âm thanh):

Bản trình diễn ứng dụng

Nhận tài liệu tham khảo

Việc nhận tham chiếu đến đối tượng SpeechSynthesis có thể được thực hiện bằng một dòng mã:

var synthesis = window.speechSynthesis;

Rất hữu ích để kiểm tra xem SpeechSynthesis có được trình duyệt hỗ trợ hay không trước khi sử dụng chức năng mà nó cung cấp. Đoạn mã sau cho biết cách kiểm tra hỗ trợ của trình duyệt:

if ('speechSynthesis' in window) {   var synthesis = window.speechSynthesis;  } else {   console.log('Text-to-speech not supported.'); }

Nhận được giọng nói có sẵn

Trong bước này, bạn sẽ xây dựng trên mã hiện có của bạn để có được các giọng nói có sẵn. Phương thức getVoices() trả về danh sách các đối tượng SpeechSynthesisVoice đại diện cho tất cả các giọng nói có sẵn trên thiết bị.

Hãy xem đoạn mã sau:

if ('speechSynthesis' in window) {    var synthesis = window.speechSynthesis;    // Regex to match all English language tags e.g en, en-US, en-GB   var langRegex = /^en(-[a-z]{2})?$/i;    // Get the available voices and filter the list to only have English speakers   var voices = synthesis.getVoices().filter(voice => langRegex.test(voice.lang));    // Log the properties of the voices in the list   voices.forEach(function(voice) {     console.log({       name: voice.name,       lang: voice.lang,       uri: voice.voiceURI,       local: voice.localService,       default: voice.default     })   });  } else {   console.log('Text-to-speech not supported.'); }

Trong đoạn mã trên, bạn nhận được danh sách các giọng nói có sẵn trên thiết bị và lọc danh sách bằng cách sử dụng biểu thức chính quy langRegex đảm bảo rằng ta nhận được giọng nói chỉ dành cho người nói tiếng Anh. Cuối cùng, bạn lặp qua các giọng nói trong danh sách và ghi các thuộc tính của từng giọng nói vào console .

Xây dựng các lỗi diễn đạt

Trong bước này, bạn sẽ xây dựng lời nói bằng cách sử dụng SpeechSynthesisUtterance tạo SpeechSynthesisUtterance và đặt giá trị cho các thuộc tính có sẵn. Đoạn mã sau đây tạo ra lời nói khi đọc văn bản "Hello World" .

if ('speechSynthesis' in window) {    var synthesis = window.speechSynthesis;    // Get the first `en` language voice in the list   var voice = synthesis.getVoices().filter(function(voice) {     return voice.lang === 'en';   })[0];    // Create an utterance object   var utterance = new SpeechSynthesisUtterance('Hello World');    // Set utterance properties   utterance.voice = voice;   utterance.pitch = 1.5;   utterance.rate = 1.25;   utterance.volume = 0.8;    // Speak the utterance   synthesis.speak(utterance);  } else {   console.log('Text-to-speech not supported.'); }

Ở đây, bạn sẽ có được là người đầu tiên en giọng nói ngôn ngữ từ danh sách các tiếng nói có sẵn. Tiếp theo, bạn tạo một câu nói mới bằng cách sử dụng SpeechSynthesisUtterance tạo SpeechSynthesisUtterance . Sau đó, bạn đặt một số thuộc tính trên đối tượng phát âm như voice , pitch , rate và volume . Cuối cùng, nó phát biểu bằng cách sử dụng phương thức speak() của SpeechSynthesis .

Lưu ý: Có giới hạn đối với kích thước của văn bản có thể nói thành lời. Độ dài tối đa của văn bản có thể nói trong mỗi câu nói là 32.767 ký tự.

Lưu ý bạn đã truyền văn bản được nói trong hàm tạo. Bạn cũng có thể đặt văn bản được nói bằng cách đặt thuộc tính text của đối tượng phát biểu. Điều này sẽ overrides bất kỳ văn bản nào đã được truyền trong hàm tạo. Đây là một ví dụ đơn giản:

var synthesis = window.speechSynthesis; var utterance = new SpeechSynthesisUtterance("Hello World");  // This overrides the text "Hello World" and is uttered instead utterance.text = "My name is Glad.";  synthesis.speak(utterance);

Nói một tiếng Utterance

Trong đoạn mã trước, ta đã biết cách phát biểu bằng cách gọi phương thức speak() trên version SpeechSynthesis . Ta chỉ cần chuyển trong ví dụ SpeechSynthesisUtterance làm đối số cho phương thức speak() để phát biểu ý kiến.

var synthesis = window.speechSynthesis;  var utterance1 = new SpeechSynthesisUtterance("Hello World"); var utterance2 = new SpeechSynthesisUtterance("My name is Glad."); var utterance3 = new SpeechSynthesisUtterance("I'm a web developer from Nigeria.");  synthesis.speak(utterance1); synthesis.speak(utterance2); synthesis.speak(utterance3);

Có một số việc khác bạn có thể làm với version SpeechSynthesis chẳng hạn như tạm dừng, tiếp tục và hủy phát biểu. Do đó, các phương thức pause() , resume() và cancel() cũng có sẵn trên cá thể SpeechSynthesis .

Bước 2 - Xây dựng ứng dụng chuyển văn bản thành giọng nói

Ta đã thấy các khía cạnh cơ bản của giao diện SpeechSynthesis . Bây giờ ta sẽ bắt đầu xây dựng ứng dụng chuyển văn bản thành giọng nói của bạn . Trước khi ta bắt đầu, hãy đảm bảo bạn đã cài đặt Node và NPM trên máy của bạn .

Chạy các lệnh sau trên terminal của bạn để cài đặt một dự án cho ứng dụng và cài đặt các phần phụ thuộc.

Tạo một folder dự án mới:

  • mkdir web-speech-app

Di chuyển vào folder dự án mới tạo:

  • cd web-speech-app

Khởi tạo dự án:

  • npm init -y

Cài đặt các phụ thuộc cần thiết cho dự án:

  • npm install express cors axios

Sửa đổi phần "scripts" của file package.json để trông giống như đoạn mã sau:

package.json
"scripts": {   "start": "node server.js" }

Đến đây bạn đã khởi tạo dự án cho ứng dụng, bạn sẽ tiến hành cài đặt server cho ứng dụng bằng Express .

Tạo file server.js mới và thêm nội dung sau vào đó:

server.js
 const cors = require('cors'); const path = require('path'); const axios = require('axios'); const express = require('express');  const app = express(); const PORT = process.env.PORT || 5000;  app.set('port', PORT);  // Enable CORS(Cross-Origin Resource Sharing) app.use(cors());  // Serve static files from the /public directory app.use('/', express.static(path.join(__dirname, 'public')));  // A simple endpoint for fetching a random quote from QuotesOnDesign app.get('/api/quote', (req, res) => {   axios.get('http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1')     .then((response) => {       const [ post ] = response.data;       const { title, content } = post || {};        return (title && content)         ? res.json({ status: 'success', data: { title, content } })         : res.status(500).json({ status: 'failed', message: 'Could not fetch quote.' });     })     .catch(err => res.status(500).json({ status: 'failed', message: 'Could not fetch quote.' })); });  app.listen(PORT, () => console.log(`> App server is running on port ${PORT}.`));

Tại đây, bạn cài đặt một server Node bằng Express. Bạn đã bật CORS (Chia sẻ Yêu cầu Nhiều Nguồn root ) bằng cách sử dụng phần mềm trung gian cors() . Bạn cũng sử dụng phần mềm trung gian express.static() để phục vụ các file tĩnh từ folder /public trong folder root của dự án. Điều này sẽ cho phép bạn phục vụ trang index mà bạn sẽ sớm tạo.

Cuối cùng, bạn cài đặt tuyến GET /api/quote để tìm nạp một báo giá ngẫu nhiên từ dịch vụ QuotesOnDesign API. Bạn đang sử dụng axios (một thư viện client HTTP dựa trên lời hứa) để thực hiện yêu cầu HTTP.

Đây là phản hồi mẫu từ API QuotesOnDesign trông như thế nào:

Output
[   {     "ID": 2291,     "title": "Victor Papanek",     "content": "<p>Any attempt to separate design, to make it a thing-by-itself, works counter to the inherent value of design as the primary, underlying matrix of life.</p>\n",     "link": "https://quotesondesign.com/victor-papanek-4/",     "custom_meta": {       "Source": "<a href=\"http://www.amazon.com/Design-Real-World-Ecology-Social/dp/0897331532\">book</a>"     }   } ]

Khi bạn tìm nạp một trích dẫn thành công, title và content của trích dẫn sẽ được trả về trong trường data của phản hồi JSON. Nếu không, phản hồi JSON không thành công với mã trạng thái HTTP 500 sẽ được trả về.

Tiếp theo, bạn sẽ tạo một trang index cho chế độ xem ứng dụng. Đầu tiên tạo ra một mới public folder trong folder root của dự án của bạn. Tiếp theo, tạo một mới index.html file trong mới được tạo ra public folder và thêm các nội dung sau vào nó:

public / index.html
 <html>  <head>     <title>Daily Quotes</title>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head>  <body class="position-absolute h-100 w-100">     <div id="app" class="d-flex flex-wrap align-items-center align-content-center p-5 mx-auto w-50 position-relative"></div>      <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>     <script src="main.js"></script> </body>  </html>

Điều này tạo ra một trang index cơ bản cho ứng dụng chỉ với một <div id="app"> sẽ đóng role là điểm mount cho tất cả nội dung động của ứng dụng. Bạn cũng đã thêm một liên kết đến CDN Bootstrap để nhận một số kiểu Bootstrap 4 mặc định cho ứng dụng. Bạn cũng đã bao gồm jQuery cho các thao tác DOM và yêu cầu Ajax, và các biểu tượng Feather cho các biểu tượng SVG thanh lịch.

Bước 3 - Xây dựng kịch bản chính

Đến đây bạn đã đến phần cuối cùng cung cấp năng lượng cho ứng dụng — tập lệnh chính. Tạo file main.js mới trong folder public của ứng dụng của bạn và thêm nội dung sau vào đó:

public / main.js
 jQuery(function($) {    let app = $('#app');    let SYNTHESIS = null;   let VOICES = null;    let QUOTE_TEXT = null;   let QUOTE_PERSON = null;    let VOICE_SPEAKING = false;   let VOICE_PAUSED = false;   let VOICE_COMPLETE = false;    let iconProps = {     'stroke-width': 1,     'width': 48,     'height': 48,     'class': 'text-secondary d-none',     'style': 'cursor: pointer'   };    function iconSVG(icon) {}    function showControl(control) {}    function hideControl(control) {}    function getVoices() {}    function resetVoice() {}    function fetchNewQuote() {}    function renderQuote(quote) {}    function renderVoiceControls(synthesis, voice) {}    function updateVoiceControls() {}    function initialize() {}    initialize();  });

Mã này sử dụng jQuery để thực thi một hàm khi DOM được tải. Bạn nhận được một tham chiếu đến phần tử #app và khởi tạo một số biến. Bạn cũng khai báo một số hàm trống mà bạn sẽ thực hiện trong các phần sau. Cuối cùng, ta gọi initialize() để khởi tạo ứng dụng.

Biến iconProps chứa một số thuộc tính sẽ được sử dụng để hiển thị các biểu tượng Feather dưới dạng SVG cho DOM.

Với mã đó tại chỗ, bạn đã sẵn sàng để bắt đầu triển khai các chức năng. Sửa đổi file public/main.js để triển khai các chức năng sau:

public / main.js
 // Gets the SVG markup for a Feather icon function iconSVG(icon) {   let props = $.extend(iconProps, { id: icon });   return feather.icons[icon].toSvg(props); }  // Shows an element function showControl(control) {   control.addClass('d-inline-block').removeClass('d-none'); }  // Hides an element function hideControl(control) {   control.addClass('d-none').removeClass('d-inline-block'); }  // Get the available voices, filter the list to have only English filters function getVoices() {   // Regex to match all English language tags e.g en, en-US, en-GB   let langRegex = /^en(-[a-z]{2})?$/i;    // Get the available voices and filter the list to only have English speakers   VOICES = SYNTHESIS.getVoices()     .filter(function (voice) { return langRegex.test(voice.lang) })     .map(function (voice) {       return { voice: voice, name: voice.name, lang: voice.lang.toUpperCase() }     }); }  // Reset the voice variables to the defaults function resetVoice() {   VOICE_SPEAKING = false;   VOICE_PAUSED = false;   VOICE_COMPLETE = false; }

Hàm iconSVG(icon) lấy chuỗi tên biểu tượng Lông vũ làm đối số (ví dụ: 'play-circle' ) và trả về đánh dấu SVG cho biểu tượng. Kiểm tra tại đây để xem danh sách đầy đủ các biểu tượng lông vũ có sẵn. Ngoài ra, hãy kiểm tra tài liệu Feather để tìm hiểu thêm về API.

Hàm getVoices() sử dụng đối tượng SYNTHESIS để tìm nạp danh sách tất cả các giọng nói có sẵn trên thiết bị. Sau đó, nó lọc danh sách bằng cách sử dụng biểu thức chính quy để nhận được giọng nói của những người nói tiếng Anh duy nhất.

Tiếp theo, bạn sẽ triển khai các hàm để tìm nạp và hiển thị các dấu ngoặc kép trên DOM. Sửa đổi file public/main.js để triển khai các chức năng sau:

public / main.js
 function fetchNewQuote() {   // Clean up the #app element   app.html('');    // Reset the quote variables   QUOTE_TEXT = null;   QUOTE_PERSON = null;    // Reset the voice variables   resetVoice();    // Pick a voice at random from the VOICES list   let voice = (VOICES && VOICES.length > 0)     ? VOICES[ Math.floor(Math.random() * VOICES.length) ]     : null;    // Fetch a quote from the API and render the quote and voice controls   $.get('/api/quote', function (quote) {     renderQuote(quote.data);     SYNTHESIS && renderVoiceControls(SYNTHESIS, voice || null);   }); }  function renderQuote(quote) {    // Create some markup for the quote elements   let quotePerson = $('<h1 id="quote-person" class="mb-2 w-100"></h1>');   let quoteText = $('<div id="quote-text" class="h3 py-5 mb-4 w-100 font-weight-light text-secondary border-bottom border-gray"></div>');    // Add the quote data to the markup   quotePerson.html(quote.title);   quoteText.html(quote.content);    // Attach the quote elements to the DOM   app.append(quotePerson);   app.append(quoteText);    // Update the quote variables with the new data   QUOTE_TEXT = quoteText.text();   QUOTE_PERSON = quotePerson.text();  }

Ở đây trong phương thức fetchNewQuote() , trước tiên bạn đặt lại phần tử ứng dụng và các biến. Sau đó, bạn chọn ngẫu nhiên một giọng nói bằng cách sử dụng Math.random() từ danh sách các giọng nói được lưu trữ trong biến VOICES . Bạn sử dụng $.get() để thực hiện yêu cầu AJAX tới điểm cuối /api/quote , để tìm nạp một trích dẫn ngẫu nhiên và hiển thị dữ liệu trích dẫn đến chế độ xem cùng với điều khiển bằng giọng nói.

Phương thức renderQuote(quote) nhận một đối tượng quote làm đối số của nó và thêm nội dung vào DOM. Cuối cùng, nó cập nhật các biến trích dẫn: QUOTE_TEXT và QUOTE_PERSON .

Nếu bạn nhìn vào hàm fetchNewQuote() , bạn sẽ nhận thấy rằng bạn đã thực hiện một cuộc gọi đến hàm renderVoiceControls() . Chức năng này chịu trách nhiệm hiển thị các điều khiển để phát, tạm dừng và dừng kết quả giọng nói. Nó cũng hiển thị giọng nói hiện tại đang được sử dụng và ngôn ngữ.

Thực hiện các sửa đổi sau đối với file public/main.js để triển khai hàm renderVoiceControls() :

public / main.js
 function renderVoiceControls(synthesis, voice) {    let controlsPane = $('<div id="voice-controls-pane" class="d-flex flex-wrap w-100 align-items-center align-content-center justify-content-between"></div>');    let voiceControls = $('<div id="voice-controls"></div>');    // Create the SVG elements for the voice control buttons   let playButton = $(iconSVG('play-circle'));   let pauseButton = $(iconSVG('pause-circle'));   let stopButton = $(iconSVG('stop-circle'));    // Helper function to enable pause state for the voice output   let paused = function () {     VOICE_PAUSED = true;     updateVoiceControls();   };    // Helper function to disable pause state for the voice output   let resumed = function () {     VOICE_PAUSED = false;     updateVoiceControls();   };    // Click event handler for the play button   playButton.on('click', function (evt) {});    // Click event handler for the pause button   pauseButton.on('click', function (evt) {});    // Click event handler for the stop button   stopButton.on('click', function (evt) {});    // Add the voice controls to their parent element   voiceControls.append(playButton);   voiceControls.append(pauseButton);   voiceControls.append(stopButton);    // Add the voice controls parent to the controlsPane element   controlsPane.append(voiceControls);    // If voice is available, add the voice info element to the controlsPane   if (voice) {     let currentVoice = $('<div class="text-secondary font-weight-normal"><span class="text-dark font-weight-bold">' + voice.name + '</span> (' + voice.lang + ')</div>');      controlsPane.append(currentVoice);   }    // Add the controlsPane to the DOM   app.append(controlsPane);    // Show the play button   showControl(playButton);  }

Tại đây, bạn tạo các phần tử containers cho điều khiển bằng giọng nói và ngăn điều khiển. Bạn sử dụng hàm iconSVG() đã tạo trước đó để lấy đánh dấu SVG cho các node điều khiển và tạo cả các phần tử nút. Bạn xác định hàm trợ giúp paused() và resumed() , sẽ được sử dụng trong khi cài đặt trình xử lý sự kiện cho các node .

Cuối cùng, bạn kết xuất các node điều khiển bằng giọng nói và thông tin giọng nói vào DOM. Nó cũng được cấu hình để ban đầu chỉ có nút Play được hiển thị.

Tiếp theo, bạn sẽ triển khai các trình xử lý sự kiện nhấp chuột cho các node điều khiển bằng giọng nói mà bạn đã xác định trong phần trước. Cài đặt trình xử lý sự kiện như trong đoạn mã sau:

playButton.on('click', function (evt) {   evt.preventDefault();    if (VOICE_SPEAKING) {      // If voice is paused, it is resumed when the playButton is clicked     if (VOICE_PAUSED) synthesis.resume();     return resumed();    } else {      // Create utterances for the quote and the person     let quoteUtterance = new SpeechSynthesisUtterance(QUOTE_TEXT);     let personUtterance = new SpeechSynthesisUtterance(QUOTE_PERSON);      // Set the voice for the utterances if available     if (voice) {       quoteUtterance.voice = voice.voice;       personUtterance.voice = voice.voice;     }      // Set event listeners for the quote utterance     quoteUtterance.onpause = paused;     quoteUtterance.onresume = resumed;     quoteUtterance.onboundary = updateVoiceControls;      // Set the listener to activate speaking state when the quote utterance starts     quoteUtterance.onstart = function (evt) {       VOICE_COMPLETE = false;       VOICE_SPEAKING = true;       updateVoiceControls();     }      // Set event listeners for the person utterance     personUtterance.onpause = paused;     personUtterance.onresume = resumed;     personUtterance.onboundary = updateVoiceControls;      // Refresh the app and fetch a new quote when the person utterance ends     personUtterance.onend = fetchNewQuote;      // Speak the utterances     synthesis.speak(quoteUtterance);     synthesis.speak(personUtterance);    }  });  pauseButton.on('click', function (evt) {   evt.preventDefault();    // Pause the utterance if it is not in paused state   if (VOICE_SPEAKING) synthesis.pause();   return paused(); });  stopButton.on('click', function (evt) {   evt.preventDefault();    // Clear the utterances queue   if (VOICE_SPEAKING) synthesis.cancel();   resetVoice();    // Set the complete status of the voice output   VOICE_COMPLETE = true;   updateVoiceControls(); });

Tại đây, bạn cài đặt trình nghe sự kiện nhấp chuột cho các node điều khiển bằng giọng nói. Khi nhấp vào nút Phát , nó sẽ bắt đầu nói các câu nói bắt đầu bằng câu quoteUtterance và sau đó là personUtterance . Tuy nhiên, nếu kết quả giọng nói ở trạng thái tạm dừng, nó sẽ tiếp tục lại.

Bạn đặt VOICE_SPEAKING để true trong onstart xử lý sự kiện cho quoteUtterance . Ứng dụng cũng sẽ làm mới và tìm nạp một trích dẫn mới khi người personUtterance kết thúc.

Nút Pause tạm dừng kết quả giọng nói, trong khi nút Dừng kết thúc kết quả giọng nói và xóa tất cả các câu nói khỏi hàng đợi, sử dụng phương thức cancel() của giao diện SpeechSynthesis . Mã gọi hàm updateVoiceControls() mỗi lần để hiển thị các node thích hợp.

Bạn đã thực hiện một vài lệnh gọi và tham chiếu đến hàm updateVoiceControls() trong các đoạn mã trước đó. Chức năng này chịu trách nhiệm cập nhật các điều khiển bằng giọng nói để hiển thị các điều khiển thích hợp dựa trên các biến trạng thái giọng nói.

Hãy tiếp tục và thực hiện các sửa đổi sau đối với file public/main.js để triển khai hàm updateVoiceControls() :

public / main.js
 function updateVoiceControls() {    // Get a reference to each control button   let playButton = $('#play-circle');   let pauseButton = $('#pause-circle');   let stopButton = $('#stop-circle');    if (VOICE_SPEAKING) {      // Show the stop button if speaking is in progress     showControl(stopButton);      // Toggle the play and pause buttons based on paused state     if (VOICE_PAUSED) {       showControl(playButton);       hideControl(pauseButton);     } else {       hideControl(playButton);       showControl(pauseButton);     }    } else {     // Show only the play button if no speaking is in progress     showControl(playButton);     hideControl(pauseButton);     hideControl(stopButton);   }  }

Trong mã này, trước tiên, bạn nhận được tham chiếu đến từng phần tử của nút điều khiển bằng giọng nói. Sau đó, bạn chỉ định các node điều khiển bằng giọng nói nào sẽ hiển thị ở các trạng thái khác nhau của kết quả giọng nói.

Đến đây bạn đã sẵn sàng triển khai initialize() . Chức năng này có nhiệm vụ khởi tạo ứng dụng. Thêm đoạn mã sau vào file public/main.js để triển khai initialize() .

public / main.js
 function initialize() {   if ('speechSynthesis' in window) {      SYNTHESIS = window.speechSynthesis;      let timer = setInterval(function () {       let voices = SYNTHESIS.getVoices();        if (voices.length > 0) {         getVoices();         fetchNewQuote();         clearInterval(timer);       }     }, 200);    } else {      let message = 'Text-to-speech not supported by your browser.';      // Create the browser notice element     let notice = $('<div class="w-100 py-4 bg-danger font-weight-bold text-white position-absolute text-center" style="bottom:0; z-index:10">' + message + '</div>');      fetchNewQuote();     console.log(message);      // Display non-support info on DOM     $(document.body).append(notice);    } }

Đầu tiên, đoạn mã này sẽ kiểm tra xem speechSynthesis có sẵn trên đối tượng window global không và sau đó được gán cho biến SYNTHESIS nếu nó có sẵn. Tiếp theo, bạn cài đặt khoảng thời gian để tìm nạp danh sách các giọng nói có sẵn.

Bạn đang sử dụng một khoảng thời gian ở đây vì có một hành vi không đồng bộ đã biết với SpeechSynthesis.getVoices() khiến nó trả về một mảng trống ở lần gọi đầu tiên vì giọng nói chưa được tải. Khoảng thời gian đảm bảo bạn nhận được danh sách các giọng nói trước khi tìm nạp một trích dẫn ngẫu nhiên và xóa khoảng thời gian đó.

Đến đây bạn đã hoàn thành ứng dụng chuyển văn bản thành giọng nói. Bạn có thể khởi động ứng dụng bằng cách chạy npm start trên terminal của bạn . Ứng dụng sẽ bắt đầu chạy trên cổng 5000 nếu có sẵn. Truy cập http: // localhost: 5000 trình duyệt của bạn để xem ứng dụng.

Sau khi chạy, ứng dụng của bạn sẽ giống như ảnh chụp màn hình sau:

Ảnh chụp màn hình cuối cùng của ứng dụng chuyển giọng nói thành văn bản

Kết luận

Trong hướng dẫn này, bạn đã sử dụng Web Speech API để tạo ứng dụng chuyển văn bản thành giọng nói cho web. Bạn có thể tìm hiểu thêm về Web Speech API và cũng có thể tìm thấy một số tài nguyên hữu ích tại đây .

Nếu bạn muốn tiếp tục tinh chỉnh ứng dụng của bạn , có một số tính năng thú vị mà bạn vẫn có thể triển khai và thử nghiệm, chẳng hạn như điều khiển âm lượng, điều khiển cao độ bằng giọng nói, điều khiển tốc độ / tốc độ, phần trăm văn bản được đọc, v.v.

Mã nguồn hoàn chỉnh cho hướng dẫn này kiểm tra repository web-speech-demo trên GitHub.

Tags:

Các tin liên quan

Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
2019-12-12
Cách tạo thông báo trên web bằng kênh Laravel và Pusher
2019-12-12
Khả năng truy cập web cho người mới bắt đầu
2019-12-12
Cách cài đặt web server OpenLiteSpeed trên Ubuntu 18.04
2019-12-02
Sử dụng Phông chữ Google trong các Trang web của bạn
2019-08-22
Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29
Cách triển khai ứng dụng web Go với Docker và Nginx trên Ubuntu 18.04
2019-04-23