Skip to content
Live coding music with WebAudio, WebMidi & ToneJS
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Live coding music with WebAudio, WebMidi & ToneJS

This is a musical live coding environment built for a talk at DevFest Toulouse 2019 and the source code used for the talk. The talk was also recorded (in French).

The goal of this talk is to walk the audience in 45 minutes through the concepts of WebAudio and ToneJS and go from a raw oscillator producing a sine wave to a complete song with drums, bass line, pad and lead melody and effects that can be tuned live with a MIDI controller.

Challenge accepted, it worked 🎶😊

The editor used is Monaco editor, the embeddable version of VS-Code's editor. So you have all the nice syntax verification and code completion features.

How to use it?

You can head to and start live-coding/playing! Be patient though, the editor is a bit big and takes time to load.

To run locally, run npm run build && npm run serve: it builds to the docs directory and serves it on http://localhost:8080/

If you want to tweak the live-coding environment's code (not the music code, use the live-coding environment for that), run npm run serve-dev: it starts the live-reloading Webpack server on http://localhost:8080/

I'm in a hurry! What does it sound like?

A teaser for the talk and the final track are on YouTube. If you understand French (or just want to follow the demo), watch the talk.


Apache Licence 2.0

By contributing to this repository you implicitly accept your contributions to be licensed under the Apache License 2.0

You can’t perform that action at this time.