Bubble.io - Text to Speech API Part 1

In this Bubble tutorial we demonstrate how to connect to the speechgen.io API using the Bubble API connector. In Part 2 we'll show you how to create a simple text to speech generator in Bubble using workflows.

Still stuck?

Join an expert Bubble coach on Zoom.
Learn more
Bubble coaching learn no-code

A big thank you to everyone who's been leaving comments and requests on our videos. We read every single one. This is in response to one of those comments, how do you do text to speech. So you're turning what a user types into your Bubble app into an MP3 file of generated speech. And I'm going to be showing you how to use the API for this service here, speechgen.io.

A quick word of advice. When you sign up, you get quite a generous selection of credits to test out their tool. However, you do need to top up your account with an actual payment of credits in order to get access to the API.

Understanding SpeechGen.io API

Once you've done that, you can start looking at the the API documentation. And so working with the Bubble API connector, you're basically trying to work out how to plumb the formatting that a service like this gives you in the API documentation into your Bubble app. And so I'm going to show you how I've done that with mine. So if I go into my Bubble app and then go into the API connector, I've added a new API, speechgen.io, and I add a new call.

Text to speech API call

So I could call this text to speech. I make it an action so that I can get it in my workflows. And then if I go back to the documentation, I can see that the endpoint is here. So I copy and paste that into the field there. And then the data needs to be not in JSON, which is the default, but in form data. And if we look at the fields here, the mandatory fields are token, email, voice, and text. So you can see here that I've got my token, I've blurbed it out. Email, text. I've also added format because I know that I want to get my response back as an MP3, and then I pick a voice from their catalogue of voices. And so once I've got all that in place, I can test it. So my text is... Let's change this so that it's new. Subscribe to planet no code now. And then if I initialize the call, I get this response back and they provide me with a URL. And so I'm going to copy the URL, open a new tab, open that URL. Subscribe to planet no code now. And then if I initialize the call, I get this response back, and they provide me with a URL.

And so I'm going to copy the URL, open a new tab, open that URL. Okay, I don't know how well that came across in my mic, but that has worked and it was very quick at generating it. So that's a quick overview of how to use the API Connector to integrate in with the service in order to get text to speech working. Come back for part two, which I'm going to record right away, right now, to show you how we can start putting this into the front end of our Bubble app.

 

camera-videouserscodelinkcrossmenu