Hold Tight
Your personalized Road to Code is ready to view


PGB-VSU (polyphonic game board virtual sampling unit) is a web tool that allows for visual audio sequencing and sample editing.

In PGB-VSU users can dynamically sequence 3D music samples on a pitch-sensitive board. A number of editing features, such as drag-and-drop and an undo button, allow users a high degree of flexibility as they create their compositions. Users can also 'paint' on effects to their samples in the form of filters. Finished patterns can be saved, loaded, and played again or shared with friends.The grid itself also serves as an interactive part of our application, featuring zooming and panning. On-click orbit controls also give our users the ability to view their compositions in 360 degrees.

In order to build this project we needed to integrate several different libraries as seamlessly as possible. One of the challenges of this project was evaluating the fit and potential of these libraries, some of which were new and untested. For our front end we utilized React and React-Redux, but we also used a framework called React-Threejs, which is a new library that integrates React and three.js. To render audio we implemented React-Audio and Tone, and we used Firebase and Express for our backend.

PGB-VSU is a one of a kind application that can be used broadly for entertainment, education, and with some investment, professional audio visualization creation. Using samples over synthesized sound opens the door to wider creative use. Musicians can use PGB-VSU to create polished visualizations based on remixes of their own samples or stems. For beginners, the visual component makes sequencing music approachable and fun.

Team Members
  • Freda Ding, Tatiana Sutherland, Annie Won, Nisreen Al-Basha

Learn more about our fullstack JavaScript curriculum

Learn More