Guide to Integrate OpenAI Whisper with Bubble Apps
Learn how to use Bubble's audio recorder with OpenAI Whisper API for transcript generation and save them into your Bubble app efficiently.
File
Record audio convert to text using OpenAI Whisper API Bubble.io Tutorials Planetnocode.com
Added on 01/29/2025
Speakers
add Add new speaker

Speaker 1: Thank you to everyone who left a comment on our last OpenAI Whisper API video and the recurring theme in the comment section was can you show how to record audio in Bubble and then send it over to the OpenAI Whisper API and get an AI generated transcript back and save that into your Bubble app. That is exactly what this app that I'm going to show you does. So let's dive right into the page. We're using Bubble's own audio recorder and visualizer. There are other ones available in the plugin store to record audio but this one's just free. I would have a point out that this saves the audio as a WAV format which might mean that you end up generating slightly larger audio files than something that a audio recorder that saves it as mp3. But anyway it works fine for this demonstration. So I've got the audio recorder elements on the page and I've got two buttons below it. If we go into my start stop workflow we'll see that there is an action of start stop audio recorder A. I then need a second action. I've got a save button and this is an action that the plugin gives you. Upload content of audio recorder. This is referring to saving what has been recorded to your Bubble storage which is part of AWS S3. Anyway it means basically it's part of your app's storage. I then want to be able to retrieve that at some point so I have a data type called audio recording. I have a file field of type file and I insert into that the results of step one. So that is my way of saving the file but this saves into my Bubble app and then this saves me with a way for my database to be able to retrieve that file. I then have below a repeating group that shows all of the data type entries for audio recording. I print the audio recordings file URL. If I hop back to it here you can see this is where the file is actually hosted but do notice that it doesn't start with https colon. We're going to need to add that in and then lastly I've got a button here where I run a workflow that I've labeled get transcript and then I save the results of the open AI whisper API response as text into my data, my audio recording as listed in the repeating group. If you want help of how to get to this point here do check out our previous video. I'll put a link in the comment section and that will show you everything you need to do in order to get this into the Bubble API connector but anyway the end result of that is that you can end up with a workflow action where you put a dynamic link for the file. Notice that I've got https colon then the audio recordings files URL. Believe me I've just spent 15-20 minutes making sure that I get all the right formats in place. Effectively for open AI whisper you need to provide them with a publicly accessible audio file or video file in one of these formats here and so that's what we're doing with this app. We take a recording, we save it, we create a database entry as well and then I've added the button here to generate the transcript. So let's give it a test. So if I click start I can say I am testing the open AI whisper API and I can click stop. I can click save and Bubble is now saving it and it does take us a little bit of time on this. I did notice and I think it's this last one here because in fact let me so I can be absolutely sure I'm going to say order sought by date created descending and that way I know it will be my top one. Okay now I click generate transcript and this is the call to whisper API. There we go. So if I click start I can say I'm testing the open AI whisper API. I think that's basically perfect to what I said. So quick recap the ways that you're well I'm making the assumption there the ways that I made a mistake setting this up in order to the demonstrator team are getting the file formatted correctly in here. So this is because it's a file type field in Bubble so I can say file URL. In fact let me show you the data structure there. So I just have my audio recording file of type file and then transcript of type text and then I save the response. So of the response from open AI whisper I get two choices and so I choose text. Then where else oh also I initially tried to set this up all in one workflow. So basically I would click start then stop then save it to my database then send it straight off then send it straight off to whisper the whisper API. But I found that I kept getting an error back saying that the file that I was providing to whisper wasn't acceptable wasn't in the right format. So that's why I broke out into this repeating group table and if I was to go on a hunch I would say that sometimes my workflow was submitting the file to whisper before the file was actually properly accessible. We're talking about fractions of a second here but I think that bubble might have been passing on the file URL just a little bit before whisper could actually access it and that was what was causing the error in whisper. So by breaking it up into a save command and then a separate generate transcript command I was able to work around that and get my transcripts back. If you have any questions about this process or anything to do with open AI or bubble please do leave a comment below. If you're really stuck we provide bubble coaching do go to our website to find out more details about that.

ai AI Insights
Summary

Generate a brief summary highlighting the main points of the transcript.

Generate
Title

Generate a concise and relevant title for the transcript based on the main themes and content discussed.

Generate
Keywords

Identify and highlight the key words or phrases most relevant to the content of the transcript.

Generate
Enter your query
Sentiments

Analyze the emotional tone of the transcript to determine whether the sentiment is positive, negative, or neutral.

Generate
Quizzes

Create interactive quizzes based on the content of the transcript to test comprehension or engage users.

Generate
{{ secondsToHumanTime(time) }}
Back
Forward
{{ Math.round(speed * 100) / 100 }}x
{{ secondsToHumanTime(duration) }}
close
New speaker
Add speaker
close
Edit speaker
Save changes
close
Share Transcript