How to add OpenAI Text to Speech to your Bubble app

Introduction to OpenAI's Text-to-Speech Feature

I'm having such a fun time using the new features added to the OpenAI API. It's November 7th, this was all added yesterday, and in this Bubble's tutorial video I'm going to demonstrate to you how we can add text to speech. And honestly this is some of the best text to speech that I've heard. I was saying to my family last week in fact that we've now got AI text generation that is often better than 9 out of 10 people in the room and the ability to write well English well and that we've got image APIs that are now getting so close to being able to provide photorealistic images that came from nothing wrong, came from the model. But what we are missing is the ability to speak to one another or AI to speak to us in a way that is convincingly human and I think that OpenAI have got really close with this one.

Introduction to Planet No Code and Bubble

But before I launch into it, we are Plant No Code and we are a Bubble education resource. If you want to build a SaaS online, if you want to launch a business online and you are not a coder then look no further because we've got hundreds of videos using this platform here it's called Bubble. It allows you to build software without using any code or maybe just a little bit of code but when you need code I'm here to explain it and this is what this does.

Demonstrating the Text-to-Speech Feature

So I will click speak and it submits the text. Quick Brown Fox jumps over the lazy dog. And hopefully that came through but you see I've got an embedded audio player here. Now let me show you exactly what's going on. We're using this guide here from OpenAI and so I'm in their documentation, I'm in their text to speech section and we basically need to take this and plug it into our Bubble app.

Setting Up OpenAI API in Bubble

So let me show you how I've done that. If I go into plugins, I've got my OpenAI API setup here and this is all in the Bubble API connector plugin. Now there are loads of plugins available to Bubble but often if they're integrating with a third party service they're not actually adding anything to it that you can't do yourself by looking at that third party, in this case OpenAI, looking at the API documentation and building it up yourself.

Configuring the API Call

So we've got the label, I've given it OpenAI. We need to authenticate the call and we authenticate it with the private key in the header using the label authorization with the word bearer preceding our API key. How do I know that? Well I go back into the documentation and I see that in the header of the call I have authorization bearer API key. I also need content type application JSON and my endpoint here V1 audio speech.

Setting Up the API Action in Bubble

So you will see that in my Bubble app I've got my endpoint, I've got it set as an action because I want to be able to trigger this in a workflow. I'm going to show you that in a moment. I say that the returning data is a file because OpenAI just responds with an MP3 file, ready to play the audio and then in the body section here I look to the documentation and all I did was copy everything here not including the outside quote marks but everything within the curly brackets.

Choosing the Voice for Text-to-Speech

And I also changed the voice because having listened to all of these yesterday I think the best one is Onyx but leave a comment below if you think that a different one of the voices is more convincing. I'd love to see and read your thoughts there.

Implementing the API Call in Bubble

And then I've just added in using the triangle brackets basically a merge tag or a variable or a dynamic value and I've got my text in here and then I clicked initialize and that told me I didn't have any issues or errors and that then means that OpenAI text to speech becomes an action that I can add into my workflow.

Setting Up the User Interface

So I've got my text box here and I've got my button and I will go in there and I would have gone in and I will go plugins and I'll go text to speech and add it in and it would look just like this. I then say here is the text that I'm sending over and remember it replies back with a file and I knew that would happen because the output is just an mp3 file and so I have to do something with that in order for Bubble to be able to work with it and I'm just using a custom state.

Understanding Custom States in Bubble

Now custom states are a way of temporarily storing data. Yeah, it's a temporary storing data. What I was thinking about is surely the file is saved somewhere but what I mean by temporary storing data is that I'm not saving the file to my database or I'm not saving a value to my database. Ah, but I am actually saving the file to the database. Okay, that's a little bit confusing but basically it means that I'm not creating an entry. There we go, an entry in my database for the file but I am actually, I have to have some sort of storage because I need to be able to refer to it and so you can see here that it is saving them to my Bubble app storage.

Retrieving and Playing the Audio File

But I need a way of retrieving that so I need to be able to know the location of the saved file and that's why I've got a custom state and so I've got a custom state on the page of type file and I've labeled it file and my page is called TTS for text to speech and so I say set state of element TTS, custom state label is file and then it's just the result of my first call. Now how do I get it to auto play and how have I got this audio player here? Well it's just HTML5 audio player and so I've got my audio element here and I say show the controls and also auto play. And that just means that as soon as I put a file in there it's going to play it and then the source is my custom state URL and then I just copied this I think from a website that gave me the code and so there's that little disclaimer in there about the browser not supporting the current audio element that that would only really nowadays apply to very old browsers.

Testing the Text-to-Speech Feature

Right, let's give it another test. So if I refresh the page you'll see that there is not a file there is nothing to play but if I say speak the quick brown fox jumps over the lazy dog. There we go and let's take something a little bit more, a bit more of a weighty piece of text and let's try that instead. Ah no I reckon I'll get syntax error here. Well to be or not to be that is the question. Whether it is nobler in the mind to suffer the slings and arrows of outrageous fortune. Okay I was wondering if I'd get a JSON syntax error because of the use of the colon here and where I needed to make it JSON safe but it seems like it actually worked just fine.

Conclusion and Final Thoughts

So there you go that is how we can use text to speak text to speech in the Bubble app and I think that the OpenAI's text to speech is the best in the business. It literally only came out yesterday if there are any other text to speech models that you think are better please leave a comment down below. If you've got any questions leave a comment down below because we read every single one and they inspire us to make even better videos in the future.