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.
So in the last video, I explained and took you through all of the steps for setting up your API call. And i'm using the Bubble API connector. And in this video, I'm going to demonstrate how we can start plugging that into the front end.
Building a front end form
So I've got a blank page set up here, and I'm going to put in a multi line input. And I'm going to have a button. And so 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.
HTML5 Audio play in Bubble
So I think I'm going to go with... Let's just see if there is a suitable plug in for audio playback. I might just go with HTML 5. So 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. So I'm going to make this input should not be empty. I'm then going to run my API call. So this is where people get caught out. I need to make sure this is set action and that I've initialized 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 speech Gen 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. That's fine because I don't need to be able to edit my API key, my token or email or the format, so on. I might want to be able to change the voice. I could have a drop down to choose different voices. But for now, I'm going to stick with John and go into my workflow and connect this to my multiline input. And then I can either save it or I could use a custom state.
Custom States explained
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.
Working with file URLs
And so my custom state is going to be mp3 URL, and it's going to be of type text. And then I'm going to go to the text of 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 a PR response, and this is what I get back. And so the file field gives me back a URL, which is perfect. And so I'll set the state. And then in my MP3 player here, 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.
So I can put in 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. It's saying it's three seconds long. Let's try it. You should subscribe to our YouTube channel if you haven't already. Perfect. Yeah, you can't hear it too many times.
So what if I want to save this instead of making it a custom state. Well, let's get rid of the 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.
How to save a file to Bubble 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 their documentation. I don't know how long they keep the files for, but you'll probably want to store it to Bubble. And so let's find a way of doing that. So I'm going to try a new thing here. I've not done this before. I do like to keep these videos 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 test 1. 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. And then in order to play it, 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 'https:'.
Testing text to speech with Bubble
We'll test it. Like I say, this is a little bit of a rough one. I'm working it 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, awesome. Okay, and then let's go into the Bubble database and check that we've stored it all correctly. So 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.
So there you go. In these two videos, that should cover the basics of how to add text to speech to your 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.