Today, I invite you to learn more about the Web Speech API, an API that allows you to make up powered up voice-enabled web applications. We will dive into speech recognition and synthesis, and embark on it creating a simple demo.
Imagine browsing the web and interacting with it through voice commands instead of typing. This is the power of the Web Speech API. It allows developers to add both speech recognition (listening to what you say) and speech synthesis (speaking back to you) capabilities to their web applications, creating rich, interactive experiences.
Engagement: Voice-enabled interfaces add a dash of excitement to user experiences, making interactions more natural and immersive.
Innovation: With Web Speech API, we’re at the forefront of technological innovation, exploring new frontiers in web development.
Let’s dive into a hands-on demo where we’ll build a simple yet powerful interface. This demo allows users to enter text, control the speed at which the text is spoken, and stop the speech at any time.
Step 1: Setting the Stage
We’ll start by creating the basic HTML structure of the page. This includes a text area for input, a slider to control the speech speed, and buttons to start and stop the speech.
Web Speech API Example
Step 2: Styling the Interface
Next, we’ll add some CSS to style our page. The goal is to create a clean and modern user interface that is easy to use. We are not going to focus much on how we style it, feel free to add your personal design style.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 500px;
width: 100%;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
textarea {
width: 100%;
height: 100px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
text-align: center;
}
input[type="range"] {
width: 100%;
margin-bottom: 20px;
}
.buttons {
display: flex;
justify-content: space-between;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
font-weight: bold; /* Make the button text bold for better contrast */
}
button#speak {
background-color: #4CAF50;
color: white;
}
button#stop {
background-color: #f44336;
color: white;
}
button:hover {
opacity: 0.9;
}
Finally, we’ll add JavaScript to bring the interface to life. This script will enable the speech synthesis functionality, allowing users to hear their text spoken at the speed they choose and stop it when needed.
// Ensure the Web Speech API is supported
if ('speechSynthesis' in window) {
const speakButton = document.getElementById('speak');
const stopButton = document.getElementById('stop');
const textInput = document.getElementById('text');
const speedInput = document.getElementById('speed');
let utterance;speakButton.addEventListener('click', () => {
const text = textInput.value.trim();
if (text !== '') {
// Create a new instance of SpeechSynthesisUtterance
utterance = new SpeechSynthesisUtterance(text);
// Set the speech speed
utterance.rate = speedInput.value;
// Speak the text
window.speechSynthesis.speak(utterance);
} else {
alert('Please enter some text to speak.');
}
});
stopButton.addEventListener('click', () => {
if (window.speechSynthesis.speaking) {
// Cancel the speech
window.speechSynthesis.cancel();
} else {
alert('Not speaking right now.');
}
});
} else {
alert('Sorry, your browser does not support the Web Speech API.');
}
We invite you to test the project clicking in our repository page, you can access to the code, create issues or comments in our Samsung Internet repository.
HTML Structure: We created a simple interface with a element for input, a range input for adjusting speech speed, and buttons for speaking and stopping the speech.
CSS Styling: The interface is designed to be clean, modern, and easy to interact with.
JavaScript Functionality:
1- We checked if the Web Speech API is supported by the browser.
2- The script listens for clicks on the “Speak” and “Stop” buttons.
3- It creates a SpeechSynthesisUterance object to handle the speech and sets the rate based on the slider.
4- The speech can be stopped at any time by clicking the “Stop” button.
With the Web Speech API, you can bring a new level of interaction and engagement to your web applications. Whether you’re creating a virtual assistant, a language learning tool, or just want to add some fun voice features to your site, this API opens up endless possibilities. Start experimenting today and see where your creativity takes you!
If you want to know more about this API and test it yourself, you can check the following:
