Over the past few months, I have spent some free time developing Dittytoy: an online platform that allows you to create music using a minimalistic javascript API. All music on Dittytoy is generated entirely in code. So don’t expect easy-to-use audio nodes to connect with virtual wires or a graphical user interface that allows you to define patterns easily.

The API syntax of Dittytoy is loosely based on the syntax of Sonic Pi. Please have a look! Read the documentation first, look at the example ditties and start writing your own ditty here.

The Importance Of Beta Testing

Before working on Dittytoy, I had no experience with code-based music creation or DSP. My musical adventures on the computer were limited to some simple tracks I created with fasttracker in the distant past. Fortunately, I got help from two excellent beta testers: athibaul and srtuss. They gave me valuable feedback during the development of Dittytoy and made ditties that I never thought possible in real-time in javascript.

And to show what they made and what is possible, here are two ditties. I have embedded the two ditties in this page, so click the play button and marvel at the power of javascript in the hands of a skillful person.

Vocoder Puccini

The first ditty is a vocoder singing the aria “Nessun Dorma” from Puccini’s opera “Turandot” by athibaul. It features a vocoder and a reverb effect.

techno beat 1

The second ditty is a cool techno beat by srtuss that uses a shared filter for compression.

There are already many more ditties to be found. Look here for the most loved ones.

More Toys

Dittytoy is not my first hobby project :) Previously, I also made these toy projects:

  • Turtletoy (blogpost)
    Turtletoy allows you to create generative art using a minimalistic javascript Turtle graphics API. You can only create black-and-white line drawings on a square canvas. By offering a very restrictive environment, we not only hope to stimulate creativity, we also make sure that the turtles can (at least theoretically) be plotted using a simple plotter.
  • Oneshader
    OneShader is an online tool for creating and sharing WebGL fragment shaders. You don’t have access to 3D models, textures, buffers or any other (external) resources, so it’s just one fragment shader and your imagination. 

Similar posts

If you like this post, you may also like one of my other posts:

Tagged on: