Collaborative Beat Sequencer

Muziek gebeurt nooit alleen, het is meestal een groepsinspanning. Zelfs zogenaamde "solo-artiesten" schrijven en produceren samen met een groep mensen liedjes om er grote hits van te maken. De meeste muziekproductiesoftware is echter ouderwets en niet op een goede manier. Grote desktoptoepassingen domineren het veld en grote bestanden moeten worden gehost op cloudopslagservices zoals Dropbox. Alle partijen werken er afzonderlijk aan en moeten wachten tot iemand anders klaar is en hun onderdeel naar dropbox heeft geĆ¼pload, of ze moeten fysiek bij elkaar in de buurt zijn. In dit project is een tool ontwikkeld die real-time samenwerking in muziek mogelijk maakt.

Idee

De school bracht ons op het idee van een samenwerkende beatsequencer. Het project moest de Google-documenten voor liedjes worden. De Garageband-app is als inspiratiebron gebruikt voor dit project.

Uitdagingen

Door gebruik te maken van JavaScript hadden we te maken met de event-loop. Als we geluiden wilden afspelen, zou de timing niet kloppen. RequestAnimationFrames werd gebruikt als oplossing voor dit probleem. Toch zorgde dit voor een kleine vertraging, maar dit was te accepteren. Een toekomstige oplossing zou kunnen zijn om de Web Audio API te gebruiken.

Bij aanvang van dit project was niet bekend dat de MERN-stack nodig was. We zijn begonnen met alles te integreren in Firebase. Dit werkte heel goed en voorzag ons ook van realtime synchronisatie en offline werken. Uiteindelijk werd besloten dat hierdoor de complexiteit van het project niet hoog genoeg was en een omschakeling naar de MERN-stack was vereist. Dit resulteerde in veel refactor werk.

In eerdere projecten heb ik geleerd om UML-diagrammen te gebruiken. Met dit project besloot de school een andere route te gaan en het C4-model te gebruiken. We moesten in deze nieuwe manier van documentatie duiken en het was uiteindelijk makkelijker te gebruiken.

collaborators

  • Thomas Brandhorst
  • Daniel Wildschut
  • Robin van der Voort

Technologieƫn

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