Webaudio Project Jeremy Uzan

Link to try it directly :

https://jeremybboy.github.io/Web-Audio-Piano-Synthesizer/

If you want to download the project and launch it locally on your computer:

Follow my youtube tutorial https://youtu.be/f1jQVQGfL_o or :

• Download and unzip the project
• Open your terminal, go to the directory of this folder (cd ...)
• wright: "serve", it will give you a local adress that you can open on your browser (Chrome, Safari, etc) -> Enjoy !

Description

This project is a simple sine Synth using Tone Js library and a spectrogram. The piano notes can be played from your computer keyboard. The notes assigned to the keyboard follow the same organization as in Music sofware like Ableton or Fl Studio: q->C, z->C#, s->D, e->D#, etc...

To start the spectrogram, you need to first click on the webpage.

The spectrogram I readaptated for the project comes from a tutorial made by a Jake Albaugh (you can find him on Youtube or CodePen).

Script.js

• Spectrogram
• Connection of the synth to the spectrogram
• keyboard letters assignment (q->C3, z->C#3, ...l->D5)

Index.html

Style

• Shade Background
• Classic black and white piano keyboard
• canvas block for the spectrogram

Body

• button to start the spectrogram
• Piano notes C3, C#3, ... D4

I Hope you will enjoy this simple Web Audio project and feel like creating your own ! :)

Jeremy Uzan IRCAM

Student of Benjamin Matuszewski & Emilie Zawadzki