Skill
- HTML
- JavaScript
- Web Audio API
Project Description
The audio visualizer is an interactive application. It is basically showing the sound wave based on the sound itself. This allows the user to interact by changing the color on canvas or adding creative sound waves. They also can add or remove the different kinds of readymade frequencies. It also includes three songs which are New Adventure Theme, Peanuts Theme, and The Picard Song.
Project Timeline
Research
This is a solo project. I admit that I don’t know how the sound wave was created. So, I decided to Google it to understand the frequency, pitch, and loudness. My ears don’t really pick up low bass. It was surprising for me to see that the sub bass frequencies include the harp and tuba. I always thought those were high frequency sounds.
Coding Time
Web Audio API is a great tool for analyzing the sound which allows me to receive the sound data. Using the AnalyserNode gives me access to the frequency data of the sound. I converted the data into a drawing on canvas. I also added a filter to make it more appealing by receiving each color pixel in canvas and manipulating the color.
Conclusion
It was fun to try new stuff using the audio on canvas. I would love to learn how to separate the specific instruments, that way I can try to copy DubsteGutter style. However, I realized that it would not be possible, but it would be possible if the sound was playing separately and then combine them all together to create one awesome drawing of wavelengths. This is something I would like to look back at in the future.