About Dittytoy

Dittytoy is a platform for creating code-driven music using JavaScript. Instead of arranging samples on a timeline, you write code that generates sound. This lets you create music that evolves, responds to parameters, or never repeats. Everything runs in your browser using the Web Audio API.

The API syntax is loosely based on Sonic Pi. You can find the full Dittytoy API Reference here.

Every ditty on this site has its source code visible. See a sound you like? View the code and learn how it works. Check the license before publishing a remix.

If you don't like reading documentation and want to see sample code, these ditties give a good overview of what's possible.

Dittytoy in education

Dittytoy can be a useful tool for learning. Writing code that produces sound gives immediate, tangible feedback. You hear your mistakes and successes right away. This makes abstract concepts like loops, functions, and timing more concrete.

The platform touches on music theory, signal processing, and programming simultaneously. Students can start simple —a few notes in a loop— and gradually explore synthesis, filters, and generative composition as they grow more comfortable.

I would love to see Dittytoy used in educational settings. If you are a teacher or educator interested in using Dittytoy in your classroom, please reach out. I am curious about what would make the platform more useful for teaching, whether that's better documentation, specific examples, or features I haven't thought of.

A note on AI and creative coding

Dittytoy is a creative coding platform where the joy lies in crafting ditties yourself. While it is perfectly fine to ask an AI for help understanding a concept or debugging an issue, please do not use AI to generate entire ditties and publish them as your own work.

This undermines what makes this community valuable: the ability to learn from each other's hand-crafted techniques. When you browse ditties here, you should be able to trust that you are seeing genuine human creativity and problem-solving. Code worth studying and learning from.

Ditties that appear to be AI-generated may be set to Unlisted.

Software requirements

To run Dittytoy it is recommend that you use the latest version of one of the following browsers:

• Chrome: http://www.google.com/chrome
• Microsoft Edge: https://www.microsoft.com/en-us/windows/microsoft-edge
• Safari: http://www.apple.com/safari
• Firefox: http://www.mozilla.org Note: the performance of Dittytoy's javascript in Firefox is very slow. Should you experience stuttering, please use Chrome.

Support

You can support the development of Dittytoy by giving feedback on how to improve this website. Feel free to report bugs, suggest improvements or request new features.
If you want, you can also buy me a coffee. Donations are highly appreciated and will be used to cover hosting costs and to buy (more) coffee.

Credits

Dittytoy is created by Reinder Nijhoff (@reindernijhoff.net).

Very special thanks to athibaul (youtube channel), srtuss (youtube channel), Mattijs, Jurgen and markknol for beta testing during the development of Dittytoy and providing valuable feedback.

• Dittytoy is largely based on code developed for Turtletoy, an online tool to create hand-coded art using a minimalistic javascript Turtle graphics API.
• Dittytoy is build using Bootstrap.
• MP3 export is implemented using lamejs by Alex Zhukov.
• The cover art is generated using stable diffusion.
• Thanks to Íñigo Quílez and Pol Jeremias for creating Shadertoy, the inspiration behind Dittytoy.