This tutorial will cowl convert textual content into speech utilizing JavaScript utilizing WebSpeechAPI. It would characteristic 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 end result!
HTML Construction
Okay, let’s begin constructing. The HTML Construction will encompass the next components:
- a
for the textual content to be transformed. - A
aspect. Contained in the choose aspect, we’ll populate language choices. - A generate
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 |
|
2 |
href="https://cdn.jsdelivr.internet/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 |
|
2 |
|
3 |
|
4 |
Textual content to Voice Converter |
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
Further 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 are able to get hold of 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 |
];
|
Establish 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 aspect for the drop-down checklist of voices from which the consumer will choose an possibility.
We wish to populate it with the voices from the voices array. Create a operate referred to as addVoices().
1 |
operate addVoices(){ |
2 |
// populate choices with the voices from array
|
3 |
|
4 |
}
|
Contained in the operate, use the forEach() technique to loop by way 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 aspect.
1 |
operate 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() operate to use the performance, nonetheless, for the Chrome browser, we have to take heed to the voiceschanged occasion after which name the addVoices() operate. 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 accessible speech synthesis voices modifications. The occasion occurs when the checklist of accessible voices is able to use.
Button Occasion Listener
Add a click on occasion listener to the generate button.
1 |
convertBtn.addEventListener("click on", operate () { |
2 |
// show an alert message if content material is empty
|
3 |
// go the arguments to convertToSpeech()
|
4 |
});
|
Contained in the occasion listener operate, we wish to show an alert if the content material just isn’t supplied, get the textual content from the textarea, get the chosen language, and go the values to the convertToSpeech() operate.
Replace the occasion listener as follows.
1 |
convertBtn.addEventListener("click on", operate () { |
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() operate and add the code under.
1 |
operate convertToSpeech(textual content, lang) { |
2 |
if (!("speechSynthesis" in window)) { |
3 |
messageContainer.textContent = |
4 |
" Your browser just isn't supported, attempt 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() operate will take the 2 parameters, i.e., the textual content to be transformed and the language the textual content ought to be spoken in.
Let’s break it down:
- First, we’ll test if the browser helps speech synthesis; if it does not, we’ll show the message “Your browser just isn’t supported; attempt one other browser”
- If speech synthesis is supported, we’ll create a brand new
SpeechSynthesisUtteranceoccasion and assign it to the variable utterance. - Then we apply the textual content to the speech request with
utterance.textual contentand the language withutterance.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 coated the whole lot it is advisable to create text-to-voice apps by leveraging the capabilities of WebSpeechApi. Incorporating text-to-voice performance in your software will cater to various consumer wants and can enhance its total accessibility.
Let’s remind ourselves what we created: