This synth keyboard will produce synth sounds and effects that you can set and modify in the Tone JS library, written by Yotam Mann.
1
Add the Tone JS library inside the <head> tag of your page: <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
2
Before the </body> tag of your page, place the script that you will find before the </body> tag of this very page that you have just duplicated. Here, you will find some settings for the base synth sound that you will hear when playing the keyboard, as well as the two effects that I applied to that base synth sound. For more info about all possible settings, go to
https://tonejs.github.io/3
In Webflow designer, make a styleless list and fill it with list items (in my case: 25 list items). These list items will populate the keyboard with white and black keys.
4
Give this list this ID name: piano. You will also find this ID name in script line no. 67 before the </body> tag of your page.
5
In this same list, you can start styling your keyboard keys. I put the styles separately in a div (named "keys-styles") in the Navigator. They are pretty straightforward.
6
The keys need custom attributes for them to work, which you can set in the Element Settings (Webflow shortcut: D). Name them like so: data-note, followed by their note name, for example C3. The note names should correspond with the note names in your script before the </body> tag of your page (lines 80 - 130) and should all be in capitals.
7
Done. Publish your site to have it work. You can either click the keys, or use your computer's keyboard to play music. You can use your Shift key for the lowest octave.
Important note:
Be careful when adding or removing synth effects or changing the base synth sound, the code easily breaks if you don't know what you're doing (I admittedly encountered this quite a few times). This will cause the keyboard keys to disappear. So, if the latter happens, fix your code, or start all over.
Tone JS © 2014-2020 Yotam Mann - MIT License