Short Background

Recently, I’m very interested in developing web applications.
I usually make things more physical, it’s sometimes struggling to design experience to the people that I made.
I didn’t even know what web application can make deeply for now but I feel the current web experience is just not happened only your smartphone or laptop.

It will be connecting more seamless a lot of devices, environmental and it will expand our embodiment experience too.

That is why as an interaction researcher I thought it’s time to getting down to make web application!
Also, making music with AI is still an important topic for me and there is a myriad of application are accessible in javascript.

Coincidently, I found this hackathon event and it looks perfect timing to motivate me 😉
So I decided to apply this opportunity and think about what we can do with interactive web applications.


— Getting Start with Basic Tone.js —


Initially, I joined @teropa‘s workshop which gives a lecture on how to use Tone.js and Magenta.js.

This is my first time playing with Tone.js so it was really fun and learned a lot from that.
If you’re not familiar with Tone.js, here is the basic document for the developer.

Quick Explanation of Tone.js

Tone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers creating web-based audio applications. On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for synchronizing and scheduling events as well as prebuilt synths and effects. Additionally, Tone provides high-performance building blocks to create your own synthesizers, effects, and complex control signals.

All information we need is just you can see that API reference but here is really fundamental tips where I started.
First of all, I learned about “Player function”, “Loop function”, “Filter” and “Part function”.

  • Player function is for an audio file player with a start, loop, and stop functions
  • “Loop” creates a looped callback at the specified interval. The callback can be started, stopped, and scheduled along the Transport’s timeline.
  • “Filter” is a filter which allows for all of the same native methods as the BiquadFilterNode. Tone.Filter has the added ability to set the filter rolloff at -12 (default), -24 and -48.
  • “Part” is a collection ToneEvents which can be started/stopped and looped as a single unit.
You can check an initial example of a simple drum sequence demo.


You can check the source code form glitch “View Source”.
As I mentioned, The most important parts are you should know how it works of the basic function of Tone.js.
I created “Player Function” for loading audio sample like below.

let drumPlayers = new Tone.Players({
kick: 'input some url for loading audio sample',
hatClosed: "input some url for loading audio sample",
hatOpen: "input some url for loading audio sample",
snare: "input some url for loading audio sample",
tomLow: "input some url for loading audio sample",
tomMid: "input some url for loading audio sample",
tomHigh: "input some url for loading audio sample",
ride: "input some url for loading audio sample",
crash: "input some url for loading audio sample",

Then I used “Part” function for making loop.

let drumPart = new Tone.Part((time,drum) =>{
  // kickPlayer.start(time);

drumPart.loop = true;
drumPart.loopStart = 0;
drumPart.loopEnd = '2m';

Advanced Example

I learned some advanced examples of Magenta.js which can generate the melody, drum pattern etc though using AI.

These are a bit hard to explain what is going on but you might get some tips from 🙂


These are also things I’m curious recently

And more come this year! 😉

Leave a Comment

Your email address will not be published. Required fields are marked *