
Tone.js – A framework for making interactive music in the browser - tomcam
https://github.com/Tonejs/Tone.js
======
nspeller
I used Tone.js to create my music theory website
[https://www.lightnote.co/](https://www.lightnote.co/)

Using recordings from my guitar (of each and every note) I was able to build
an interactive fretboard that could play guitar tabs/chords. Also the
Transport API made it simple to build a drum looping machine very quickly.

Ableton has built something similar, also using Tone.js:
[https://learningmusic.ableton.com/make-beats/make-
beats.html](https://learningmusic.ableton.com/make-beats/make-beats.html)

Performance on mobile leaves a lot to be desired. I found there was
considerable lag.

~~~
malikNF
Just tried [https://www.lightnote.co/](https://www.lightnote.co/) . Thank you
for making it, I really love it.

~~~
cyberferret
+1 This is a Fabulous site. I've been playing guitar and keyboards for over 30
years, and I just learned so many new things about music theory from your
site. Great work, and I shall spread this around to anyone I know who is
learning music theory. Love your work!

------
krrishd
One interesting thing to me about Tone.js has always been that their
“Transport” API is a more reliable interval/timer tool than any of the native
JS APIs or even libraries/polyfills designed around more accurate interval
timing. I’d almost be surprised if I wasn’t wrong about this but I searched
and couldn’t find anything quite comparable.

~~~
pierrec
It has sample-level precision, just like the Web Audio API provided by the
browser (which is what's used under the hood). It's pretty much independent of
non-audio time APIs.

~~~
krrishd
Interesting, makes sense. I wonder — is setInterval not as precise because it
doesn’t really need to be (and thus it’d be a waste of complexity to be that
precise)?

~~~
fenomas
It's not that Tone is more precise than setInterval, it's that the web audio
APIs underneath are precisely scheduled, and Tone provides an interface to
them.

That is, if you set up a Tone transport to fire events every 100ms, it's not
like your event handler gets called _precisely_ 100ms later. Rather, it gets
called early - say 85ms later - with a parameter saying "hey that event you
wanted is precisely 14.7803ms away". Then you can call an API saying "okay,
play a tone 14.7803ms from now", and Tone passes that along to web audio, and
the end result is that your note plays with sample-level precision.

But if you used Tone's transport to do something other than calling web audio
APIs it wouldn't be any more precise than setInterval. (IIRC Tone actually
uses setInterval to fire its events.)

~~~
barryhoodlum
[https://www.html5rocks.com/en/tutorials/audio/scheduling/](https://www.html5rocks.com/en/tutorials/audio/scheduling/)
is a deeper dive into how it works.

------
halldorel
Tone.js is such a great framework and fun to work with! I was incredibly quick
putting together a generative music piece, especially because the online docs
for Tone.js are the best I’ve worked with. Would love to play a lot more
around with it

(listen at: [https://pocoapollo.hdor.is](https://pocoapollo.hdor.is))

------
gabergg
I've really enjoyed working with Tone.js! Many of Songcraft's
([https://songcraft.io](https://songcraft.io)) audio features are powered by
Tone.js. It's been a great way to manage loops, samples, etc. It makes it
quite easy to do things like playing notes or chords in time with a looping
metronome. Generally really nice for managing a global audio track with
volume, mute, etc as well.

------
sumitsrivastava
We used tone.js to create
[https://musicblocks.sugarlabs.org](https://musicblocks.sugarlabs.org)

Tone.js is really good at doing things related to music.

We were able to build a scratch type programming language for music, so that
kids could learn programming and music at the same time.

------
paddy_m
The examples were a lot of fun to play with. Nice work.

I was thinking earlier today of creating an F1 engine note simulator. I would
want to play with the number of cylinders, v angle, crank offset (v8 normal
crank/180 crank) and maybe some kind of exhaust system variables (tuned
length, crossover pipe), and of course RPM. I don't know where to start, could
you point me at the type of programming I would want to look at to figure out
how to do this?

Here is an f1 car engine playing God Save the Queen [1], sounds atrocious, but
still cool.

[1] [https://youtu.be/XRXwWbo_mX0?t=58](https://youtu.be/XRXwWbo_mX0?t=58)

~~~
dspig
I can see 3 ways to approach it, but they are all more "sound design" or
acoustics than programming.

1) Process recordings of real F1 engines at fixed RPMs to seamlessly go from
one to another.

2) Approximate the sound sources and what happens to them on he way to the
ear, so: oscillators and noise generators passing through filters and delays
to modify the spectrum.

3) A real attempt at modelling the sound sources and the acoustics of the
enclosures and pipes in terms of "what happens to the air pressure variations
here".

Or use something already existing:
[https://www.krotosaudio.com/igniter/](https://www.krotosaudio.com/igniter/)

------
hellofunk
I’ve compaired this with Howler.js and couldn’t easily see the observable
trade-offs between these two. I guess I’d have to actually implement something
with both of them to find out. Howler has a neat concept of audio sprites and
the library seems more popular for some reason.

------
kylek
Neat! I was looking into wavTones[0] recently but will have to give this a
look. (A comparison might be nice)

[0]
[https://www.wavtones.com/functiongenerator.php](https://www.wavtones.com/functiongenerator.php)

------
minism
This is a really awesome framework. Working on a generative chord progression
project right now using it (Also my first foray into typescript -- looks like
the type definitions for Tone.js are a bit out of date).

------
stevehiehn
TONE.JS is really fun. My hobby project uses RNNs to generate MIDI parts and
play them back through TONE.js :
[http://treblemaker.ai](http://treblemaker.ai)

------
increment_i
Have been following this library for years. Love it. Favourite projects were
some personal desktop apps I did with it in Electron to mangle samples in cool
ways for my own music projects.

------
cazum
I used this to prototype algorithms for a polyrythmic midi sequencer I'm
working on. It's really a dream to use. If only using midi on low end hardware
was this easy.

------
ArtWomb
Very cool. Look forward to playing with it this weekend ;)

Regarding WebRTC. Combined with net latency. Can we build an online "jamming"
demo?

------
souenzzo
clojure project from 2015
[http://ctford.github.io/klangmeister/](http://ctford.github.io/klangmeister/)

