Implementing Speech-to-Text Using HTML, CSS, and JavaScript
4 mins read

Implementing Speech-to-Text Using HTML, CSS, and JavaScript

How to Implement Speech-to-Text Using HTML, CSS, and JavaScript

Speech-to-text technology has become increasingly popular in recent years, allowing users to convert spoken words into written text. This technology can be implemented using a combination of HTML, CSS, and JavaScript. In this tutorial, we will guide you through the process of creating a speech-to-text feature on your website.

Step 1: Setting up the HTML Structure

First, let’s set up the basic HTML structure for our speech-to-text feature. Create a new HTML file and add the following code:


<!DOCTYPE html>
<html>
<head>
  <title>Speech-to-Text</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Speech-to-Text</h1>
  <div id="output"></div>
  <button id="start-btn">Start Listening</button>
  <script src="script.js"></script>
</body>
</html>

In the above code, we have included a title for the webpage, a stylesheet link to a CSS file, and a script link to a JavaScript file. We have also added a heading, a div element to display the speech-to-text output, and a button to start the speech recognition process.

Step 2: Styling the Speech-to-Text Feature

Next, let’s style our speech-to-text feature using CSS. Create a new CSS file called “styles.css” and add the following code:


body {
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

#output {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 200px;
}

#start-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

#start-btn:hover {
  background-color: #0056b3;
}

In the above code, we have styled the heading, output div, and start button. Feel free to modify the styles to match your website’s design.

Step 3: Implementing Speech-to-Text Functionality

Now, let’s implement the speech-to-text functionality using JavaScript. Create a new JavaScript file called “script.js” and add the following code:


const startBtn = document.getElementById('start-btn');
const outputDiv = document.getElementById('output');

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;

let p = document.createElement('p');

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

  p.textContent = transcript;

  if (e.results[0].isFinal) {
    outputDiv.appendChild(p);
    p = document.createElement('p');
  }
});

startBtn.addEventListener('click', () => {
  recognition.start();
});

In the above code, we first select the start button and the output div using their respective IDs. We then create a new instance of the SpeechRecognition object and set the interimResults property to true. This allows us to display the speech-to-text output in real-time.

We also create a paragraph element to store the transcribed text. The ‘result’ event listener captures the speech input and appends it to the paragraph element. If the ‘isFinal’ property of the result is true, indicating that the user has finished speaking, we append the paragraph element to the output div and create a new paragraph element for the next speech input.

Finally, we add a click event listener to the start button that triggers the start method of the SpeechRecognition object, initiating the speech recognition process.

Step 4: Testing the Speech-to-Text Feature

Now that we have implemented the speech-to-text feature, let’s test it in a web browser. Open the HTML file in your preferred browser and click the “Start Listening” button. Allow the browser to access your microphone when prompted.

Start speaking, and you will see the transcribed text appearing in the output div in real-time. Once you finish speaking, the transcribed text will be displayed as a new paragraph in the output div.

Congratulations! You have successfully implemented a speech-to-text feature using HTML, CSS, and JavaScript. Feel free to customize the design and functionality to suit your specific needs.

Remember to optimize your website’s performance by minifying and compressing your HTML, CSS, and JavaScript files. You can also consider using a content delivery network (CDN) to improve the loading speed of your website.

Thank you for reading this tutorial. We hope you found it helpful in implementing speech-to-text functionality on your website. If you have any questions or feedback, please let us know!

Leave a Reply

Your email address will not be published. Required fields are marked *