Crafting a music instrument for the browser
Music will always have a place in my heart even if I can't earn a living with it as a professional musician now. That's why during this career transition into coding I've managed to find ways to fit music practice sessions in my schedule, make music technology projects or include a music feature in a coding project, let me give you an example on the last one.
I was done with the todo list I talked earlier and continued with learning React. My first project with this technology was a shopping cart for music software, I didn't like the end result though. Then, I built another project with React again but I also brought in a backend as a service provider platform called Supabase. That project was a point and click gameI enjoyed coding but I wasn't sure to include it in my hall of fame. Besides, I actually wanted to go for a project that would be my sweet revenge for not being able to be an audio programmer, a web browser synthesizer.
My plan for coding the synth was perfect and my lines of code flowed smoothly until all tests of the implementation of the Web Audio API failed inexplicably. I found out that there was no way to use Jest to mock it straight away but there was a library that a very talented audio programmer made for that purpose. I should have been able to move on easily but that didn't happen, let me tell you why.
One of the developers behind the Web Audio API himself confirmed me in an online audio developers meet up that I couldn't test code split into modules because the API was not introspective, meaning that it couldn't see instances of its components in module variables. What a bummer! I wished that was not true but I'd already spent long hours trying to test the API with other libraries like Mocha without any succeess. My last resort was to manually test the Web Audio API implementation myself but that was not fun really.
Anyway, I styled the app with a terminal colour scheme that didn't look bad at all but the app layout wasn't responsive. Unfortunately, my estimated time to finish the project was over already so I prioritized filling gaps in my of CSS and HTML knowledge in next project.