Maciej Korsan

DiscoJS

half talk, half disco: the Web Audio and Web MIDI APIs at meet.js in Białystok

  • web,
  • visuals,
  • sound,
  • talk
Title slide: disco.js in red, with “meet.js Białystok, special summer edition 2017” below and a small drawing of a dancing figure

DiscoJS is a talk and a set of demos I made for the summer edition of meet.js in Białystok (meet.js++) on 26 August 2017. The pitch went: “Half talk, half disco. Forget new frameworks, perfect code and standards, and loosen up.” The point was to show what you can do with sound using nothing but the browser.

What was in it

The slides doubled as working JavaScript demos:

  • the <audio> element and the simplest ways to control it from JS
  • the Web Audio API: the audio context, oscillators, gain, and wiring nodes into a graph from source to output
  • timing – why a melody should be scheduled against audioContext.currentTime rather than setTimeout
  • a frequency analyser that changed the colour and height of bars on the page in real time, including from microphone input
  • the Web MIDI API – a MIDI controller triggering samples in the browser
  • and to finish, the disco itself: a beat built from samples, a webcam feed and visuals

The code is on GitHub and the slides are on slides.com.

Afterwards

DiscoJS later returned as one of the demos in my talk Frontend is an art, played from a Launchkey Mini keyboard.

Sources

github.com/maciejkorsan/discojs