Audio Note Taker

A browser-based voice notes prototype for turning recorded ideas into transcripts, summaries, tags, quotes, and action items.

This project is designed as a portfolio-friendly audio/AI product surface. It records audio in the browser, accepts uploaded audio files, transcribes audio through a local server endpoint, lets the user edit transcript text, and generates a lightweight local analysis.

Features

• Browser audio recording
• Live waveform display while recording
• Clickable waveform timeline for playback seeking
• Audio file upload
• Save audio notes before transcription
• Reopen saved audio notes for playback
• Local audio transcription with MacWhisper
• Optional OpenAI API transcription fallback
• Transcript input and editing
• Automatic summary generation
• Keyword tags
• Key quote extraction
• Action item detection
• Searchable saved notes
• Delete saved notes and their local audio
• Markdown export
• Browser-local persistence
• Dark neutral shell with light work panels and sage/gold accents

Screenshots

Add screenshots here after publishing the repository:

• Dashboard
• Recording state
• Saved note brief
• Mobile layout

Tech Stack

• React
• Vite
• Express
• MacWhisper CLI
• OpenAI API fallback
• JavaScript
• Web Audio / MediaRecorder API
• Local in-browser analysis
• CSS responsive layout

Why This Exists

This project explores the product shape of an AI voice-notes tool: fast capture, useful transcription, and a calm interface for turning messy spoken ideas into structured material.

In a production version, the local analysis layer would connect to an LLM for richer summaries, search, and workflow actions.

Run Locally

MacWhisper is the default transcription engine. If MacWhisper is installed in /Applications, no API credits are required.

Create a local environment file:

cp .env.example .env.local

The default settings are:

OPENAI_API_KEY=
ENABLE_OPENAI_FALLBACK=false
TRANSCRIPTION_MODEL=gpt-4o-mini-transcribe
MACWHISPER_CLI_PATH=/Applications/MacWhisper.app/Contents/MacOS/mw

The OpenAI key is optional and only used as a fallback if MacWhisper is unavailable and ENABLE_OPENAI_FALLBACK=true.

Double-click:

Launch Audio Note Taker.command

That starts the local app and opens it in Safari.

Or run it from Terminal:

npm install
npm run dev

Then open:

http://localhost:5177/

Important: do not open index.html directly in Safari. This app needs the local dev server.

How Transcription Works

1. Record audio or upload an audio file.
2. Click Transcribe audio.
3. The browser sends the audio to the local /api/transcribe endpoint.
4. The local server sends the audio to MacWhisper for local transcription.
5. The transcript appears in the editor so you can review and save the analyzed note.

If MacWhisper is unavailable, the server can fall back to the OpenAI API only when OPENAI_API_KEY is set and ENABLE_OPENAI_FALLBACK=true. Your API key stays on your machine in .env.local. It is not exposed in the browser.

Saved Audio Workflow

You can save an audio note before it has a transcript:

1. Record or upload audio.
2. Type a name in Interview name.
3. Click Save new note.
4. The note appears in the list on the left and the recorder clears for the next interview.
5. Open that note later from the list on the left.
6. Press play, click the waveform to jump around, or click Transcribe audio.
7. Review the transcript, then click Update selected note.

Saved audio files stay private in the browser's local storage on your machine. Deleting a note also deletes its saved audio attachment.

Rename Workflow

Renaming is separate from saving:

1. Open an interview from the list on the left.
2. Click its name in Interview name.
3. Type the new name.
4. Press Enter.

This updates the selected interview in place and does not create a duplicate note.

Safari Notes

Safari may ask for microphone permission the first time you record. Allow microphone access if you want browser recording or live dictation.

If recording is unavailable in a browser session, the app still works with uploaded audio files or pasted transcript text.

Roadmap

• Add LLM-generated summaries and titles
• Persist notes to a database
• Add authentication
• Add semantic search
• Add shareable/exportable briefs