Web Text-to-Speech Tutorial using Web Speech API Synthesis

Plenzy_ · 2025-02-27T03:12:33+0000

This is a simple tutorial that will teach how to convert Text into Speech in web applications. In order to do this, we are going to use the Web Speech API Interface Speech Synthesis. The Web Speech API will allow you to convert the text into incorporate voice data into web projects.

In this tutorial, I will be providing a simple web application that allows users to write a text message and converts it into speech. The application will re-display the text message below the form. Each word spoken will be highlighted.

Getting Started

The source code below uses Bootstrap v5 as the CSS Framework of the application user interface. Also, I have used jQuery Library for writing the JavaScript functions.

Compile the downloaded files of the library and CSS Framework into a directory that will serve as your source code directory.

Creating the Interface

The following script is an HTML File that contains the HTML Tags for the design of our web application. This file holds the Text Message Form and the Display Area.

Open a text editor such as (notepad++, Submlime Text, VS Code, or etc.). Create a new HTML File. Copy the script below and paste it into your new HTML File. Then, save the file into your source code directory and name the file as index.html.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Text-To-Speech</

title

>
<link

rel

=

"stylesheet"

href

=

"./css/bootstrap.min.css"

>
<script

src

=

"./js/jquery-3.6.0.min.js"

></

script

>
<script

src

=

"./js/bootstrap.min.js"

></

script

>
<script

src

=

"./js/script.js"

></

script

>
<style

>
:root {
--bs-success-rgb: 71, 222, 152 !important;
}
html,
body {
height: 100%;
width: 100%;
font-family: Apple Chancery, cursive;
}
mark {
background-color: yellow;
}
</

style

>
</

head

>
<body

class

=

"bg-light"

>
<nav class

=

"navbar navbar-expand-lg navbar-dark bg-primary bg-gradient"

id

=

"topNavBar"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"https://sourcecodester.com"

>
Sourcecodester
</

a

>
</

div

>
</

nav>
<div

class

=

"container py-3"

id

=

"page-container"

>
<h3

>

Text-To-Speech</

h3

>
<hr

>
<small

>

This simple project converts your text to speech.</

small

>
<div

class

=

"content"

>
<div

class

=

"row justify-content-center"

>
<div

class

=

"col-md-6"

>
<form

action

=

""

id

=

"text-form"

>
<div

class

=

"form-goup"

>
<label

for

=

"message"

class

=

"control-label"

>

Enter you Message to Convert</

label

>
<textarea

name

=

"message"

id

=

"message"

rows

=

"10"

class

=

"form-control rounded-0"

></

textarea

>
</

div

>
<center

>
<button

class

=

"btn btn-primary py-2"

id

=

"submit"

>

Speak</

button

>
</

center

>
</

form

>
<div

id

=

"display"

class

=

"py-3"

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

body

>
</

html

>

Creating the Main Function

The following code/script is a JavaScript file which contains the codes of the function of form submission and speech synthesis configuration. Save this file as script.js.

// setting Speech Synthesis
let text_to_speech =

new

SpeechSynthesisUtterance(

)

;
let synth =

window.speechSynthesis

;
$(

function

(

)

{
// SpeechSynthesisUtterance Configuration
text_to_speech.lang

=

'en'

;
text_to_speech.voice

=

synth.getVoices

(

)

[

0

]

;
// An Event that identifies the part of text has spoken
text_to_speech.onboundary

=

function

(

e)

{
var

message =

$(

'#display'

)

.text

(

)
var

b_text =

String

(

message)

.substring

(

0

,

e.charIndex

+

e.charLength

)
var

marked =

$(

'<mark>'

)
marked.text

(

b_text)
$(

'#display'

)

.html

(

''

)
$(

'#display'

)

.append

(

marked)
$(

'#display'

)

.append

(

message.replace

(

b_text,

""

)

)
}
$(

'#text-form'

)

.submit

(

function

(

e)

{
e.preventDefault

(

)

;
// Set Text to be spoken
text_to_speech.text

=

$(

'#message'

)

.val

(

)

;
$(

'#display'

)

.text

(

$(

'#message'

)

.val

(

)

)
$(

'#message'

)

.val

(

''

)
// Start to Speak the text
synth.speak

(

text_to_speech)
$(

'#display'

)

.animate

(

{

scrollTop:

0

}

,

'fast'

)
}

)
}

)

Note: Check the CSS and Script Links imported in the index.html file if the file path location is right.

That's it! You can now test the source code on your end and see if the application is working as was planned. To run the application, browse the index.html

file in a browser. If there's an error occurred on your end, check your source code and differentiate it from the source code I provided above. You can also download the working source code that I created for this tutorial. The download button is located below this article.

DEMO VIDEO

That is the end of this tutorial. I hope this will help you with what you are looking for and for your future Web Application Project. Explore more on this website for more tutorials and free source codes.

Happy Coding:)

Download

You must upgrade your account or reply in the thread to view hidden text.

Web Text-to-Speech Tutorial using Web Speech API Synthesis

More options

Plenzy_

442,401

317,942

317,951