Using the Web Speech API for Multilingual Translations

Ever since science fiction's early days, we've dreamed of machines that converse with us. Today, this is commonplace. However, the technology for enabling websites to "speak" is still relatively new.

The Web Speech API's SpeechSynthesis component allows us to create talking web pages. While still considered experimental, it boasts excellent support in the latest Chrome, Safari, and Firefox versions.

A particularly exciting aspect is its use with multiple languages. Mac OSX and most Windows systems offer robust cross-browser support. Chrome dynamically loads voices, so even if your OS lacks international voices, Chrome will provide them. We'll build a three-step page that speaks the same text in various languages. The core code is adapted from existing documentation, but our final version adds enhanced features and is viewable on my Polyglot CodePen.

Step 1: A Simple Foundation

Let's begin with a basic page containing a text input for the speech content and a button to trigger the speech.

<div>
  <h1 id="Simple-Text-to-Speech">Simple Text-to-Speech</h1>
  <p id="warning">Sorry, your browser doesn't support the Web Speech API.</p>  
  <textarea id="txtFld" placeholder="Type text here..."></textarea><br>
  <button id="speakBtn">Speak</button><br>
  <p>Note: For optimal Mac performance, use the latest Chrome, Safari, or Firefox. On Windows, use Chrome.</p>
</div>

The paragraph with the ID "warning" only appears if JavaScript detects Web Speech API incompatibility. Note the IDs for the textarea and button; we'll use them in our JavaScript.

Feel free to customize the HTML styling. You can also use my demo as a starting point.

It's advisable to style the disabled button state to avoid confusion for users with incompatible browsers (like the outdated Internet Explorer). We'll also hide the warning initially using CSS:

button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

#warning {
  color: red;
  display: none;
  font-size: 1.4rem;
}

Now for the JavaScript! We'll define variables referencing the "Speak" button and the textarea. An event listener ensures the init() function executes after the DOM loads. I use a helper function, "qs," (defined below) as a shortcut for document.querySelector. An event listener on speakBtn calls the talk() function.

The talk() function creates a SpeechSynthesisUtterance object (part of the Web Speech API), assigns the textarea's text to its text property, and then uses speechSynthesis.speak() to play the audio. The voice varies depending on the browser and OS. On my Mac, the default is Alex (American English). In Step 2, we'll add a voice selection menu.

let speakBtn, txtFld;

function init() {
  speakBtn = qs("#speakBtn");
  txtFld = qs("#txtFld");
  speakBtn.addEventListener("click", talk, false);
  if (!window.speechSynthesis) {
    speakBtn.disabled = true;
    qs("#warning").style.display = "block";
  }
}

function talk() {
  let u = new SpeechSynthesisUtterance();
  u.text = txtFld.value;
  speechSynthesis.speak(u);
}

// Reusable utility function
function qs(selectorText) {
  return document.querySelector(selectorText);
}

document.addEventListener('DOMContentLoaded', init);

Step 2: International Voice Selection

To use languages beyond the default, we need additional code. Let's add a select element for voice options:

<h1 id="Multilingual-Text-to-Speech">Multilingual Text-to-Speech</h1>
<div>
  <label for="speakerMenu">Voice: </label>
  <select id="speakerMenu"></select>
</div>

Before populating the menu, we'll map language codes to names. Each language has a two-letter code (e.g., "en" for English, "es" for Spanish). We'll create an array of objects like {"code": "pt", "name": "Portuguese"}. A helper function will search this array for a specific property value. We'll use it to find the language name matching the selected voice's code. Add the following functions:

function getLanguageTags() {
  // ... (same as before) ...
}

function searchObjects(array, prop, term, caseSensitive = false) {
  // ... (same as before) ...
}

Now, let's populate the select element's options using JavaScript. We'll declare variables for the #speakerMenu select element, a placeholder for language display (removed later), the array of voices (allVoices), an array of language codes (langtags), and a variable to track the selected voice (voiceIndex).

let speakBtn, txtFld, speakerMenu, allVoices, langtags, voiceIndex = 0;

The updated init() function adds references to #speakerMenu and calls setUpVoices() if the Web Speech API is supported. For Chrome, we listen for voice changes and re-run the setup. Chrome handles voices asynchronously, requiring this extra step.

