Tone.js – A framework for making interactive music in the browser | Hacker News Reader

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

github.com

264 pointstomcam25 comments

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.

Just tried https://www.lightnote.co/ . Thank you for making it, I really love it.

+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!

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.

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.

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.

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.

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)?

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.)

https://www.html5rocks.com/en/tutorials/audio/scheduling/ is a deeper dive into how it works.

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)

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.

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.

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

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/

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

Ha!

Red Bull did one too, it sounds a bit better: https://www.youtube.com/watch?v=gZIUGreqrCY

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.

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

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).

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

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.

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.

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

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

clojure project from 2015 http://ctford.github.io/klangmeister/

Reply on news.ycombinator.com