Play Pad is an interactive and creative website inspired by the "Drum Pad" workshop by @emmanuel39hanks. While following the workshop, I decided to add my own ideas and features to make the project uniquely mine.
Instead of a traditional drum pad, I created a musical pad featuring different piano notes, sound effects, and pre-made melodies that users can combine to create their own unique compositions. To make the experience even more interactive, I added a recording feature that allows users to experiment, save, and listen to their creations.
I also implemented keyboard shortcuts so users can play sounds using their keyboard instead of only clicking on the screen, making the experience feel more like using a real musical instrument or DJ pad. Additionally, I created an inspiration box with simple melodies that users can use as a starting point before creating their own musical pieces.
Technologies Used
HTML
Used to create the overall structure of the website, including the title, containers, buttons, and content organization.
JavaScript
The magic behind the project. It powers the sounds, recording functionality, keyboard shortcuts, tooltips, and even the dynamic background changes.
CSS (My Personal Favorite!)
For me, design is the soul of every project, and Play Pad is no exception. I used CSS to customize colors, fonts, sizes, animations, transitions, and layouts to make the project truly reflect my personality.
AI Usage
For this project, I used AI—specifically GitHub Copilot—to help organize parts of my JavaScript code and assist in fixing some coding issues during development.
Final Thoughts
Play Pad has been one of my favorite projects to build so far because I poured 110% of my personality into it. From the piano notes (my favorite instrument) to the colors, backgrounds, and overall design, every detail reflects something I enjoy.
I also incorporated ideas from some of my previous projects. For example, the toggle button feature was inspired by my project "Morning."
I hope you enjoy exploring and creating music with Play Pad as much as I enjoyed building it! <3
Try it out: https://isabellagg19.github.io/Play-pad/
Repository: https://github.com/Isabellagg19/Play-pad