Design Kit for Real-Time Audio Analysis

Designing patterns for recording & learning music. See Sangita

Built with L. Zartman

This page focuses on the UI of Sangita, a real-time pitch visualization app I made to help classical singers overcome roadblocks in their growth.

This study focuses on UI features of Sangita, a real-time pitch visualization app I made to help classical singers overcome roadblocks in their growth.

Foundations

While Sangita was initially designed as a desktop web application, beta testing revealed a need for a mobile first approach. Users are used to using their phones to both record and watch audio and video, and the resistance to usage with a laptop is much higher than with a mobile device.

Adaptive Layout & Elevation

Desktop (1440x1024), Mobile (402x874)

To accommodate for data dense graphs, a 2px grid is the foundation of the Sangita Layout. The practice graph layout has a sidebar housing practice controls adjacent to the y-axis of the graph. The x-axis and the graph header rest at the same level, above the y-axis. The graph is below the y-axis, sitting at the lowest level of elevation on the page.

Real-Time Audio Visualization Interactions

Users interact with audio in both the Practice Room and the Raga Library. In the Practice Room, audio can be recorded and played back. In the Raga Library, users can play pre-loaded audio. This section will focus on the real-time audio experience in the Practice Room.

Practice Room

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

00:00

00:02

00:04

00:06

00:08

00:10

00:12

00:01:04

00:00:00

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

01:00

01:02

01:04

01:06

01:08

01:10

01:12

00:01:04

00:01:04

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

01:00

01:02

01:04

01:06

01:08

01:10

01:12

00:01:04

00:01:04

Practice States: Empty, Recording, Playback (from left to right)

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

00:00

00:02

00:04

00:06

00:08

00:10

00:12

00:01:04

00:00:00

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

01:00

01:02

01:04

01:06

01:08

01:10

01:12

00:01:04

00:01:04

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

S

01:00

01:02

01:04

01:06

01:08

01:10

01:12

00:01:04

00:01:04

Practice States: Empty, Recording, Playback (from top to bottom)

Users in the Practice Room should be able to quickly alternate between recording and analysis. When recording is paused, users can scrub and playback audio. Selecting Record from a paused state resumes the recording from the end of the recording, rather than overwriting existing audio.

Fall 2024 Beta Feedback: Audio Scrubbing

Beta testing in the fall of 2024 revealed a need for users to quickly navigate to different time regions of their practice session without repeatedly clicking “rewind”, or horizontally scrolling excessively.

00:00

00:02

00:04

00:06

00:08

00:10

00:12

01:00

01:02

01:04

01:06

01:08

01:10

01:12

31:00

31:02

31:04

31:06

01:08

01:10

01:12

Scrubbing States: Empty, Recording, Scrubbing (from top to bottom)

00:00

00:02

00:04

00:06

01:00

01:02

01:04

01:06

31:00

31:02

31:04

31:06

Scrubbing States: Empty, Recording, Scrubbing (from left to right)

The anatomy of the scrubber can be broken into a draggable region, a blue line indicator of the exact time stamp (controlled using the time-bar, not the scrubber), and a diagram of the practice session, which dynamically updates as a user records a session.

Tuner Widget

The tuner widget lives in the Practice Room controls, and maps the cent deviance from the note the user is closest to (50> cents away from).

Tuner

-50

+50

-0.7 ct

Tuner

-50

+50

+10 ct

Tuner

-50

+50

+30 ct

Accurate: 0-5 cents, Close: 5-20 cents, Far: 20-50 cents (from left to right)

Tuner

-50

+50

-0.7 ct

Tuner

-50

+50

+10 ct

Tuner

-50

+50

+30 ct

Accurate: 0-5 cents, Close: 5-20 cents, Far: 20-50 cents (from top to bottom).

Return to Home

Back to Top