grid

Length
Beats per bar
Split beats into

drum kit

lead

bass

scale

tuners (deepdrum)

tempo

temperature

seed

swing

swing sub

tuners (deeparp)

temperature

arp length

midi
piano
song
settings

patterns

beta

Deep Drum & Deep Arp

created by gogul ilango using google magenta's drumsrnn, improvrnn and with ❤️ for music & ai.


Note: Please use Google Chrome as the browser to play this application. Other browsers may or may not be supported. Also, kindly use an Android device or laptop or desktop for best experience. Other devices (Apple) may or may not be supported.

A little intro

I'm one of those guys who love to create applications using code, art and music! Four years back, I was composing and producing music using DAWs such as Nuendo and FL Studio. During my masters, I learnt about Deep Learning for Computer Vision and Natural Language Processing. At that time, I stumbled upon the amazing Google's Magenta team where there is research happening on applying Deep Learning for Music. That's the point in time when I realized the power offered by Deep Neural Networks for Music. After that, I have been following their blog posts and projects created using Magenta in GitHub and CodePen.

Awesome Magenta!

I loved the concept behind Google's Magenta team.

When a painter creates a work of art, she first blends and explores color options on an artist’s palette before applying them to the canvas. This process is a creative act in its own right and has a profound effect on the final work. Musicians and composers have mostly lacked a similar device for exploring and mixing musical ideas, but we are hoping to change that - Read more

After going through Google's Magenta projects and blog, I came to know that Magenta.js exist! As I have experience in using full-stack web development tools, I decided to make my hands wet on designing, coding and developing a simple drum machine that is interactive, fun-filled, easy to use and could assist a composer or an artist with rhythm.

What I did?

I checked out few existing amazing Magenta demos, projects in GitHub related to Music and decided to code this DeepDrum using Vanilla Javascript (no framework used) so that I could learn the underlying stuff happening in JS! This interactive demo was created using Magenta.js, Tone.js, TensorFlow.js, NexusUI and inspiration from @teropa & @jake_albaugh.

I have used Google Magenta's DrumsRNN to generate continuous drum patterns based on your input inside a seed limit, and used Google Magenta's ImprovRNN to generate continuous arpeggio patterns based on the scale, mode and relative chord number you choose in the arp box.

Instructions

There are 5 boxes in DeepDrum.

  • Top Bar
  • Drum Sequencer
  • Arpeggiator/Piano
  • Timeline
  • Control Box

Top Bar

  • Toggle between MIDI controlled Piano or click/touch controlled Piano.
  • Toggle between DeepArp (generated by Google Magenta's ImprovRNN) or Piano (that you can play).
  • Toggle between Pattern or Song mode.
  • Settings button to change different parameters.

Drum Sequencer

  • Patterns tab inside the drum sequencer is used to create multiple patterns based on your seed limit.
  • You can add a pattern using + button provided in the patterns box.
  • Drum sequencer has 9 drumkit samples namely kick, snare, hihat-closed, hihat-open, tom-low, tom-mid, tom-high, clap and ride.
  • You can play any one of the above samples by clicking it's button.
  • You can change the volume of the sample using the dial provided for each sample.
  • You can manually turn on/off any step buttons of any sample anytime.
  • You can change the tempo of the pattern/song using tempo dial inside settings.
  • You can change the weirdness of the patterns generated using temperature dial inside settings.
  • You can change the seed limit of your inputs in drum sequencer using seed dial inside settings.

Note: The seed limit is constant for all the patterns you create.

Arpeggiator

  • To generate arpeggios based on the scale and mode that you have selected in settings, Google Magenta's ImprovRNN generates arp patterns.
  • You can click on add or remove buttons provided to generate different arp patterns and sync it with DeepDrum.
  • You can click on the violet button to pause the arpeggio patterns to make interesting melodic patterns which is synced with DeepDrum.
  • You can change the arpeggio pattern length in settings.

Piano

  • To quickly play melodies on top of deepdrum generated drum beats, you have the piano.
  • You can play the piano by clicking the keys, if midi toggle is turned off.
  • You can play the piano using a MIDI controller, if midi toggle is turned on.

Timeline

  • You can add multiple patterns generated by deepdrum in the timeline
  • You have two buttons in the timeline - add and clear.
  • You can add any pattern that is enabled in the application inside the timeline using add button.
  • You can clear all patterns in the timeline using clear button.
  • You can remove a pattern from the timeline using x button in each pattern inside timeline.

Control Box

  • You can click on regenerate button to make the deep neural network generate patterns for you!
  • You can click on play button to play either song or pattern.
  • You can click on record button to record either song or pattern.

YouTube video - here.
Code - here.
Blog Post - here.
#MadeWithMagenta. Back to Blog