Building a Carnatic Music Practice AppPublic

Now let me create the Zustand store.

Now let me create the audio modules.

Since this is a new project, I need to understand your preferences before designing the architecture. Let me ask a few key questions.

Now let me create the practice engine hook and UI components.

Now let me create the UI components.

Now let me create the main App component.

Let me install the dependencies and verify everything works.

Now I have a clear picture. Let me design the architecture for this Carnatic music practice web app.

Now let me write the final plan to the plan file.

Now let's start the dev server to make sure everything works.

The app is now running at http://localhost:5173/

Here's what I built for you:

Carnatic Practice App

Features Implemented:

1. Settings Panel

   • Base pitch selector (C through B as Sa) with kattai reference
   • BPM control (20-120)
   • Gati/speed selector (1x, 2x, 4x notes per beat)
   • Tanpura toggle

2. Exercise Selection

   • Sarali Varisai 1-14 (all patterns included)
   • Category dropdown for future exercises

3. Notation Display

   • Shows swaras in grid layout with measure bars
   • Animated cursor moves through notes during practice
   • Upper/lower octave indicators (dots above/below)

4. Tanpura Drone

   • Synthesized tanpura using Web Audio oscillators
   • 4 voices: Sa (two octaves), Pa, with subtle LFO modulation
   • Follows your selected base pitch

5. Pitch Detection

   • Real-time microphone analysis using pitchy library
   • Cent-level precision showing sharp/flat deviation
   • Live feedback display during practice

6. Post-Practice Feedback

   • Overall accuracy percentage
   • Timeline showing correct/incorrect notes
   • Problem areas highlighting which swaras need work

How to Use:

1. Open http://localhost:5173/
2. Select your base pitch (e.g., D for Sa)
3. Adjust BPM and speed
4. Choose an exercise (Sarali Varisai 1-14)
5. Click "Start Practice"
6. Allow microphone access when prompted
7. Sing along with the moving cursor
8. After completion, review your feedback

To add more exercises later:

• Add Janta Varisai to src/data/exercises/jantaVarisai.ts
• Add Dhatu/Melsthayi/Alankarams similarly
• Import and register in src/data/exercises/index.ts

Let me fix these issues and add the recording/playback feature with visualization.

Let me check what's happening with the tanpura and fix the issues. I'll also add the recording/playback visualization feature.

I see several issues. Let me rewrite the audio system to fix the tanpura, add a metronome, and add recording with playback visualization.

Now let me add the Metronome and create a recording system.

I've created a comprehensive plan for building your Carnatic music practice app. The key points are:

What you'll get:

• Web app with React + TypeScript + Tailwind
• Settings for base pitch (C-B as Sa), BPM, gati (1/2/4 notes per beat)
• Sarali Varisai 1-14 to start, expandable to Janta/Dhatu/Melsthayi/Alankarams
• Tanpura drone that follows your selected pitch
• Real-time pitch detection showing which swara you're singing + cents deviation
• Post-practice feedback: accuracy %, which notes were wrong, timing analysis

Technical approach:

• Uses pitchy library for pitch detection (accurate for voice)
• Web Audio API for microphone + tanpura synthesis
• Hz → Swara mapping using Carnatic just intonation ratios
• 60fps detection loop for precise timing analysis

Now let me update the practice engine to include recording and metronome.

Now let me update the SettingsPanel to include metronome toggle.

Now let me create the recording playback visualization component.

Now let me update the FeedbackPanel to include the recording playback.

Let me check for TypeScript errors and fix any remaining issues.

Excellent! Let me start building the app. I'll create tasks to track progress and begin with the project setup.

This is a great project! It involves several complex components - audio processing, Carnatic music theory, and real-time analysis. Let me first check that reference link to understand the content structure, then we can plan the architecture.

Now let me restart the dev server to test the changes.

The app is now running at http://localhost:5173/

Here's what I fixed and added:

Fixes

1. Tanpura now works - Rewrote the TanpuraSynth to properly create a fresh AudioContext each time. It creates 4 voices (Sa in different octaves + Pa) with subtle LFO modulation.

2. Added Metronome - New metronome click that plays on each beat. Toggle it in Settings.

3. Exercise display - The exercise name shown is from the data (e.g., "Sarali Varisai 1"). If you're seeing "Janta Varisai", make sure the category dropdown is set to "Sarali Varisai".

New Features: Recording Playback with Visualization

After you finish practicing, you can now:

1. Play back your recording - Press the play button to hear yourself
2. See a pitch visualization graph showing:
   • Gray dashed line: Expected pitch for each note
   • Colored dots: Your detected pitch
     • Green = correct note, on pitch
     • Yellow = correct note, but sharp/flat
     • Red = wrong note
3. Note-by-note analysis boxes showing:
   • What note was expected (top)
   • What you sang (bottom)
   • Cents deviation
   • Color-coded: green (correct), yellow (off pitch), red (wrong note), gray (no detection)
4. Playhead moves through the visualization as audio plays

How to Use

1. Open http://localhost:5173/
2. Select base pitch, BPM, speed (gati)
3. Make sure Tanpura Drone and Metronome Click toggles are ON
4. Select "Sarali Varisai" category and exercise number
5. Click Start Practice
6. Allow microphone access
7. Sing along with the cursor - you'll hear the tanpura drone and metronome
8. When done, view the feedback panel with your recording playback and visualization

Let me fix these issues. I'll add standalone tanpura control, a countdown before practice, and debug the feedback/recording display.

I see the issue - the practiceEvents in stopPractice is stale (captured at callback creation time). Let me fix this and add the other features.

Now let me create a standalone tanpura control hook and update the UI.

Now let me update the Controls component to add the tanpura button and show countdown.