Build a Text to Speech Service with Python Flask Framework
Tags: python, webdev, html, computerscience
Published: 2020-09-26 17:15:23


Text-to-speech technology reads aloud digital text. It can take words on computers, smartphones, tablets etc and convert them into audio. Python comes with a lot of handy and easily accessible libraries and I am going to show you how we can deliver text-to-speech with Python using [pyttsx3](!https://pypi.org/project/pyttsx3/). pyttsx3 is a text-to-speech conversion library in Python. Unlike alternative libraries, it works offline, and is compatible with both Python 2 and 3. It is easy to use the library which converts the text entered, into an audio. 

*Checkout the video*
{% youtube BPaaxeon-n0%}


### Steps:
- Application invokes the pyttsx3.init() factory function to get a reference to a pyttsx3.Engine instance.
- getProperty('rate') method helps you to set the current speaking rate.
- Similarly, getProperty('volume') helps you to set the volume 
 (min=0 and max=1)
- voice is string identifier of the active voice.
- runAndWait() blocks while processing all currently queued commands. Invokes callbacks for engine notifications appropriately. Returns when all commands queued before this call are emptied from the queue.
## Code for converting Text to Speech
```Javascript
import pyttsx3


def text_to_speech(text, gender):
    """
    Function to convert text to speech
    :param text: text
    :param gender: gender
    :return: None
    """
    voice_dict = {'Male': 0, 'Female': 1}
    code = voice_dict[gender]

    engine = pyttsx3.init()

    # Setting up voice rate
    engine.setProperty('rate', 125)

    # Setting up volume level  between 0 and 1
    engine.setProperty('volume', 0.8)

    # Change voices: 0 for male and 1 for female
    voices = engine.getProperty('voices')
    engine.setProperty('voice', voices[code].id)

    engine.say(text)
    engine.runAndWait()

```
1. Create a text that you want to convert into audio.
2. Select voice assistant.
```Javascript
text = 'Hello ! My name is Siddhesh.'
gender = 'Male'  # Voice assistant 
text_to_speech(text, gender)
```

## Building a Web Service
This is a basic flask application with the default route. We also need to import specific flask libraries and a few other libraries as shown below:
```Javascript
# Importing the necessary Libraries
from flask_cors import cross_origin
from flask import Flask, render_template, request
from main import text_to_speech

app = Flask(__name__)


@app.route('/', methods=['POST', 'GET'])
@cross_origin()
def homepage():
    if request.method == 'POST':
        text = request.form['speech']
        gender = request.form['voices']
        text_to_speech(text, gender)
        return render_template('frontend.html')
    else:
        return render_template('frontend.html')


if __name__ == "__main__":
    app.run(port=8000, debug=True)
```

## HTML Template Code
```Javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Browser voices</title>
    <style type="text/css">
					    	* {
					  box-sizing: border-box;
					}
					html,
					body {
					  min-height: 100vh;
					  margin: 0;
					  padding: 0;
					}
					body {
					  font-family: Helvetica, Arial, sans-serif;
					  color: #0d122b;
					  display: flex;
					  flex-direction: column;
					  padding-left: 1em;
					  padding-right: 1em;
					}
					h1 {
					  text-align: center;
					  font-weight: 100;
					}
					header {
					  border-bottom: 1px solid #0d122b;
					  margin-bottom: 2em;
					}
					main {
					  flex-grow: 2;
					  display: flex;
					  justify-content: space-around;
					  align-items: center;
					  background-color: #fff;
					  border-radius: 12px;
					  margin-bottom: 2em;
					}
					@keyframes bg-pulse {
					  0% {
					    background-color: #fff;
					  }

					  50% {
					    background-color: #c7ecee;
					  }

					  100% {
					    backgrouond-color: #fff;
					  }
					}
					main.speaking {
					  animation: bg-pulse 1.5s alternate ease-in-out infinite;
					}
					.input {
					  text-align: center;
					  width: 100%;
					}
					label {
					  display: block;
					  font-size: 18px;
					  margin-bottom: 1em;
					}
					.field {
					  margin-bottom: 2em;
					}
					input {
					  font-size: 24px;
					  padding: 0.5em;
					  border: 1px solid rgba(13, 18, 43, 0.25);
					  border-radius: 6px;
					  width: 75%;
					  display: inline-block;
					  transition: border-color 0.25s;
					  text-align: center;
					}
					input:focus,
					select:focus {
					  border-color: rgba(13, 18, 43, 1);
					}
					select {
					  width: 75%;
					  font-size: 24px;
					  padding: 0.5em;
					  border: 1px solid rgba(13, 18, 43, 0.25);
					  border-radius: 6px;
					  transition: border-color 0.25s;
					}
					button {
					  font-size: 18px;
					  font-weight: 200;
					  padding: 1em;
					  width: 200px;
					  background: transparent;
					  border: 4px solid #f22f46;
					  border-radius: 4px;
					  transition: all 0.4s ease 0s;
					  cursor: pointer;
					  color: #f22f46;
					  margin-bottom: 2em;
					}
					button:hover,
					button:focus {
					  background: #f22f46;
					  color: #fff;
					}

					a {
					  color: #0d122b;
					}
					.error {
					  color: #f22f46;
					  text-align: center;
					}
					footer {
					  border-top: 1px solid #0d122b;
					  text-align: center;
					}
    </style>
  </head>
      <body>

          <header>
              <h1>Text to Speech</h1>
          </header>

        <main>
          <form class="input" id="voice-form" method="post">
                <div class="field">
                    <label for="speech">Type Something</label>
                    <input type="text" name="speech" id="speech" required />
                </div>
                <div class="field">
                    <label for="voices">Choose a Voice Assistant</label>
                      <select name="voices" id="voices">
                          <option value="Male">Male</option>
                          <option value="Female">Female</option>
                      </select>
                </div>
              <button>
                    Say it!
              </button>
          </form>
        </main>

        <footer>
            <p>
                Built by <a href=<BLOG LINK>><YOUR NAME></a>
            </p>
        </footer>

      </body>
</html>
```
There are several APIs available to convert text to speech in python. [gTTS](!https://pypi.org/project/gTTS/) can also be used for doing the same task. It is python library and CLI tool to interface with Google translate's text-to-speech API.

I hope you found this post useful. This will help end-users to build a web application using flask and convert text to speech.

Octocat will take you to my GitHub repository...
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9vq4d02xo1f1m7jwi8gh.png)](https://github.com/siddheshshankar/text-to-speech-api)