Integrating Text-to-Speech in Bubble.io
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.
Getting Started with 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. But once you've done that you can start looking at the API documentation.
Setting Up the API Connector in Bubble
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. So I could call this text to speech. I make it an action so that I can get in my workflows.
Configuring the API Call
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 in 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 blurred 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 catalog of voices.
Testing the API Call
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. Okay I don't know how well that came across my mic but that has worked and it was very quick at generating it.
Conclusion and Next Steps
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.