This interactive application is both an auditory and visual experience that was created by utilizing the Web Audio API in tandem with various animation technologies. You can control your perspective within the 3D environment, and also manipulate audio by playing the in-app synthesizer with either clicks or the keyboard. Tweak the sounds to your liking by using the on-screen effects; these interactions have also been paired up with multiple visualizations for instant feedback.
We built this app to try combine our shared passion for music and creativity in Front-End development. We knew we wanted to make a synthesizer, to manipulate audio, explore graphic design, but we really wanted to reach out of our comfort zones to make it visually stimulating at the same time. Our intention was to create a music app that didn't require any prior music experience to enjoy. Learning to incorporate GSAP and WebGl animations felt critical in keeping our new musicians engaged with the application.
- JavaScript
- HTML/CSS
- React; React Router; Styled Components
- Cypress Integration Testing
- WebGL & GSAP Animations
- Three.js; React-Three/Fiber; React-Three/Drei
- Web Audio API
- Tone.js
- Clone down this repo with
git clone git@github.com:Patfindley/codename-dolphin.git - Change into the new directory with
cd codename-dolphin/ - Run
npm ito install dependencies - Run
npm startto run the program
- Learning & incorporating new technologies into a single application
- Building a responsive React app that can be used on various devices
- Getting Tone.js in sync with GSAP + Three.js using React's state management.
- More instruments!
- More interactive UX
- Chord builder
- Arpeggiator
- Saving user presets
- MIDI integration