I had a great time exploring AssemblyAI and thought it would be cool to create a user interface for it using Retool that lets you easily transcribe audio files. Here's what I came up with in version 0.1.

Just upload the file, or if you prefer, record audio in real-time, and let AssemblyAI's API handle the transcription process. It's pretty straightforward!

Once the transcription is finished, you can browse through all your transcriptions. You'll find the text version right there, alongside the original recorded audio.

The onboarding experience provided by AssemblyAI was one of the best I've encountered for a developer API product. They made it super user-friendly and hassle-free.

User Stories

  1. I should be able to upload an audio file, and send it for transcription.
  2. I should be able to record audio and send it for transcription.
  3. I should be able to view all my transriptions in a table format.
  4. I should be able to play the audio for my transcriptions.

Let's begin

Transcribing a file using AssemblyAI is basically a two-step process - upload the file (/upload), and then transcribe the file using the audio_url returned by the /upload POST request (/transcript).

Step 0: Set up the resource for AssemblyAI in Retool

This is a one-time step in Retool.

Step 1: Upload audio to AssemblyAI

The first step is to upload the file to AssemblyAI using the POST /upload endpoint. In Retool, you can configure this by following these steps:

The tricky part here is passing the file data correctly. In the resource configuration for the endpoint, make sure to set the Body to binary, and pass the contents of the file as a binary string. If you're using the file uploader component or the microphone component in Retool, it automatically handles the conversion to binary for you.

Here's what that configuration looks like in Retool:

Step 2: Transcribe Audio

Once the file is uploaded, it's time to transcribe it using AssemblyAI's /transcript endpoint, and passing the audio_urlreturned by the /upload request in Step 1.

Here's what this config looks like in Retool:

Step 3: Get Transcription

Hit the /transcript endpoint, along with the ID of the transription.

Step 4: To get the list of all transcriptions

Hit the /transcript endpoint, and pass limit and status as query parameters. Here's what this config looks like in Retool:

Tagged in:

API Retool AssemblyAI Transcription