Melodify - A Virtual Piano Studio

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.

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

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.

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.

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

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.

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

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

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.

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.

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.

CHANGE LOG:
fixed some issues in the keys binding
I tried of adding colors to key presses.

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.

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.

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

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.