Skip to main content

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

Screenshot
Body

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.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Text-To-Speech</title>
  8. <link rel="stylesheet" href="./css/bootstrap.min.css">
  9. <script src="./js/jquery-3.6.0.min.js"></script>
  10. <script src="./js/bootstrap.min.js"></script>
  11. <script src="./js/script.js"></script>
  12. <!-- Custom Css -->
  13. :root {
  14. --bs-success-rgb: 71, 222, 152 !important;
  15. }
  16.  
  17. html,
  18. body {
  19. height: 100%;
  20. width: 100%;
  21. font-family: Apple Chancery, cursive;
  22. }
  23.  
  24. mark {
  25. background-color: yellow;
  26. }
  27. </style>
  28. <!-- End of Custom Css -->
  29. </head>
  30.  
  31. <body class="bg-light">
  32. <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  33. <div class="container">
  34. <a class="navbar-brand" href="https://sourcecodester.com">
  35. Sourcecodester
  36. </a>
  37. </div>
  38. </nav>
  39. <div class="container py-3" id="page-container">
  40. <h3>Text-To-Speech</h3>
  41. <hr>
  42. <small>This simple project converts your text to speech.</small>
  43. <div class="content">
  44. <div class="row justify-content-center">
  45. <div class="col-md-6">
  46. <!-- Text Area Form -->
  47. <form action="" id="text-form">
  48. <div class="form-goup">
  49. <label for="message" class="control-label">Enter you Message to Convert</label>
  50. <textarea name="message" id="message" rows="10" class="form-control rounded-0"></textarea>
  51. </div>
  52. <button class="btn btn-primary py-2" id="submit">Speak</button>
  53. </center>
  54. </form>
  55. <!-- End of Text Area Form-->
  56. <!-- Display Container of the Text -->
  57. <div id="display" class="py-3">
  58.  
  59. </div>
  60. <!-- End Display Container of the Text -->
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </body>
  66.  
  67. </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.

  1. // setting Speech Synthesis
  2. let text_to_speech = new SpeechSynthesisUtterance();
  3. let synth = window.speechSynthesis;
  4. $(function() {
  5. // SpeechSynthesisUtterance Configuration
  6. text_to_speech.lang = 'en';
  7. text_to_speech.voice = synth.getVoices()[0];
  8.  
  9. // An Event that identifies the part of text has spoken
  10. text_to_speech.onboundary = function(e) {
  11. var message = $('#display').text()
  12. var b_text = String(message).substring(0, e.charIndex + e.charLength)
  13. var marked = $('<mark>')
  14. marked.text(b_text)
  15. $('#display').html('')
  16. $('#display').append(marked)
  17. $('#display').append(message.replace(b_text, ""))
  18. }
  19.  
  20. $('#text-form').submit(function(e) {
  21. e.preventDefault();
  22. // Set Text to be spoken
  23. text_to_speech.text = $('#message').val();
  24. $('#display').text($('#message').val())
  25. $('#message').val('')
  26. // Start to Speak the text
  27. synth.speak(text_to_speech)
  28. $('#display').animate({ scrollTop: 0 }, 'fast')
  29. })
  30. })
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:)

Add new comment