Bubble.io - Text to Speech API Part 2

Introduction to Text-to-Speech API in Bubble

Welcome to part two of a mini video series on how to use a text-to-speech API with your Bubble app. Meaning that you can provide some written text and you get back an MP3 file of the text being read out by an AI voice. In the last video I explained and took you through all of the steps for setting up your API call using the Bubble API connector. In this video I'm going to demonstrate how we can start plugging that into the front end.

Setting Up the User Interface

I've got a blank page setup here and I'm going to put in a multi-line input. And I'm going to have a button. The multi-line input is going to be where I enter in the text I wish to convert into speech. So I'll name the button "convert to speech". I then need a way of storing what is returned and playing it back. So I think I'm going to go with... let's just see if there is a suitable plugin for audio playback. I might just go with HTML5.

Implementing HTML5 Audio Player

I've looked up some documentation about how to embed a really simple audio player. I'm going to copy this into my Bubble app. So add HTML. Paste that in. And let's set up the workflow.

Setting Up the Workflow

I'm going to make this... input should not be empty. I'm then going to run my API call. This is where people get caught out. I need to make sure this is set to action and that I've initialised it successfully. You get a red warning down here if you haven't. And that means that I can go into my plugins and I can find my "speechgen text to speech". And I have a text field here. The reason I have a text field is because only text is unchecked from private. So that's the only field that I can edit in the flow.

Configuring the API Call

That's fine because I don't need to be able to edit my API key, my token or email or a format or so on. I might want to be able to change the voice. I could have a dropdown to choose different voices. But for now I'm going to stick with John and go into my workflow and connect this to my multi-line input.

Using Custom States for Temporary Data Storage

And then I can either save it or I could use a custom state. In fact I'm going to use a custom state to begin with. So I'll say "set state" and I'll create a state on my page. Custom states are really useful for temporarily storing data. It doesn't get saved to your database. It doesn't get stored. If the page is refreshed, the custom state is lost. So it's a really good way of quickly giving feedback.

Setting Up the Custom State

And so my custom state is going to be "mp3url". And it's going to be of type "text". And then I'm going to go to the "text-to-speech" is my page. There's my custom state and the result file. And so I can check that that's in the right format because I can go back to manually enter API response. And this is what I get back. And so the file field gives me back a URL, which is perfect.

Connecting the Audio Player

And so I set the state and then in my "mp3" player here, I... Oh, I don't know. Let's try this. Change that to "mp3". Get rid of that one. And then if I put my URL in there, where do I get my URL from? It's from my custom state. And let's test it.

Testing the Text-to-Speech Functionality

So I should... I can put it here. You should subscribe to our YouTube channel if you haven't already. And then I'm going to click "convert to speech". And you can see that the player has been updated here. So it has now found that URL. Saying it's three seconds long. Let's try it. You should subscribe to our YouTube channel if you haven't already. Perfect. You should subscribe to our YouTube channel if you haven't already. Yeah, you can't hear it too many times.

Storing Data in the Database

So what if I want to save this instead of making it a custom state? Well, let's get rid of custom state and let's create a new thing in our database. I'll call this "speech". And I'm going to have two fields here. I'm going to have one called "text input". And that's going to be my multi-line input. And then I'm going to have my file. And the file is going to be the URL of the file I get back.

Storing Files in Bubble's S3 Storage

Now, quick piece of advice here. This will work. At least it should work. However, it means that your file is not being stored in your Bubble app. It's dependent on the file continuing to be made available by the third party. In this case, "speechgen.io". And I've not read through all that documentation. I don't know how long they keep the files for. But you'll probably want to store it to Bubble. So let's find a way of doing that.

Implementing File Storage in Bubble

So I'm going to try a new thing here. I've not done this before. I do like to keep these videos kind of rough to show the learning process. So I'm going to say "use as" file. And then I'm going to say "saved to S3". I'll call this "test1". And so what that's doing is it's saying "Bubble, find the file at this location". And then save it back into S3. So that's your Bubble's app storage.

Displaying Stored Audio Files

And then in order to play it, I'm going to set... I'm just going to put this into a group. And I'm going to make the group of my data type "speech". And I'm going to do a search for "speech". This is just so I can quickly get my results. So "date" created. "sort" descending. So the most recent one comes first. And then I can say that the URL is current_groups_speech_file_url. And I think when it prints a file URL, I need to put in that part too. We'll test it.

Final Testing and Verification

Like I say, this is a little bit of a rough one. I'm working out as I go along. I'll put some text in as the initial content. Follow on Twitter also. Let's test it. So it's making the API call. When Bubble gets the result, it creates a new entry in the database. And that becomes the speech data type that is displayed in the group containing my HTML audio player here. Let's test it. Follow on Twitter also. Okay.

Verifying Data Storage in Bubble Database

And then let's go into the Bubble database and check that we've stored it all correctly. So it's "speech". And so you can see here that my file is stored in S3 AWS. So it's part of my... In fact, I should be able to see it in here. There we go. It's part of my Bubble app. It's not dependent on the third party service, keeping it in the long term. I've got a copy of it. And I store my text input also.

Conclusion and Further Resources

So there you go. In these two videos, that should cover the basics of how to add text to speech to Bubble app. If you've come here looking for speech to text, we've got some videos out on that very recently using OpenAI's Whisper API. So yeah, now on our channel, we've got text to speech and speech to text. If you have any requests, please leave them in the comments. If you're stuck in anything, check out our Bubble coaching on our website planetno-code.com.