function init() {
  // ... (modified init function as described above) ...
}

The setUpVoices() function retrieves SpeechSynthesisVoice objects using speechSynthesis.getVoices(). We use getAllVoices() to handle potential duplicate voices. A unique ID is added to each voice object for later filtering. allVoices will contain objects like:

{id:48, voiceURI:"Paulina", name:"Paulina", lang: "es-MX", localService:true},
{id:52, voiceURI:"Samantha", name:"Samantha", lang: "en-US", localService:true},
{id:72, voiceURI:"Google Deutsch", name:"Google Deutsch", lang: "de-DE", localService:false}

The last line of setUpVoices() calls a function to create the speaker menu options. The voice ID is used as the option's value, and the name and language are displayed.

function setUpVoices() {
  allVoices = getAllVoices();
  createSpeakerMenu(allVoices);
}

function getAllVoices() {
  // ... (same as before) ...
}

function createSpeakerMenu(voices) {
  // ... (same as before) ...
}

The selectSpeaker() function (called when speakerMenu changes) stores the selected index, retrieves the selected voice, extracts the language code, searches langtags for the language name, and updates the display.

function selectSpeaker() {
  // ... (same as before) ...
}

Finally, update talk() to use the selected voice and language, and to allow setting the speech rate:

function talk() {
  // ... (modified talk function as described above) ...
}

This completes Step 2. Experiment with different voices and languages!

Step 3: The Complete Polyglot Application

The final step refines the UI and adds functionality:

• A language selection menu
• User-adjustable speech speed
• A default phrase that translates based on language selection

Here's the updated HTML:

<div>
  <label for="languageMenu">Language: </label>
  <select id="languageMenu"></select>
</div>

<div>
  <label for="rateFld">Speed: </label>
  <input type="number" id="rateFld" min="0.5" max="2" step="0.1" value="0.8">
</div>

We'll modify the JavaScript variable declarations to include: allLanguages, primaryLanguages, langhash, langcodehash, rateFld, languageMenu, and blurbs. A flag, initialSetup, will control the languages menu setup.

let speakBtn, txtFld, speakerMenu, allVoices, langtags, voiceIndex = 0;
let allLanguages, primaryLanguages, langhash, langcodehash;
let rateFld, languageMenu, blurbs;
let initialSetup = true;
let defaultBlurb = "I enjoy the traditional music of my native country.";

The init() function now creates the blurbs array, references rateFld and languageMenu, and creates hash tables for language lookups.

function init() {
  // ... (modified init function as described above) ...
}

setUpVoices() now calls getAllLanguages(), getPrimaryLanguages(), filterVoices(), and createLanguageMenu(). getAllLanguages() extracts unique languages from allVoices, and getPrimaryLanguages() extracts the main language codes.

function setUpVoices() {
  // ... (modified setUpVoices function as described above) ...
}

function getAllLanguages(voices) {
  // ... (same as before) ...
}

function getPrimaryLanguages(langlist) {
  // ... (same as before) ...
}

filterVoices() filters allVoices based on the selected language, populates speakerMenu, and updates the textarea with the appropriate blurb. createLanguageMenu() creates the language menu options. selectLanguage() is called when the language is changed, triggering filterVoices() and resetting the voice selection.

function filterVoices() {
  // ... (same as before) ...
}

function createLanguageMenu() {
  // ... (same as before) ...
}

function selectLanguage() {
  // ... (same as before) ...
}

Add the getLookupTable() utility function:

function getLookupTable(objectsArray, propname) {
  // ... (same as before) ...
}

Add the blurbs array:

function createBlurbs() {
  // ... (same as before) ...
}

Finally, update talk() to use the speech rate from rateFld:

function talk() {
  // ... (modified talk function as described above) ...
}

This completes the polyglot application. The user can now select a language, choose a voice, adjust the speech speed, and hear the selected text spoken in the chosen language. This demonstrates the power and flexibility of the Web Speech API for creating multilingual web applications.

The above is the detailed content of Using the Web Speech API for Multilingual Translations. For more information, please follow other related articles on the PHP Chinese website!