top | item 19512922

Tone.js – A framework for making interactive music in the browser

264 points| tomcam | 7 years ago |github.com

25 comments

order
[+] nspeller|7 years ago|reply
I used Tone.js to create my music theory website 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

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

[+] widdershins|7 years ago|reply
I've been looking at your site and I like your music theory lessons a lot. Great work!

One request - could you use a slightly longer attack on your 'basic tone' sound in the lessons? Currently there's a harsh click each time the tone plays. Just 0.05 seconds of attack would still give a 'punchy' sound, without the clicks.

[+] elialbert|7 years ago|reply
I made a toy project with tone.js as well and found the same mobile performance issue - http://bloop.elialbert.com

is unusable in an iphone 10 and perfectly fine in chrome desktop. if anyone knows how to fix that I'd love to hear.

[+] krrishd|7 years ago|reply
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|7 years ago|reply
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.
[+] halldorel|7 years ago|reply
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)

[+] gabergg|7 years ago|reply
I've really enjoyed working with Tone.js! Many of Songcraft's (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|7 years ago|reply
We used tone.js to create 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|7 years ago|reply
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

[+] dspig|7 years ago|reply
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/

[+] goodmachine|7 years ago|reply
This is a wildly ambitious starter project! There are a huge number of mutually interacting non-linearities in an engine that you can only model with intense effort. I guess you need to read up on synthesis before diving into F1 mechanics.

For plausible approximations, which is the right way to go, you should check out PureData or (better) MaxMSP. See this tutorial by Andy Farnell

https://www.youtube.com/watch?v=9J7oqfnoObA

[+] hellofunk|7 years ago|reply
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.
[+] minism|7 years ago|reply
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).
[+] increment_i|7 years ago|reply
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|7 years ago|reply
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|7 years ago|reply
Very cool. Look forward to playing with it this weekend ;)

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