livecoding-webaudio-tonejs

livecoding-webaudio-tonejs copied to clipboard

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 https://swallez.github.io/livecoding-webaudio-tonejs/ 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.

License

Apache Licence 2.0

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