Effortlessly Convert Audio to Text with OpenAI Whisper API

Table of Contents

1. Introduction
2. Recording Audio in Bubble
3. Saving the Audio Recording
4. Retrieving the Audio Recording
5. Displaying the Audio Recordings
6. Generating Transcripts with Open AI Whisper API
7. Setting up the Whisper API Connection
8. Formatting the File Correctly
9. Troubleshooting File Accessibility Issues
10. Conclusion

Recording Audio in Bubble

One of the recurring themes in the comment section of our Open AI Whisper API video was the request to demonstrate how to record audio in Bubble and send it to the API for generating an AI-generated transcript. In this article, we will explore how to accomplish this task using Bubble's audio recording and visualizer elements.

To record audio in Bubble, we can utilize Bubble's own Audio Recorder and Visualizer. Although there are other audio recording plugins available in the plugin store, we will focus on the built-in audio recorder for this demonstration. It is important to note that the audio recorded by Bubble is saved in WAV format, which may result in slightly larger file sizes compared to formats like MP3. However, this format is perfectly suitable for our purpose.

Once we have added the audio recorder elements to our page, we can proceed with configuring the workflow actions. The first action we need to add is to start and stop the audio recorder. Bubble provides a pre-built action for this purpose, which can be easily integrated into our workflow.

Saving the Audio Recording

After recording the audio, we need to save it to our Bubble app's storage. Bubble offers a plugin that allows us to upload the content of the audio recorder directly to AWS S3, which serves as the storage for our app. By utilizing this plugin, we can save the recorded audio as a file in our database for future retrieval.

To achieve this, we create a data type called "audio recording" and define a file field of type File. In our workflow, we add an action to upload the content of the audio recorder to our Bubble storage. This action automatically saves the recorded audio as a file in our app's database.

Retrieving the Audio Recording

To retrieve the saved audio recording, we can use a repeating group element that displays all the entries from the "audio recording" data type. By configuring the repeating group to show the file URL of each audio recording entry, we can provide a visual representation of the recorded files. However, it is important to note that the URL displayed may not start with "https:", so we need to add that prefix manually for proper accessibility.

By adding the necessary actions to our workflow, we can enable the retrieval of the audio recordings from our database and display them in the repeating group.

Displaying the Audio Recordings

The displaying of the audio recordings is an essential part of our app's functionality. By utilizing the repeating group element and printing the audio recordings' file URLs, we can provide a user-friendly interface for accessing the recorded files. Additionally, we can add a button that triggers a workflow for generating transcripts using the Open AI Whisper API.

Generating Transcripts with Open AI Whisper API

To generate transcripts for the audio recordings, we integrate the Open AI Whisper API into our Bubble app. Before proceeding with this step, it is recommended to refer to our previous video tutorial or documentation on how to set up the API connector for Bubble.

Once the API connection is established, we can configure a workflow action labeled "get transcript." This action triggers the request to the Whisper API, passing the audio recording selected in the repeating group as input. The response from the API, which includes the generated transcript, can be saved in the corresponding "audio recording" entry's text field.

By implementing this workflow action, we enable the generation of AI-generated transcripts for the recorded audio files in our app.

Setting up the Whisper API Connection

Configuring the API connection for Whisper is crucial for the successful integration of the AI-generated transcript feature. It is recommended to follow the specific instructions provided by the Open AI Whisper API documentation or seek assistance from our Bubble coaching services if needed.

By establishing the API connection, we can ensure that the necessary requests are made to the Whisper API for generating accurate transcripts.

Formatting the File Correctly

Proper formatting of the file is essential for successfully interacting with the Whisper API. The file field in Bubble's data structure requires the File URL to be provided for effective communication with the API.

To ensure the correct formatting, it is advisable to check the data structure of the audio recording entry and verify that the File field is correctly linked to the URL of the recorded audio file.

Troubleshooting File Accessibility Issues

During the setup process, it is not uncommon to encounter issues related to file accessibility. If you receive an error stating that the provided file is not accessible or in the correct format, there are a few troubleshooting steps you can follow.

One common issue is the timing of submitting the file to the Whisper API. It is crucial to ensure that the file URL is accessible before initiating the request. To overcome this issue, consider breaking the workflow into separate actions: saving the file to the database first, and then triggering the API request for transcript generation. This approach allows sufficient time for the file to become accessible before being used by the API.

Conclusion

In this article, we have explored the process of recording audio in Bubble, saving the recordings, retrieving and displaying them, and generating transcripts using the Open AI Whisper API. By following the step-by-step instructions and understanding the potential issues that may arise, you can successfully implement these features in your Bubble app. For any further assistance or questions, please leave a comment below or explore our Bubble coaching services.