VocalScribe: Real-Time Audio Transcription Web App
ANIRUDDHA ADAK
VocalScribe - Where Your Voice Becomes Words
VocalScribe is a modern web application that provides real-time audio transcription with a beautiful and interactive user interface. Built with React, TypeScript, and Tailwind CSS, it offers a seamless experience for converting speech to text. Whether you want to upload an .mp3 file or speak directly into the app, VocalScribe makes transcribing your words easy and engaging.
Features
🎙️ Real-time Audio Recording and Transcription: Speak directly into the app to instantly get transcriptions.
📁 Audio File Upload: Upload an .mp3 file to generate accurate transcriptions.
🖋️ Editable Transcriptions: Edit, delete, and like transcriptions.
📋 Copy and Download: Easily copy the transcript or download it as a text file.
💬 Interactive Comments: Leave comments, reply to others, like comments, and edit or delete them.
❤️ Like and Comment on Transcripts: Engage with the generated transcriptions through likes and comments.
🌈 Dark/Light Mode: Switch between dark and light themes to suit your preferences.
🌟 Animated Backgrounds and Transitions: Smooth animations that enhance the user experience.
📱 Full Responsive Design: Optimized for all devices for a seamless experience.
📤 Share on Social Media: Share your transcriptions directly on Facebook, Twitter, or LinkedIn.
Tech Stack
Frontend:
React 18
TypeScript
Tailwind CSS
Shadcn/UI components
React Router DOM
Backend:
AssemblyAI API for transcription
Other Tools:
Tanstack Query for data fetching
Smooth animations for UI transitions
Getting Started
Prerequisites
Node.js 16.x or higher
npm or yarn package manager
Installation
Clone the repository:
Install dependencies:
Create a
.env file in the root directory and add your AssemblyAI API key:Start the development server:
Open http://localhost:5173 in your browser.
Usage
Upload Audio File: Click the "Upload" button or drag and drop an audio file to start transcription.
Speak to Transcribe: Use the microphone button to speak and get real-time transcription.
View Transcription: The generated transcription will appear with timestamps.
Interact with Transcriptions: Like, comment, edit, or delete transcriptions.
Dark/Light Mode: Toggle between light and dark themes to suit your needs.
Social Media Sharing: Share your transcription on Facebook, Twitter, or LinkedIn.
Download or Copy: Download or copy the transcript to use elsewhere.
Project Structure
Contributing
Fork the repository.
Create your feature branch (
git checkout -b feature/AmazingFeature).Commit your changes (
git commit -m 'Add some AmazingFeature').Push to the branch (
git push origin feature/AmazingFeature).Open a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
AssemblyAI for providing the transcription API.
Shadcn/UI for the beautiful component library.
Tailwind CSS for the utility-first CSS framework.
Contact
Aniruddha Adak
📧 aniruddhaadak80@gmail.com
📱 +917029155691
Project Link: https://github.com/AniruddhaAdak/vocalscribe
Like this project
Posted Apr 30, 2025
Developed VocalScribe, a web app for real-time audio transcription using React, TypeScript, and Tailwind CSS.
