Singing Recorder — Mic, Monitor, Upload, Playback & Download

How to use the Controller (shared strip)

This strip is the shared transport for the microphone graph tools: one activation feeds Vocal Pitch, Level & Waveform, and dashboard pitch widgets with the same buffers and timing. Metronome and Scale Generator do not use the mic path, but their cards sit in the same app shell—each saves its own settings in local storage separately from this strip.

Getting started

• Click the microphone button and allow browser access when prompted. The icon switches between mic-on and mic-off artwork while capture is live.
• Recording is tied to the audio pipeline: capture a take, then use Play to review it or open other tool pages—the last recording stays available until you record again or reset.
• Tooltips describe each icon on hover (desktop). On mobile, open the Controller entry in the header menu if the strip is collapsed.

Main controls

• Microphone — Starts or stops capture from your mic. Disabled while a recording is playing or when the host page temporarily locks controls.
• Monitor — Toggles live monitoring of your input (speaker vs muted-speaker icon). Prefer headphones and a conservative monitor level to avoid feedback.
• Monitor output level — Click to open a small panel with a range slider (0 up to the app’s maximum gain) and a percentage readout. Dragging updates foldback immediately; the chosen level is saved in browser local storage for next time.
• Play / Pause — Plays or pauses the last captured take. Disabled while the mic is recording, until a take exists, or while controls are locked.
• Jump to start — Moves the playhead to 0:00. If playback was running, it keeps playing from the beginning. Disabled under the same rules as Play when there is no take.
• A↔B loop — Toggles section loop mode (see A↔B section loop below). Placed immediately before Upload on desktop; on mobile it sits in row 2 of the Controller grid.
• Upload — Imports an audio file and converts it into playback history for the same analyzer views. During processing, transport and edit controls are temporarily locked; use Cancel in the processing overlay to abort (see Upload & restore processing below).
• Download — Opens format choices (WebM, MP3, WAV, OGG, M4A). Highlight a format, then tap Download in the same menu to save the file locally. Disabled under the same rules as Play when there is nothing to export.
• Delete — On desktop, sits at the end of the strip (right of Download). It activates only when there is a recorded or uploaded take to remove; pressing it clears the current take from the analyzer and erases the matching browser cache entry in one step.

Skip ±10 seconds (transport icons)

After you finish a recording or upload a file, two extra transport buttons appear on either side of Play. They use the same enable rules as Play (not available while the mic is capturing, during upload analysis, or when controls are locked).

• Back 10 seconds — Double left-pointing triangles (skip-back / “rewind” style). Moves the playhead 10 seconds earlier, clamped to the start of the take (0:00).
• Forward 10 seconds — Double right-pointing triangles (skip-forward style). Moves the playhead 10 seconds later, clamped to the end of the take.
• During playback, skipping does not stop audio: the engine seeks to the new time and keeps playing, and the pitch graph, spectrum, and Range Map LIVE readout follow the new position.
• While paused, only the timeline position changes until you press Play again.
• The progress bar, current time label, and chart playheads update immediately—same mechanism as dragging the scrubber.
• Desktop layout — Order is: … volume, Jump to start, −10, Play, +10, loop, upload, download, delete, then the progress bar.

A↔B section loop

Use the circular-arrow loop button to repeat a slice of the take without manually scrubbing back each time. Loop mode is designed around the waveform minimap (canvas under the progress bar) so the main gauge does not shift or break layout.

• Turn on — Tap the loop button after a take exists. The minimap stays open, shows the waveform overview, and draws A (orange) and B (teal) markers with a highlighted band between them. Default range: start at the current playhead, end about five seconds later (clamped to the take length).
• Adjust A and B — Drag the A or B badge on the minimap (about 14px hit target). Markers cannot move closer than ~0.5s. Timestamps appear on the badges while dragging.
• Scrub while looping — With loop on, the progress range input is non-interactive (display only). Click or drag on empty minimap canvas to seek; the playhead line and charts update the same way as gauge scrubbing.
• Automatic wrap — During playback, when the playhead reaches B, the engine seeks to A and continues if audio was playing—same seek event as manual scrubbing, so pitch/spectrum views stay in sync.
• Turn off — Tap loop again. The minimap closes unless you are hovering or dragging the gauge on desktop. Looping stops; playback is not paused if it was already running.

On desktop, hovering the progress bar still shows a transient minimap when loop is off. At 930px width and below, open the header Controller drawer for the same controls; row 2 of the grid holds Jump to start, ±10s, Play, and Loop across five equal-width slots (see Mobile layout).

Mobile layout (narrow screens)

• At 930px width and below (header Controller drawer and this detail page), buttons use a 5-column grid (3 + 5 + 3 buttons per row) instead of a single crowded row:
• Row 1 (3) — Microphone, Monitor, Monitor volume.
• Row 2 (5) — Jump to start, Back 10s, Play/Pause, Forward 10s, A↔B loop.
• Row 3 (3) — Upload, Download, Delete.
• Row 4 — Full-width playback progress bar with time labels.
• Touch targets stay at least ~40px tall; icon artwork scales down slightly so all eleven buttons fit without horizontal scrolling.

Progress bar & waveform minimap

