/MozFest2014-musicexpression-workshop

Repo for workshop on music expression on the open web at the 2014 MozFest in London.

Primary LanguageJavaScriptMIT LicenseMIT

Musical expression on the open web

Hello, you've made it to my Github repo for "musical expression on the open web", a workshop held at the 2014 Mozilla Festival in London. Here you will find everything you need to get started on the workshop challenges, creative inspiration, and helpful tools/utilities when working with the web audio api.

Workshop audience: This workshop is targeted at beginner/intermediate coders/designers/musicians. I'm assuming participants have worked in javascript before, but not necessarily with the web audio api. It also helps to have a basic understanding of audio signal routing (inputs and outputs). If you're feeling overwhelmed but are still excited to create some novel experiences usging the web audio api, please reach out to either myself, one of the facilitators, or a buddy participant in the workshop!

Tone.js: All examples use the Tone.js audio library, by Yotam Mann. Tone is intended for musician/programmers who want to use the native fabric of the web to create music, but who also want the flexibility of working with other audio/graphics generating javascript libraries.

Shortlink to this repo: bit.ly/indefinit-mozfest2014

Workshop Structure

Introduction (5-10 min)

  • About me / Studio Indefinit
  • Short history and review of current inspirations using web audio

Introduction To Workshop Themes (10 min)

  1. Buffers and samples - (Instruments that sample audio)
  2. Spatialization and convolution - (Sounds in space)

Breakout Sessions / Challenges (1hr 45 min)

  • Theme 1 - Buffers and samples (Example Simple) (Example Advanced)

    • Create a simple sound sampler that takes in audio streams from the local filesystem or spotify 30s preview api, and plays them back in unique ways.

  • Theme 2 - Spatialization and convolution Example

    • Using a balloon and your mobile phone, find a quiet space to record your own impulse response and convolve it with a sound file of your choosing.

  • Alt theme

    • If you attended the web audio visualization session yesterday, expand on your work there by adding generative audio to your build.

Resources For Workshop Themes

Code examples can be found in the examples-src/ directory. To run any web audio example locally, you'll need to use a localhost server. The simplest way to open an http server on port 8080 is to navigate into the examples directory in your terminal, and then:

python -m SimpleHTTPServer 8080

Navigate your browser to http://localhost:8080/ and you should be all set!

The official documentation for Tone.js can be found HERE.

Buffers and samples

Spatialization and convolution

  • Openairlib: Free impulse responses.
  • Video: How to record your own impulse response.
  • You might want to edit your impulse response before using in a Tone.Convolver object. If you don't already have an audio editor, I recommend the free and open source Audacity.

References & Inspiration

Note: This is not an exhaustive list of the interactive music experiences and production tools available on the web. If I've missed anything you think NEEDS to be here, send me a message or tweet @Studioindefinit

Experiences:

  • Plink: A multiplayer musical experience for the web.
  • ToneCraft: A web audio and WebGL sequencer (chrome experiment).
  • PollySynth: a multiplayer musical game. Users can control their synthesizer/avatar with their mobile device and a websocket. Created by Secret Future.
  • Over The Tiny Hills: An interactive music experience by Ultranoir
  • US Open Sessions: A data sonification project by IBM and James Murphy using the web audio api.
  • Web Audio Demo List: a running list of demos using the web audio api.
  • Pouet.net: javascript demos (not all audio).
  • Sine City: 1st place demo from this year's DemoJS in Paris. Sourcecode and info HERE.
  • Floradrift:
  • Soundscaper: Soundscaper is an online ambient soundscape / drone toy. (webkit only)

Tools:

  • Tone.js: A web audio framework for creating interactive music in the browser.
  • P5.sound: The web audio api module for P5.js
  • LiveCoder: A browser environment for coding live javascript. Works with web audio and graphics programming.
  • Gibber: A live coding environment for web audio and GLSL. Gibber.p5.js: A Gibber plugin for P5.js
  • ChucK js: A javascript port of the ChucK audio programming framework
  • Wavepot: An audio programming environment for the web.
  • Lissajous: A web audio library that relies heavily on sample buffers. I really love the simplicity of this library and how easy it is to build beautiful pieces of music in a short period of time. Here’s a demo video using just a web console.
  • Teoria.js: A web audio library for music theory and composition.

A note on source files in this repo: