How to Build a Text-to-Voice Application With JavaScript

This tutorial will cowl easy methods to convert textual content into speech utilizing JavaScript utilizing WebSpeechAPI. It can function a easy interface the place the consumer provides the textual content to be spoken, then clicks a button to generate the corresponding speech.

Our Textual content-to-Speech Demo

Right here’s what we’re going to construct. Sort something you need within the textarea, choose the language you’ve written it in, and click on the button to listen to the outcome!

HTML Construction

Okay, let’s begin constructing. The HTML Construction will encompass the next components:

  • a <textarea> for the textual content to be transformed.
  • A <select> component. Contained in the choose component, we’ll populate language choices.
  • A generate <button> which, when clicked, will communicate the textual content content material supplied.

To maintain us centered on performance, we’ll use Bootstrap to construct the interface. Make sure you add the Bootstrap CDN hyperlink in your header like this: 

1
 <hyperlink
2
  href="https://cdn.jsdelivr.web/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
3
  rel="stylesheet"
4
  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
5
  crossorigin="nameless"
6
/>

Add the HTML Construction.

1
<div class="container">
2
  <div class="message alert alert-warning" position="alert">
3
  </div>
4
  <h1>Textual content to Voice Converter</h1>
5
  <kind>
6
  <div class="form-group">
7
    <label for="textual content">Enter your textual content:</label>
8
    <textarea identify="textual content" class="content material form-control form-control-lg" rows="6"></textarea>
9
  </div>
10
  <div class="form-group">
11
    <label for="voices">Select your language:</label>
12
    <choose class="select-voices form-control form-control-lg" identify="voices">
13
    </choose>
14
  </div>
15
  <button sort="button" class="convert btn btn-primary">🔊 Convert Textual content to Voice</button>
16
  </kind>
17
</div>

Extra Styling with CSS

Bootstrap handles just about all of the styling for us. However let’s add some customized CSS properties to our design. These will give us a customized font, a container, some further spacing for the weather within the kind, and a rule to cover our alert message.

1
@import url("https://fonts.googleapis.com/css2?household=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&show=swap");
2

3
physique {
4
  font-family: "DM Mono", monospace;
5
}
6
.container {
7
  width: 100%;
8
  max-width: 600px;
9
  padding: 2rem 0;
10
}
11
.form-group {
12
  margin: 2rem 0;
13
}
14
label {
15
  margin-bottom: 1rem;
16
}
17
.message{
18
    show: none;
19
}

Now we have set show:none to the alert part so that it’ll solely seem if there are error messages to show.

JavaScript Performance

As I defined within the introduction, we will receive voices utilizing the speechSynthesis.getVoices() technique; let’s begin by getting and storing them in an array like this.

1
const voices = [
2
  { name: "Google Deutsch", lang: "de-DE" },
3
  { name: "Google US English", lang: "en-US" },
4
  { name: "Google UK English Female", lang: "en-GB" },
5
  { name: "Google UK English Male", lang: "en-GB" },
6
  { name: "Google español", lang: "es-ES" },
7
  { name: "Google español de Estados Unidos", lang: "es-US" },
8
  { name: "Google français", lang: "fr-FR" },
9
  { name: "Google हिन्दी", lang: "hi-IN" },
10
  { name: "Google Bahasa Indonesia", lang: "id-ID" },
11
  { name: "Google italiano", lang: "it-IT" },
12
  { name: "Google 日本語", lang: "ja-JP" },
13
  { name: "Google 한국의", lang: "ko-KR" },
14
  { name: "Google Nederlands", lang: "nl-NL" },
15
  { name: "Google polski", lang: "pl-PL" },
16
  { name: "Google português do Brasil", lang: "pt-BR" },
17
  { name: "Google русский", lang: "ru-RU" },
18
  { name: "Google 普通话(中国大陆)", lang: "zh-CN" },
19
  { name: "Google 粤語(香港)", lang: "zh-HK" },
20
  { name: "Google 國語(臺灣)", lang: "zh-TW" }
21
];

Determine the Required Parts

Subsequent, use the Doc Object Mannequin (DOM) to acquire the alert, choose, and button components.

1
const optionsContainer = doc.querySelector(".select-voices");
2
const convertBtn = doc.querySelector(".convert");
3
const messageContainer = doc.querySelector(".message")

Create Voices Choice

The optionsContainer represents the <choose> component for the drop-down checklist of voices from which the consumer will choose an possibility.

We need to populate it with the voices from the voices array. Create a perform referred to as addVoices().

1
perform addVoices(){
2
  // populate choices with the voices from array
3

4
}

Contained in the perform, use the forEach() technique to loop by means of the voices array, and for every voice object, set possibility.worth = voice.lang and possibility.textual content = voice.identify, then append the choice to the choose component.

1
perform addVoices() {
2
  console.log(voices);
3
  voices.forEach((voice) => {
4
    let possibility = doc.createElement("possibility");
5
    possibility.worth = voice.lang;
6
    possibility.textContent = voice.identify;
7
    optionsContainer.appendChild(possibility);
8

9
    if (voice.lang === "en-US") {
10
      possibility.chosen = true;
11
    }
12
  });
13
}

We have to invoke the addVoices() perform to use the performance, nonetheless, for the Chrome browser, we have to take heed to the voiceschanged occasion after which name the addVoices() perform. So we’ll add a situation: 

1
if (navigator.userAgent.indexOf("Chrome") !== -1) {
2
  speechSynthesis.addEventListener("voiceschanged", addVoices);
3
} else {
4
  addVoices();
5
}

The voiceschanged occasion is a JavaScript occasion fired when the checklist of obtainable speech synthesis voices adjustments. The occasion occurs when the checklist of obtainable voices is able to use.

Button Occasion Listener

Add a click on occasion listener to the generate button.

1
convertBtn.addEventListener("click on", perform () {
2
//   show an alert message if content material is empty
3
//   move the arguments to convertToSpeech() 
4
});

Contained in the occasion listener perform, we need to show an alert if the content material isn’t supplied, get the textual content from the textarea, get the chosen language, and move the values to the convertToSpeech() perform.

Replace the occasion listener as follows.

1
convertBtn.addEventListener("click on", perform () {
2
  convertText = doc.querySelector(".content material").worth;
3

4
  if (convertText === "") {
5
  messageContainer.textContent = " Please present some textual content";
6
  messageContainer.fashion.show = "block";
7
  
8
  setTimeout(() => {
9
    messageContainer.textContent = ""; 
10
    messageContainer.fashion.show = "none";
11
  }, 2000);
12
  
13
  return;
14
}
15

16
  const selectedLang =
17
    optionsContainer.choices[optionsContainer.selectedIndex].worth;
18
  
19

20
  convertToSpeech(convertText, selectedLang);
21
});

Create the convertToSpeech() perform and add the code under.

1
perform convertToSpeech(textual content, lang) {
2
  if (!("speechSynthesis" in window)) {
3
    messageContainer.textContent =
4
      " Your browser isn't supported, strive one other browser";
5
      messageContainer.fashion.show ="block"
6
    return;
7
  }
8
  let utterance = new SpeechSynthesisUtterance();
9
  utterance.lang = lang;
10
  utterance.textual content = textual content;
11

12
  speechSynthesis.communicate(utterance);
13

14
}

The covertToSpeech() perform will take the 2 parameters, i.e., the textual content to be transformed and the language the textual content must be spoken in.

Let’s break it down:

  • First, we’ll test if the browser helps speech synthesis; if it would not, we’ll show the message “Your browser isn’t supported; strive one other browser”
  • If speech synthesis is supported, we’ll create a brand new SpeechSynthesisUtterance occasion and assign it to the variable utterance.
  • Then we apply the textual content to the speech request with utterance.textual content and the language with utterance.lang.
  • Lastly, the browser will communicate the textual content utilizing speechSynthesis.communicate(utterance).

Conclusion

I hope you loved this tutorial and discovered one thing helpful! We lined every part it’s good to create text-to-voice apps by leveraging the capabilities of WebSpeechApi. Incorporating text-to-voice performance in your utility will cater to various consumer wants and can enhance its general accessibility.

Let’s remind ourselves what we created:

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0