I am a podcast addict. I admit it. From the moment I wake up, I have my headphones in my ears. But there are some times when it would be frowned upon to be listening to a podcast while in a room full of others. In some of those cases, it would be perfectly acceptable for me to look at my phone. So as a compromise, I could grab the transcript of my favorite podcast and read it while in those situations. I know I’m not the only one who’s dreamt of doing that.
From that desire to get away with podcast listening, I put together a basic Next.js and Deepgram web app that allows the user to submit a link to audio, which is then transcribed using Deepgram, and output in the browser. If you too want to get away with reading your podcast, check out the tutorial below.
Getting Started with Repl.it, Next, and Deepgram
Prerequisites
-
Understanding of JavaScript and React
-
Familiarity of hooks
-
Understanding of HTML and CSS
For this project, I worked with Repl.it, an instant IDE that runs in the browser. You can find the final project on my Next + DG Repl and this tutorial will explain how to utilize Repl to create your project.
Getting Started
To complete this project, you’ll need:
-
A Deepgram API Key – get it here
Getting Started with Next.js
Create a new Repl using the Next.js template. This will give you the basic Next file structure and provide access to the Next.js built-in features. If you’d like to learn more about Next.js, check out the Foundations section of their site. For this project, we’ll be working in the pages folder in the index.tsx file and within the api folder.
We’re going to keep it simple and add our new code to the existing template. You’ll notice that I’ve made some updates in my Repl to link to Deepgram’s documentation, blog, and community, but our code to transcribe the audio will go above that.
In the index.tsx file, we’ll need to create an input for the audio file link, add some useState hooks to handle the submission, transcription, and formatting, and we’ll need a transcribe function. In the api folder, we’ll need to add the server-side code to handle the request to Deepgram. Lastly, we need to utilize Repl’s Secrets feature to handle our Deepgram API key.
Let’s get started with the front-end code in
