Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Bubble with Speech to Text using AssemblyAI - Part 1

In this tutorial we demonstrate how to turn speech into text using the AssemblyAI API. AssemblyAI is a good alternative to OpenAI's Whisper API and doesn't share some of Whisper's limitations.

This Bubble tutorial video, I'm going to be demonstrating how to link in the AssemblyAI API with your Bubble app. This will give you full speech to text transcription, speech to text recognition, whatever you want to call it in your Bubble app for you to be able to offer to your app users. AssemblyAI is a very impressive service. You might have heard of the Whisper API from OpenAI that is also a speech to text service. But in my opinion, the AssemblyAI overcomes some of the difficulties you may have experienced using Whisper with Bubble, such as a file size limit or the API connector timing out when you send your request to OpenAI. AssemblyAI overcomes that because AssemblyAI makes use of webhooks. It takes slightly longer, it costs slightly more, but there are more features. And here is how you integrate it in with your Bubble app.

Adding AssemblyAI to the Bubble API Connector

So here is my demo app, and I go and I install the API connector. If I haven't already, I go add plug ins and installed it here. I then add a new API, and I'll call this Assembly. And I then head over to the documentation for AssemblyAI and I am looking to make a POST request. And my API key goes in the header as authorization. So I could say private key in header, authorization. And then my request goes to this URL. So I can say process or I just say transcribe audio file. I turn it into an action so that I can access it in a workflow. I then change this to get, pasting in the endpoint. What else do I need? I then add data. And so data is contained here. I copy and paste it across. This can go into my JSON object section here.

And similarly to the Whisper API, you basically have two ways of using it. I will be demonstrating with the AssemblyAI API how to basically point them in the direction of a publicly accessible audio file on the internet and generate a transcription from that file. You also have the option of uploading a local file. That may well be a better privacy option because then you've not got any files being publicly made available on the internet. So I'll just change this here to audio file URL. And then I need my API key, which I can get from signing into my AssemblyAI account, going developers and copying my key.

I will be refreshing this key at the end of this tutorial and pasting the... No, not in there. Pasting the key into here. There we go. Okay, now I just need to find an audio file to demo this with. I've previously uploaded an audio file to my Bubble storage, but remember, this can be anywhere that is publicly accessible on the internet. So I'm going to copy and get the link address, go back into my API Connector and paste in the address here.

Transcription ID

Right and then let's test it. So I initialize the call and I get back this response. And this is where AssemblyAI is different to Whisper, which is that I get back an ID and I don't actually get back the transcription because it's processing it. I happen to have uploaded a very small audio file, and so it should happen incredibly quickly, but I don't get the response back. I have to query the ID here.

So I'm going to hit save, and then I'm going to add a new call. And I'm going to call this get processed transcript and go back to their documentation and say here, getting the transcription result.

And so I have to make another call. And so this time it is a GET call to this URL. And at the end, I put the transcription ID and also turn this into an action. And my transcription ID, I could run the call again, but I'm just going to go edit manually because I know I can recall the last result here. Copy that and then paste it into here. I'm going to move that down because I first transcribed the audio file and then I get the transcription.

So now let's initialize the call. And here we go. Now I actually get the text, which is this is a test of the AssemblyAI API. And so I get that back.

That's the end of part one. In the next video, I'm going to demonstrate how you can incorporate webhooks so that your Bubble app knows when a transcription from AssemblyAI is ready, and it will go and retrieve it automatically once it has been notified.


Latest videos