• Shows current time and total duration (mm:ss.cc — centiseconds, two digits after the decimal) next to a wide range control. Drag, click along the track, use touch to seek, or use the ±10s buttons beside Play when the mic is not recording.
• Seeking dispatches playback position to the analyzer so pitch and spectrum views jump to that moment in the take.
• The bar is disabled while the microphone is actively capturing so you do not scrub mid-take by mistake.
• A compact waveform minimap appears below the bar on hover (desktop) or while scrubbing. It mirrors the take overview and the current playhead position.
• When A↔B loop is on, the minimap stays visible, draws the loop region and A/B markers on the canvas, and receives all seek and marker-drag input; the range input above is dimmed and ignores pointer events.

Plot settings (on pitch pages)

• On Vocal Pitch and similar views, a separate bar above the chart still holds pitch plot options (MIDI range, overlays, sensitivity). Those values are stored per page, not inside the Controller strip.

Upload & restore processing (overlay)

A full-screen overlay appears while the browser decodes audio and rebuilds pitch/spectrum history. Progress is shown as a percentage. Transport and most strip actions stay locked until processing finishes or you cancel.

• Fresh upload — Message: Analyzing uploaded file…. Runs the same offline analysis pipeline as a finished mic recording. On success, the take behaves like a normal recorded session (Play, scrub, charts). Cancel aborts the job and dismisses the overlay; the previous IndexedDB cache (if any) is left unchanged.
• Restore after refresh or revisit — Message: Restoring your recording — rebuilding analysis…. Shown when you reload the page or open a pitch tool again and a non-expired take is still in IndexedDB. The app reads the stored audio bytes and re-runs analysis locally (history is not stored on disk, only audio + light metadata).
• Cancel on restore — Stops the rebuild immediately, closes the overlay, and deletes the cached take from IndexedDB plus any in-memory session snapshot. The next full page load will not prompt you to rebuild the same file again. Use this if you do not want the old take restored.
• Route changes without a full reload may still pass a take through an in-memory snapshot (no overlay); only the disk-restore path uses the rebuild overlay and Cancel-to-clear-cache behavior.

Recording cache and delete behavior

• After a recording finishes or an upload completes analysis, the audio bytes plus a small metadata record (sensitivity, playback time, MIME type, timestamps) are written to your browser's IndexedDB on this device. Nothing is uploaded to a server, and other browsers or other devices won't see the take.
• The cache lets a take survive a page refresh or full reload: when you return, playback history, pitch trace, and spectrum frames are reconstructed from the stored bytes via the restore/rebuild pass described above.
• Retention is capped at roughly 1 day (24 hours) from when the take was saved. Once the entry is older than that, the next page load detects the expiry, drops both the metadata and the audio, and starts you with an empty session.
• On `pagehide` (tab close, navigation away, browser exit), the app fires a best-effort cleanup that clears both the in-memory snapshot and the IndexedDB record. Browsers don't always allow long async work to complete in that window, so the 1-day TTL stays as the hard guarantee.
• Starting a new recording with the mic, or finishing a fresh upload, replaces the previous cached take (only one take is kept at a time).
• Pressing the trash icon in the strip dispatches a reset event that wipes the analyzer's current history, clears the in-memory snapshot, and removes the IndexedDB entry — all in the same click. There is no separate "clear cache" action; Delete is the user-facing way to evict the cached take immediately instead of waiting for the timeout.
• Plot settings (MIDI range, overlays, sensitivity, monitor gain, etc.) live in `localStorage` and are not affected by Delete, restore Cancel, or cache expiry — they always persist between visits.

Tips

• Use wired headphones when monitoring to reduce feedback; on phones, keep monitor volume low.
• Safari / iOS may require a tap to resume audio after the page loads—if meters stay flat, tap the mic or reload once with permission granted.
• Upload guide: max duration is 10 minutes and max file size is 50MB. If either limit is exceeded, the app blocks analysis and shows a warning.
• Extension policy: there is no strict hardcoded extension whitelist in the UI; the picker accepts `audio/*` and actual support depends on your browser’s decoder. In practice, WAV, MP3, M4A/AAC, OGG, and WebM are usually safe choices.
• If a file extension or codec is not supported by your browser, decoding can fail during analysis. Convert the file to a common format (for example WAV or MP3) and upload again.
• After upload starts, wait for analysis to finish before interacting with playback controls; once complete, Play uses the uploaded timeline just like a recorded take.
• This Controller detail page keeps the analyzer hidden while the strip runs against a hidden PitchAnalyzer instance; on the dashboard, the same controls sit above the cards.
• Metronome BPM/meter/subdivision preferences and Scale Generator root/interval/BPM/direction preferences each have their own local storage keys—adjust them on those cards without affecting monitor gain here.

Vocal practice ideas

• Record a phrase, listen back, then re-record — compare takes without leaving the browser.
• Enable A↔B loop on a shaky high note or melisma, drag A/B on the minimap, and let playback cycle while you watch the pitch graph at that moment.
• Use Jump to start before a full listen-through, then loop a problem bar for deliberate practice.
• Monitor while you vocalize to catch pitch or tension issues before they become habits.
• Export a warmup or lesson clip for a coach, or archive monthly to hear long-term progress.