Collaborative Beat Sequencer

Music never happens in a vacuum, it is usally a group effort. Even so-called "solo-artists" write and produce songs together with a group of people in order to have them become big hits. However most music production software is old-school and not in a good way. Large desktop applications rule the field, and large files need haring on cloud-storage services like Dropbox. All parties either work on it seperately, having to wait until someone else has finished and uploaded their part to dropbox, or they need to be physically near each other. In this project a tool was developed that makes real-time collaboration in music possible.

Idea

The school provided us with the idea of a collaborative beat sequencer. The project needed to become the google docs for songs. The Garageband app was used as inspiration for this project.

Requirements

For this project the MERN stack was required with websockets. Some testing should be done to prevent race conditions from happening.

Challenges

Making use of JavaScript meant that we had to deal with the event loop. If we wanted to play sounds the timing was going to be off. A solution with the use of RequestAnimationFrames was used.

Still this resulted in a slight delay, but manageable. A different solution could be to use the Web Audio API.

At the beginning of this project it was not known that the MERN stack was required. We started off implementing everything directly in Firebase. This was working really well and also provided us with realtime sync and offline working. In the end it was decided that it would make the project too easy and a switch to the MERN stack was required. This resulted in refactoring work.

In a previous project we learned how to use UML diagrams. With this project they decided to go a different route and use the C4 model. We needed to dive into this new way of documentation and in the end found out it was easier to use.

collaborators

  • Thomas Brandhorst
  • Daniel Wildschut
  • Robin van der Voort

Technologies

  • JavaScript
  • Firebase
  • Howler
  • React
  • Bootstrap
  • Redux
  • WebSockets
  • MongoDB
  • Express