DEV Community

Cover image for Create an AI Voice Generator App in 5 minutes with Encore ๐Ÿง โœจ
Marcus Kohlberg for Encore

Posted on

Create an AI Voice Generator App in 5 minutes with Encore ๐Ÿง โœจ

TL;DR

This guide shows you how to build a web app in Go that uses ElevenLabs generative voice AI to create lifelike speech from text. You can then deploy it to the cloud using Encore's free development cloud.

๐Ÿš€ What we're doing:

  • Install Encore & create an empty app
  • Download the ElevenLabs Encore package
  • Run the backend locally
  • Create a simple frontend
  • Deploy to the cloud

๐Ÿ’ฝ Install Encore

Install the Encore CLI to run your local environment:

  • macOS: brew install encoredev/tap/encore
  • Linux: curl -L https://encore.dev/install.sh | bash
  • Windows: iwr https://encore.dev/install.ps1 | iex

๐Ÿ›  Create your app

Create a new Encore application with this command and select the Empty app starter:

encore app create
Enter fullscreen mode Exit fullscreen mode

๐Ÿ’พ Download the ElevenLabs package

  1. Download the elevenlabs package from https://github.com/encoredev/examples/tree/main/bits/elevenlabs (link) and add it to the app directory you just created.
  2. Sync your project dependencies by running go mod tidy. (Note: This requires that you have Go 1.21, or later, installed.)

Get your ElevenLabs API Key

You'll need an API key from ElevenLabs to use this package. You can get one by signing up for a free account at https://elevenlabs.io.

Once you have the API key, save it as a secret using Encore's secret manager with the name ElevenLabsAPIKey, by running:

encore secret set --type dev,prod,local,pr ElevenLabsAPIKey
Enter fullscreen mode Exit fullscreen mode

๐Ÿ Run your app locally

Start your application locally by running:

encore run
Enter fullscreen mode Exit fullscreen mode

You can now open Encore's local development dashboard at http://localhost:9400 to see your app's API documentation, call the API using the API explorer and view traces, and more.

Encore local dev dash

๐Ÿง Try out the API

Now let's play around a bit with our shiny new API!

From the API Explorer in the local development dashboard, try calling the elevenlabs.DownloadAudio endpoint with the text input of your choice in the request body.

API Explorer

This will use the API to generate an MP3 audio file and download it to your app root folder: speech.mp3.

API Endpoints

Now that we know it works, let's review the API endpoints in the elevenlabs package.

  • elevenlabs.ServeAudio: ServeAudio generates audio from text and serves it as mpeg to the client.
  • elevenlabs.StreamAudio: StreamAudio generates audio from text and streams it as mpeg to the client.
  • elevenlabs.DownloadAudio: DownloadAudio generates audio from text and saves the audio file as mp3 to disk.

๐Ÿ–ผ Create a simple frontend

Now let's make our app more user-friendly by adding a simple frontend.

  • Create a subfolder in your app root called frontend.
  • Inside /frontend, create frontend.go and paste the following code into it:
package frontend

import (
    "embed"
    "net/http"
)

var (
    //go:embed index.html
    dist embed.FS

    handler = http.StripPrefix("/frontend/", http.FileServer(http.FS(dist)))
)

// Serve serves the frontend for development.
// For production use we recommend deploying the frontend
// using Vercel, Netlify, or similar.
//
//encore:api public raw path=/frontend/*path
func Serve(w http.ResponseWriter, req *http.Request) {
    handler.ServeHTTP(w, req)
}
Enter fullscreen mode Exit fullscreen mode
  • Inside /frontend, create index.html and paste the following code into it:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AI Speech Generator</title>
  <style>
    textarea {
      font-size: 18px;
    }

    button {
      display: block;
      border: 1px solid black;
      background: transparent;
      font-size: 20px;
      border-radius: 3px;
      margin-top: 10px;
      padding: 5px 10px;
    }
  </style>
</head>
<body>
<h1>Encore + ElevenLabs AI Speech Generator</h1>

<textarea id="text-to-speech" cols="40" rows="5">Hello dear, this is your computer speaking.</textarea>

<button id="speak-button">Say it!</button>

<script>
  const onSpeak = () => {
    const text = document.getElementById('text-to-speech').value;

    fetch('/speech/serve', {
      method: 'POST',
      body: JSON.stringify({text})
    })
    .then(res => res.blob())
    .then(data => {
      const url = window.URL.createObjectURL(data);
      const audio = new Audio();
      audio.src = url;
      audio.play();
    })
  }

  const button = document.getElementById('speak-button');
  button.addEventListener('click', onSpeak);
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You should see this:

Local Running App

โ€” Congratulations, you now have a working AI Voice Generator! ๐ŸŽ‰

๐Ÿš€ Deploy to the cloud

Deploy your app to a free cloud environment in Encore's development cloud by running:

git add -A .
git commit -m 'Initial commit'
git push encore
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Then head over to the Cloud Dashboard to monitor your deployment and find your production URL by going the overview page for the environment you just created. It will be something like: https://staging-[APP-ID].encr.app.

Environment overview

Once you have your root API address and the deploy is complete, open your app in your browser: https://staging-[APP-ID].encr.app/frontend.

๐ŸŽ‰ Great job - you're done!

Great job! You now have an AI-powered app running in the cloud.

Keep building with Encore using these Open Source App Templates. ๐Ÿ‘ˆ

If you have questions or want to share your work, join the developer hangout in Encore's community Slack. ๐Ÿ‘ˆ

Learn More

Top comments (2)

Collapse
 
ed_harrod profile image
Ed Harrod

Nice article Marcus, thanks for sharing! Few of the image links are broken now, but they weren't that important ๐Ÿ˜ƒ

I came here after reading the docs around defining a "func Serve", and it references the Uptime monitoring tutorial, but I can't find this function declared anywhere in the tutorial, or git repo, just wanted to flag ๐Ÿ‘

Collapse
 
marcuskohlberg profile image
Marcus Kohlberg • Edited

Thanks for the report Ed, will take a look!

I did however find the func Serve reference in the Uptime Monitor example for Encore.go, it is in the frontend.go file:
github.com/encoredev/examples/blob...

We could make this reference a lot clearer in the frontend integration docs though!