This is a small web project I made with the assistance of https://oscillart.athena.hackclub.com/ (courtesy of The Athena Awards), and took on a lot of new challenges and topics I had never worked with before, such as audio + creation of anything in real-time. This website pairs sound generation with a realtime visualizer, so that you can hear and see how soundwaves would look like if certain notes are played. The "sound" comes from the Web Audio API, whereas the visualization is rendered on the HTML canvas.

This website creates a AudioContext node and through making a few core nodes, OscillatorNode, GainNode etc was able to generate and control the sound. Since this was my first time working with audio, it took a lot of trial and error to get things working just as I wanted, and the resource provided by Athena Awards proved to be an incredible gateway to learn exactly how everything worked.

playable link: https://cloudydays-m.github.io/Oscillart/