Introduction: Why Add Audio to Our Cooking API?

Imagine you are cooking and your hands are covered in flour or oil. Instead of stopping to read the instructions, wouldn’t it be easier to listen to the next step? Adding audio features to your cooking assistant makes it more accessible and convenient. With Text-to-Speech (TTS) technology, your application can read recipe steps aloud, making the cooking process smoother and more enjoyable for everyone.

Recall: How We Add Endpoints

Before we add audio features, let’s review how to define new endpoints in our application. We organize our routes by connecting a URL path to a specific function called a view.

  • In urls.py, we define the path:
from django.urls import path
from . import views

urlpatterns = [
    path("hello", views.hello),
]
  • In views.py, we write the function that handles the request:
from django.http import HttpResponse

def hello(request):
    return HttpResponse("Hello, world!")

When a user visits /hello, the hello function runs and returns a message. Each route defines how your application responds to a specific request by linking a URL to a logic-handling function.

Getting to Know gTTS (Google Text-to-Speech)

gTTS (Google Text-to-Speech) is a tool that takes your text and generates audio using Google’s TTS engine. It requires an active internet connection because the text is sent to Google’s servers to produce the audio.

Let’s create a function that turns text into audio. We will use the gTTS tool to convert text to speech and an in-memory file to hold the audio data. Here’s how you can do it:

Step 1: Import the Required Tools

First, we need the right tools to handle the conversion and the data:

from io import BytesIO
from gtts import gTTS
  • gTTS is used to convert text into speech.
  • BytesIO allows us to work with audio data in memory, avoiding the need to save temporary files to the hard drive.
Step 2: Create the Function

Now, write a function that takes text and returns the audio data:

def generate_tts_audio(text: str):
    tts = gTTS(text)
    audio_io = BytesIO()
    tts.write_to_fp(audio_io)
    audio_io.seek(0)
    return audio_io

Here’s what each part does:

  • tts = gTTS(text): Creates a gTTS object with the text you want to convert.
  • audio_io = BytesIO(): Creates a stream in memory to hold the audio data.
  • tts.write_to_fp(audio_io): Writes the audio data into that memory stream.
  • audio_io.seek(0): Moves the "reading pointer" back to the start of the audio data so that it can be read from the beginning when sent.
  • return audio_io: Returns the in-memory audio file.
Building the /tts Endpoint

Now that we have a function to generate audio, let’s create a view function that uses it. This endpoint will allow users to send text via a query and receive an audio file in response.

In your views.py file, add the following code:

from django.http import StreamingHttpResponse, JsonResponse
from io import BytesIO
from .tts import generate_tts_audio

def tts(request):
    # Get the "text" parameter from the URL query string
    text = request.GET.get("text", "")
    
    if not text:
        return JsonResponse({"detail": "No text provided"}, status=400)

    audio = generate_tts_audio(text)

    # Check if the generated object is the expected memory stream
    if isinstance(audio, BytesIO):
        return StreamingHttpResponse(audio, content_type="audio/mpeg")

    return JsonResponse({"detail": "Unsupported audio object from TTS"}, status=500)

Let’s break down what happens here:

  • request.GET.get("text", ""): Retrieves the text parameter from the URL, such as /tts?text=Hello.
  • If no text is provided, we return a JsonResponse with a 400 error code.
  • If text is present, we call our generate_tts_audio function.
  • We return a StreamingHttpResponse, which is used for files or data streams (like audio) because it sends the data to the user efficiently. We set the content_type to audio/mpeg so that the browser recognizes it as an audio file.

To make this accessible, add it to your urls.py:

path("tts", views.tts),
Example Request and Output

If you visit:

/tts?text=Welcome%20to%20your%20smart%20cooking%20assistant

The browser will receive an audio stream and play the spoken words: "Welcome to your smart cooking assistant."

Summary and Practice Preview

In this lesson, you learned how to add Text-to-Speech (TTS) support to your API. You implemented a function to convert text into audio using the gTTS tool and created a /tts endpoint that streams audio files back to the user. This makes your application much more interactive and helpful in a kitchen environment.

Next, you will practice generating audio and working with the new endpoint. You will try out different texts and observe how the API responds with audio streams. This hands-on practice will help you become comfortable with adding multimedia features to your web applications.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal