Melodify - A Virtual Piano Studio banner

Melodify - A Virtual Piano Studio

16 devlogs
26h 52m 55s

A virtual piano, Where you can Play with keyboard, mouse, or touch ,then save what you create. No dependencies, no server, just music. (Please be patient on first click browsers require user interaction before audio starts.) Update: I have updated…

A virtual piano, Where you can Play with keyboard, mouse, or touch ,then save what you create. No dependencies, no server, just music. (Please be patient on first click browsers require user interaction before audio starts.) Update: I have updated Melodify with new features like dark theme, more keys, loading screen.

This project uses AI

Used Copilot for debugging and took help to adjust frequency for each keys. Enhanced readme.

Demo Repository

Loading README...

vasupks01

Shipped this project!

Hours: 11.59
Cookies: 🍪 333
Multiplier: 28.75 cookies/hr

Update: Based on the users feedback from the previous ship, I have updated Melodify with new features like dark theme, more keys, loading screen. Hope you find it good to relax yourself by playing Melodify.

vasupks01

Devlog #16:
Features Added:

  1. I have expanded the piano key range from C3 to B5 so users can play across 3 full octaves instead of a limited key set.
  2. I have added proper octave navigation for small screens with previous/next controls
  3. I have implemented responsive piano key scaling logic so key width/height adjusts to screen size and no longer overflows outside the piano container.
  4. Its completely device responsive.
Attachment
Attachment
0
vasupks01

Devlog # 15:
Features Added:
1. I have completed the loading screen with animation with piano key visualizer and progress bar
2. I have added dark mode toggle with CSS variables and localStorage persistence
3. I have added backing tracks (Lo-Fi Hip-Hop, House, Funk, and Reggae) based on the feedback received from last ship. People requested me to add sound tracks so that it will be useful.
4. I have given option to custom audio file upload support for backing tracks

Attachment
0
vasupks01

Devlog # 14:
Features added:
I have added a loader screen with animated loading effects.
Also I have made my bg color dark for this screen by default.

Attachment
0
vasupks01

Shipped this project!

Hours: 15.29
Cookies: 🍪 358
Multiplier: 23.44 cookies/hr

I built a thing that turns your browser into a fully playable piano, polyphonic sound, real-time recording, and localStorage persistence, all without a single dependency. The hardest part was managing concurrent playback states (live playing, recording playback, and saved recordings all fighting for audio control) without everything collapsing into a mess of overlapping sounds and broken timers. I figured it out using a global state tracker (curId) and a centralized cleanup function (stopSaved()) that clears timeouts and resets UI before any new playback starts. Really happy with what it turned out to be, feels like a real instrument now.

vasupks01

CHANGE LOG:
I have complete the application with the efforts and I have made a best out of it.
You can try it like on : https://ponmanivasahan.github.io/Music-Piano/
I have also created a Readme file Where I have documented all my work. You can check it out.
If any doubt check out the readme.
Initially for first key press the sound dosent hear so please be patient. I am sorry for this case.

Attachment
1

Comments

Gabs
Gabs about 2 months ago

Btw I had a lot of fun with this piano studio, tho it’s very much a like to thosr youtube videos lol

vasupks01

CHANGE LOG:
Feature added :

  1. Save recordings - Stores performances to localStorage
  2. Load saved recordings - Persistent across browser sessions
  3. Playback from storage - Replay any saved performance with visual key highlighting
  4. Delete individual - Remove specific recordings
  5. Clear all - Bulk delete with one click.
  6. Empty state UI - Friendly message when no recordings exist
Attachment
0
vasupks01

CHANGE LOG:
Feature currently working on :
the full recording module, a tape-style recording system that captures piano performances with millisecond precision and enables instant playback.

Key Technical Decisions:
Timestamp system: Used performance.now() relative to recording start for sub-millisecond accuracy

Playback scheduling: setTimeout with calculated delays - simpler than Web Audio scheduling for this use case

Visual feedback separation: Key highlights use CSS classes, don’t interfere with actual sound playback

Next up Feature:
I want to start working on local storage persistance.

Attachment
0
vasupks01

CHANGE LOG:
Feature Added:
Disco visualizer for the background if user refers to use it
What I Built
Added a real-time, canvas-based disco visualizer that activates when users toggle “Disco Mode”. The effect creates a mesmerizing party atmosphere with animated, color-shifting blobs that dance across the screen behind the piano interface.

Technical highlights:

  1. WebGL-powered 2D canvas with radial gradients
  2. 8 autonomous “blob” objects with independent movement physics
  3. Dynamic color cycling from a palette of 12 vibrant colors
  4. Subtle screen flashes synchronized with audio-like timing
  5. Smooth performance at 60fps with requestAnimationFrame
Attachment
0
vasupks01

CHANGE LOG:
I have worked on audio system but still working on it and i try to bring best out of it.

0
vasupks01

CHANGE LOG:
I have worked on the developement of the uiux part for the Recordings and footer.
you can store the recordings and replay them with the help of this.
All your recordings will be shown below.

Attachment
0
vasupks01

CHANGE LOG:
I have worked on the ui part
I have planned to keep recording section
I have planned to keep a hint section to show keys
Upcoming task:
I need to complete the whole ui part then work on functionality.

Attachment
0
vasupks01

CHANGE LOG:
First of all I am very sorry for taking 2+ hours to post this devlog.
I had been working on refining my styles and i had been searching for any third party api for music but i din’t find anything useful.
SO i have updated my musical piano with handcrafted work.

Attachment
0
vasupks01

CHANGE LOG:
1.Connected Piano Keys to JavaScript
2.Dynamic Audio Switching
3.Active State / Key-Press Feedback
I have made all keys connected to that particaular audio file to be played for that key using dynamic binding of keys and also added effect on key press.

0
vasupks01

CHANGE LOG:
Made progress on the interactivity today: I connected the piano key elements in JavaScript, set up dynamic audio switching so each note can load its own sound file, and started the key-press feedback system by adding an active state to the pressed key. Next up is finishing the full key mapping and polishing playback behavior.

Attachment
0
vasupks01

CHANGE LOG:
I built the basic Melodify piano interface, including the keyboard layout, volume control, and the option to show or hide key labels.

Attachment
0
vasupks01

I have started working on the project. I am applying the skills i have learnt when i was going to piano class.
I will make it beautiful so enjoy it.

Attachment
0