Unexpectech · Learning Lab
← Music & Sound

Student Music Project · Active Development Plan

Interactive Music Studio

A browser-based music studio designed as an 8–10 week student project. The experience is meant to feel like making music—not filling out a database application—while still teaching full-stack engineering, browser audio, persistence, APIs, testing, and responsible AI integration.

Areas of Work: Education · Arts · Artificial Intelligence

Student buildJavaScript + CSSSpring BootMySQLBrowser AudioAI Lyrics

Project vision

Play first. Build the song in layers.

The studio is inspired by the immediacy of browser music tools but expands that idea into a student-friendly multitrack environment. A student should be able to open an instrument and hear sound quickly, then record what they play and continue building the same song with additional instruments.

The planned core instruments are piano, drums, and guitar. Piano and drums use the physical computer keyboard; guitar is represented visually with strings and mouse interaction. Instrument variants and volume/pitch controls add variation without changing the basic interaction model.

The core recording workflow

01Record a drum beat
02Pause and switch to piano
03Record piano while drums play
04Add guitar / samples / more tracks

Event-based recording

The project records musical events—what note or sample was played, when it started, and its duration—rather than recording microphone audio. This makes synchronization, editing, playback, saving, and track management more practical for the educational scope.

Transport and timeline

The design includes Record, Stop, Play, Pause, and Restart controls; a shared project clock; a moving playhead; one row per track; timeline navigation; Solo, Mute, Delete, and Volume controls; and basic clip/section positioning.

Studio areas

A creative lobby, not a control panel.

01

Piano

Computer keyboard + mouse/touch, multiple notes, visual key feedback, volume and octave/pitch controls.

02

Drums

Keyboard-controlled kick, snare, hi-hat, tom, cymbal, clap, visual hit feedback, and kit variants.

03

Guitar

Visible strings, clicking or strumming behavior, acoustic/electric variants, and basic sound controls.

04

More Instruments

Potential jazz/orchestra expansion such as saxophone, trumpet, violin, cello, flute, bass, or synth after the core instruments are stable.

05

Samples

Short sounds such as clap, cymbal, bell, snap, impact, chime, kick, or tambourine.

06

Drafts

Save unfinished work privately, reopen it, and continue editing later.

07

Gallery

Publish finished songs with title, creator, genre, and playback while keeping private drafts separate.

08

AI Lyrics

Generate verse/chorus text from a prompt, preserve requested ideas or words, then edit and attach the result to the project.

AI inside the studio

AI is a feature and a development tool—but not the author of the whole project.

The planned lyrics generator accepts a natural-language song description and returns editable lyrics. Requested words or ideas should be preserved when possible, and students can regenerate, edit, save, and attach the lyrics to the current composition.

The same project also uses AI to accelerate coding: boilerplate, mappings, debugging suggestions, tests, repetitive UI, and refactoring. The student remains responsible for testing the generated code and explaining important implementation choices.

Important scope distinction: AI-generated singing is separate from AI lyrics and is only a stretch goal. The core project is considered successful without generated vocals.