I am mostly inspired by the works of Tero Parviainen and Monica Dinculescu.

The idea for my project came from the architecture of MusicVAE and how new samples are requested from it, similar to the visual stack of sequences in Infinite Drums.

What it does

Infinite Drums samples drum sequences using Magenta.js from the MusicVAE model. To give the visual impression of infinity, a stack of drum sequences is shown in 3D. The user can interact with the project in two ways:

  1. Via "Next" button: Pressing the "Next" button plays back a new drum sequence from MusicVAE and visualises the pattern
  2. Via mouse drag & zoom: The user can rotate the 3D scene and zoom in and out

How I built it

The drum sequences are generated by Magenta.js using the MusicVAE model with "drums_2bar_lokl_small" checkpoints. For music playback I use Tone.js with custom audio samples, played back using a Tone.Players instance. To glue the sounds together I chain the output of the players into an equalizer, as well as a reverb. For the visualisation I use cables, a visual programming editor for WebGL. In cables I render the current sequence of drums as spheres. To visualise the infinity of the latent space I also render some more (19.200) spheres in the z-direction.

Challenges I ran into

I ran into various challenges, which I have partly solved. Some issues need to be addressed after the hackathon.


  1. Communicating with a cables patch: cables was used for the visualisation. Using custom functions I communicate between my regular JavaScript code and the cables patch.
  2. Finding out which note pitches belong to which instrument. I plan on publishing a small library to make this task easier in the future.


  1. Keeping audio and video in sync: I followed the Tone.js recommendations, but it seems like I did something wrong in drawing synchronous to the audio
  2. Using a bundler: Currently cables is not compatible with ES6 or CommonJS module bundlers. To save bandwidth I have to find a better solution how to bundle all code and minimise the assets.
  3. Loading indicators and handling: It should be indicated when assets are being loaded and when it is ready to be used
  4. Sometimes drum samples seem to only contain one bar, so half of the sequence is empty. I should filter these out or repeat them to get rid of the silence.
  5. Animations between states: Initially I planned on animating drum sequences from the infinite stack to the current sequence being played. There are various visual tweaks which would improve the overall project, but would require more time.

Accomplishments that I'm proud of

  1. Playing music from a Neural Network. I wanted to build something using Magenta.js since I first read about it. Now I finally did :)
  2. Finishing an entry
  3. Visual appearance

What I learned

  1. How to get samples out of a MusicVAE model
  2. How to map note pitches to instrument names (for example "Kick Drum")
  3. How to display a lot of spheres in cables using WebGL instancing

What's next for Infinite Drums

  1. There are a lot of possible performance improvements
  2. Better visual + audio sync
  3. Mobile optimisation
  4. Audio samples: Currently I am using wav files. I could save bandwidth by using mp3 / ogg (for Firefox). Also I would like to check out sound fonts.
  5. Bundling: Find a way to use a module bundler with cables
  6. Try to find better samples
  7. Add option for MIDI out, so the project could be used together with other audio tools

Built With

  • cables
  • magenta
  • magenta.js
  • musicvae
  • tone
  • webaudio
  • webgl
Share this project: