Scalify

Though I have said in my last devlog that it would be my last one, my friend gave me an awesome suggestion that I could not overlook. He mentioned that there may be cases where someone does not have a mic or even they might like to upload their audio in MP3 format rather than recording the live sound. Therefore, I have added another feature for the project, which allows me to add MP3 files.

The new system allows the user to upload their own music/audio files and works well with the existing features of the application. I have tested the system with any random song just to check the functionality of the system, and as you can observe in the screenshot below, the system is working perfectly fine.

The addition of this feature will allow those users to use this system in case they do not have a microphone or prefer to use their pre-recorded audio file.

This is my official last devlog on this project, and I want to go over all the details behind finishing this project. Within the past few days, I have been working on cleaning up the layout as much as possible so that it would look better. The most important thing is that the JavaScript coding for this entire project has been completed – through lots and lots of debugging and tweaking. Some nice tips came in from Claude, and VS Code’s auto-suggestions sped things up nicely.

At first, there was a problem with the script. It did not function correctly and some functions were causing problems to the flow. However, after a series of off-line testing, identifying and solving of problems everything began to work perfectly fine.

In addition, I made some changes in HTML. Some new lines were introduced to support the new functions in JS while some other lines were deleted to clean the code. So, overall, this revision finalized everything — from layout to logic and from structure to build. I also removed dark mode because it was not needed.

And then I pushed it to github later one and hosted it on netlify.

Overall everything works well lemme know if yall like it.

BELOW I ATTACHED MY VID WHICH IS A SAMPLE ITS GONNA BE TURNED INTO AN MP3 BTW. So currently I am pretty much working on this project nonstop. I’ve completed about 490 lines of JavaScript code, but considering the spacing and formatting of the code, it’s closer to 350 lines. It’s still a lot, still burned some of my brain cells, but I am doing fine.

I also attached a video – not sure if you can even see it – but it’s my first sample song for the website. Once the website starts detecting, the detection process should go smoothly and display “Detected in C‑Sharp.” At least that’s the goal. Currently I am working on the JavaScript logic of this function and would say that I have completed 67% of this function. So in other words I’m already halfway there and on my way to the finishing line.

It’s been a lot of trial and error, bug fixations, adjustments of the detection accuracy and not breaking the interface, but let me tell you – it’s going quite smoothly. Once I complete the rest of the logic, I will be able to show you the full demo version of the site and you will be able to try out the song detection yourselves.

Good luck to me lol im almost there anyway see u in the next log adios.

First of all these are the scales I picked based on my JS:

const SCALES = [ { name: ‘Major’, set: [0, 2, 4, 5, 7, 9, 11] }, { name: ‘Natural Minor’, set: [0, 2, 3, 5, 7, 8, 10] }, { name: ‘Harmonic Minor’, set: [0, 2, 3, 5, 7, 8, 11] }, { name: ‘Dorian’, set: [0, 2, 3, 5, 7, 9, 10] }, { name: ‘Mixolydian’, set: [0, 2, 4, 5, 7, 9, 10] }, { name: ‘Phrygian’, set: [0, 1, 3, 5, 7, 8, 10] },];

And so, I officially started working with the JavaScript, and it feels very real. By now, I have about 270 lines of code, which is quite an achievement, considering how much I have already done. With this part of the project, I am relying on my logic, a bit of help from AI, and a great deal of researching musical scales. I am not a great musical individual, so I needed to get into this subject, and while doing this, I discovered that there are monophonic scales. They sounded cool, and thus, I am going to implement them in the program as well. because why not lol?

While the JS gets more and more complicated by including pitch-detection logic and scale mapping into it, it is really exciting to see how this whole system gradually starts coming together. As soon as the detection algorithm is finished, the next step for me will be the implementation of the local history system, which will allow the users to keep track of the past detected scales on their computers.

So, there is still a lot to do, but the progress is going good ig so far. atleast its funn.

I have just finished the color update, and the entire interface now feels much more alive than it did before. The new color palette has made Scale Spot have some personality, unlike its previously dull default one. Moreover, I have added demo music, which includes the recordings that I have created MYSELF using my flutes, and it feels so cool that now they have been incorporated into the project. You will listen to them later, and I hope that you will enjoy them since I have put in a lot of effort while recording them.

As for the programming part, I have started coding the JavaScript but now I am only a bit into it. However, I already feel that this step is going to be tough, as the logic of pitch detection, audio processing, and scale identification is crazy. I might need some help when I get to the point where things become really difficult, but I know that it is normal at this stage. For now, everything has been set up, the visuals have been improved, and the audio demo has been added – now I need to deal with JS logic.

Also dark mode looked trash so I changed some colours in it which I will show you guys later so stay tuned and adios.

Finally, I finished all the CSS, and to be honest, although the functionality is good, I do not think that the visual side of this project is quite satisfactory yet. In its current form, it looks quite simple and not particularly appealing, definitely not as stylish as I thought. It works well enough, but at the same time, it does not have that specific personality, that style that it should have.

Thus, I can safely say that creating visually appealing CSS style from what I have now is going to be my next task. I really want to make the interface vibrant and stylish. Although it may seem like an aesthetic problem, the layout itself is perfect – it is structured, organized and placed in a way that I wanted.

So overall ima change it to a blue and green theme because their is a god in my culture called Krishna and He plays the flute and his favourite animal is a peacock soo ima change it to a blue and greenish layout with better fontss and stuff.

SO heres how its goingg: At the current moment I am deep in the process of CSS development and, needless to say, it has not been an easy thing. To be precise, I would say that about 70-85% of the work is done, which means that most of the basic aspects of design have already been made including layout, color schemes, spacing, etc. However, as always happens when working on the detailed aspects of the design, some errors emerge.

So far I have faced a number of problems that are quite persistent. Elements do not align properly, there are some problems with animation and, besides, certain styles do not match each other although everything should go smoothly. Needless to say, at the moment things are not going great, but that is quite normal. These errors are quite persistent, but I will manage to solve them eventually.

Despite the difficulties mentioned above, the CSS is being developed quite well. It seems that my application starts to acquire an interface, and, after sorting out the existing errors, I can proceed to such aspects as audio processing and scale detection. So overall ig its going well but it can gooo betterrr

And so, I’ve written around 90 lines of HTML code in around 45 ish minutes with some prior planning and stuff, and surprisingly enough, the basic structure of the interface is starting to look very good. In general, I’ve managed to outline all major parts of the interface, organize the containers, and even prepare a base layout that shows how Scale Spot should look upon its loading. It might be a bit early to say something about this, but the foundation seems solid enough, and now I can imagine how the interface will end up looking.

In the process, there was one pretty annoying problem with the implementation of the light/dark theme switching functionality. In particular, the styles of certain elements were not changing at all and kept remaining within the incorrect theme. By investigating the CSS and how classes were applied, I managed to discover the cause of the problem and fix it. Now the theme switcher works perfectly fine and it is nice to see how all the interface switches between themes correctly.

Now that everything is done, the HTML layout is ready, the theme system works, and it is time to implement the input audio and the logic of the pitch detection itself.

First of all the name of the website is scalify. To sum up, my project is the development of an innovative software called Scale Spot which is aimed at automatic detection of the musical scale being played by the user on his or her bansuri. Namely, while playing the melody, the Scale Spot will recognize its pitch and determine the scale being performed on the bansuri in real time. This is a solution to one of the main problems of bansuri players and now I can adjust Sa, keep the pitch and be perfectly in line with the key I should play in.

The most important thing about my project is that Scale Spot will be able to work not only with bansuri but with any other musical instruments (harmonium, violin, guitar, keyboard) and even with vocals. This way the whole band, ensemble or classical orchestra will have the opportunity to be in the same key and not to be confused by it.

I have already started developing my project from HTML construction for the web interface of the program. Now I am around twenty lines into the process of developing the user interface. I also pasted a pic of a bansuri for those wondering what it is