By
@manayp
I am developing an extremely small music tool in a single file which will convert my clicks into notes and display them on the sheet with Web Audio playing them. It is sort of a very light mini-composer with its own interface.
SheetNote is a one-page HTML/CSS/JS app where you can create a melody by clicking keys of an on-screen piano (also A, S, D, F, G, H, J, K, L, Z, X, C, V, B keys will work) and see how notes are drawn automatically on real musical staff. The biggest challenge was staff rendering itself, mapping each note pitch on the right line/space, drawing ledger lines for high and low notes, and maintaining timing of notes playback based on current highlighted key on the screen. The most interesting about my solution is creating of sheet music notation without using any library and only with pure SVG and Web Audio API and all of this in flat design with Comic Sans font. Just open index.html in any browser and you'll be able to start playing with it — there is no installation process and special server required for that. You should click piano keys or press mapped letters to create your own melody and then use controls to change tempo, volume and instrument and click Play button to hear your melody with highlighted notes. One of the biggest issues is that after Stop button press audio engine resets completely instead of waiting midway or anything. Overall I had an amazing time making this lemme know what you think.
These 2 features are finally completed and initially I thought this would be the easiest part but it lowkey wasnt because I had to connect 2 different aspects into one singular thing. Overall this works very well, now I just gotta see if everyone else likes it so have fun with it and if you have any feedback lemme know.
The control system is finally done with no errors and I added 4 instruments because that was the only thing i could find and I took inspiration from other voice control apps like gemini and more to see how the system works so overall I believe this is good plus i tested it like 6-7 times so yeah. THE CSS for the whole app is kinda trash right now so ima fix that
SheetNote began as a flashy “space website” with star fields and comet trails, and later became a single file comic sans music utility with a click-and-play piano, live SVG staff, web audio playback, metronome, and basic text notation, all contained within sheet-music.html (complete with pitch data for C4-B5, measure-wrapped staff drawing, oscillated playback scheduling, highlight synchronization, and localStorage save/loading); once that was done, I removed the notations section, save loading UI, and help tab in order to streamline the application, dubbed SheetNote, created a README file, and now have a functional end-to-end application with a few bugs yet to be fixed, such as the overly-aggressive playback stopping, approximate metronome timing, lack of sharps and flats, fixed staff row size, mobile layout missing, and placeholder rest icons. So, overall I finally finished it but theres still some errors so ima fix that…
