I used the sound library in p5js to create a keyboard instrument for my final project. The initial idea for my project is that the user can use both of the keyboard and the mouse to play a piece of music, and while the user is interacting with the keyboard or the mouse, a random geometric shape with different colors will be generated as well. However, throughout the process of making it, I realized that it could be more user friendly if I change the mouse interaction part on canvas into a grid, so that the user will know where to click for the sound that they want.
Here is the code that I used in editor:
https://editor.p5js.org/ys4136/sketches/RIWpJhEHW
Here is the project in full screen:
https://editor.p5js.org/ys4136/full/RIWpJhEHW
The first thing that I did was to find the appropriate soundtracks that suited my project. I found this video on bilibili.com, and downloaded the zip file of the soundtracks that the video uploader has shared. Then I uploaded the soundtracks that I decided to use in my project to p5js. I used the function called preload to load the sound files in my sketch and used them by using .play(). I also used the function of mousePressed and keyPressed to play the soundtracks. Inside of the draw function, I drew the grid for the percussion instrument.
Bibliography
jonobr1. “PATATAP.” Patatap. Accessed December 14, 2021. https://patatap.com/.
【后期必备】60大类乐器音效，无套路免费分享，爱乐器爱音乐人士必入不悔！. 【后期必备】60大类乐器音效，无套路免费分享，爱乐器爱音乐人士必入不悔！_哔哩哔哩_bilibili, 2021. https://www.bilibili.com/video/BV1jM4y137wj?spm_id_from=333.999.0.0.