Sequencer Concept: WAAM

I’m really inspired by the Web Audio API. Anybody on a desktop web browser can just open up their JavaScript console, give themselves some oscillators, and make a modular synth.

I’m also inspired by the web’s potential as an educational resource where you can learn by remixing other people’s work. For example, kids are learning how to code by remixing Scratch projects.

There have been attempts to create a standardized platform to share Web Audio code modules. For example,—it’s really cool! Similarly, there are application-specific sites like sccode, for people interested in sharing SuperCollider code. There are also sites that let people make music by adding a visual interface or live coding environment to the web audio api. For example, Web Audio Playground, Wavepot, Gibber. And then there are sites that just let people make music in a browser, like AudioTool and Soundation.

I want to make a website where people can not only share/remix each other’s modules through code, but also make music with them. The site’s temporary title/url is or It would serve two general audiences: people who code, and people who make music. Sometimes, these audiences overlap.

The site allows users to store and browse at least two types of data objects:

  1. Musical patterns – kind of like MIDI scores, a series of note on/off, velocity, with multiple voices/channels
    • patterns have a BPM, beat-length, tatum-length, loop on/off
    • patterns can include multiple voices
    • patterns can be programmed “live” using MIDI or ASCII. Patterns can also be programmed via a visual interface. Patterns will display in a visual interface.
  2. Synth instruments – the voices used to play back musical patterns
    • synths output digital audio
    • synths standardized constructor and methods like
      • triggerAttack
      • triggerRelease
    • synths have “public” variables that can be modified through a visual interface, or mapped to MIDI input
    • synths have authors, and contributors


  • Musical Creation:
    • Phrase – Expanded view of one voice. A place to adjust pitch as well as other synth variables like velocity, filter frequency. Useful for melodies or automating parameters.
      • Pitch can toggle between grids that represent specific keys, or all 12 tones, or no grid.
    • stravinsky_pianola2Pattern/Section – See the pattern of multiple voices that play back simultaneously. Visual only shows note on/off, rather than details about the pitch, velocity, sustain etc…but there might be a way to show the scale of one parameter using color.
      • Click/drag to toggle notes on/off
      • or edit with record mode (how to “arm” a track? Needs a button?)
      • or edit in Phrase mode
      • Click on the instrument’s name to choose a different instrument, edit the settings (with visual interface) or edit the code (with code interface)
    • Song/Score – Organize patterns as blocks.

      • Song has a master BPM, time signature and divisions per beat (tatums) which can be overridden by Patterns
      • Click to add/remove or expand Patterns

No matter which mode you are in, voices can be ‘armed’ for recording. Notes will align to the grid based on the divisions per beat (time signature/tatums). You can change instrument, edit the settings, or edit the instrument’s source code.


  • Synth / Module Code Edit View
    • live code editor lets you save drafts.
    • hit “play” to use the computer keyboard or MIDI to test the sound.

There is a lot more to figure out, like…

  • search page to browse saved Patterns and Instruments
  • user profiles

And, in the long run, the site could have more types of modules such as…

  • Effects
  • Sampler with Audio Samples
  • Generative Music Algorithms
  • Interface Designs (i.e. for Synths, for Pattern/Song view)

More ideas from in-class feedback:

  • Make it easy to import other people’s Phrases into your pattern
  • let people plug an algorithm into their Patterns
  • look to VST spec for inspiration in Synth spec

Leave a Reply

Your email address will not be published. Required fields are marked *