Piano app and audio visualizer (HTML Canvas & JavaScript)

Finally we make a piano and visualize the audio on the Html Canvas using vanilla JavaScript!

In this vanilla JavaScript tutorial we use the button system developed in the last lesson to make a piano app. The piano keys are curved demonstrating the pixel-perfect hit test system we made for the buttons. We synthetize sound using the web audio Api and create a simple visualizer for the sound by animating its waveform on an HTML canvas.

In this Visual Web Development (VWD) course we study algorithms by implementing projects and visualizing them in the browser. We use HTML5 Canvas and JavaScript for: interactive applications, image processing, machine learning and games. We limit the use of external libraries so that we understand how things really work.

The final objective this year is to build an augmented reality piano app that allows you to play on a virtual piano. Hand movements will be recognized in real-time from a webcam stream.

Lecture 1: https://youtu.be/lr8r7F7y4OI
Lecture 2: https://youtu.be/HL3ThwW4b64
Lecture 3: https://youtu.be/InC9KH46H1g
Lecture 4: https://youtu.be/cGg6A-U9q3E
Lecture 5: *this video*
Lecture 6: https://youtu.be/dDnFTbjGPyw
Lecture 7: https://youtu.be/IttMYnQSYZ0
Lecture 8: https://youtu.be/-rN5juyOmAA
Lecture 9: https://youtu.be/R_QEzK7RRks
Lecture 10: https://youtu.be/eOmVj-8l4Q4

Full playlist:
https://www.youtube.com/playlist?list=PLB0Tybl0UNfb3hTHPfEIg1SPw_-Ca9iIw

The course was taught once before but with very different objectives inspired by the Marvel cinematic universe (Dr. Strange and Spiderman):
https://www.youtube.com/playlist?list=PLB0Tybl0UNfY_W97391GIxM8I27c4HKRm

Code: https://codepen.io/gniziemazity/pen/YzpGLbK

#vwd #visualwebdevelopment #webaudioapi