Home

Welcome to the web_audio_101 wiki!

This wiki is for two things:

• noting down overall progress & design decisions
• recording pages and sites viewed.

The links can be found here.

Progress log

2014-09-30

• begin an OO refactor of the sequencer
• add jsHint and Gulp tasks to automate it, to help keep the code clean
• decide the sequencer should maintain a list of Drums, rather than strings, and to bang() them explicitly, rather than looking them up from the drums collection.
  • I'm always a little wary of this. Calling drum.bang() will be faster than looking up the drum from a collection, and then calling bang() on it. But, on the other hand, now the sequencer is explicitly consuming and using a Drum interface, which ties it to just that kind of instrument. Fine for this project, but not very general.
• realize the sequencer assumes there's always an array of arrays, and had to write code around this to support the bootstrapping process (which adds a default sequence). I'm not sure this is clean and may revisit it later.
• finally worked out that the best way to change text color in joshing reporting is to actually change the reporter. jshint-stylish uses Chalk (both by Sindre Sorhus), which writes out strings to the terminal in a range of fixed colors. In two projects now, I've found it hard to read the jshint-stylish's output against my current terminal colour scheme (roughly Solarized Dark). Editing the local jshint-stylish reporter to use chalk.white() over chalk.grey() makes the line-numbers readable. Phew!!
• 'stepDrums' == 'the list of drums at a particular step'
• 'drumSteps' == 'the list of steps a particular drum is played'

2014-09-29

• Began the wiki as a better place than the README for listing progress and links
• Begin to think about an OOJS style code-structure
• There's no formal MVC framework, but the sequence is obviously a model and the could loosely be thought of as models, too.
• There's no formal view, but the sequence buttons, time display (TBD) and controls (TBD) are a view on the sequence. The pads are views on the drums, but they're also controls (and thus, in a sense, a view) on the sequencer too. So, if the project did use backbone or angular, there would be some hairy double-model or nested-view action going on. There's no template engine and I don't want constant re-rendering/re-drawing, so there's no need for a defined View type. "Controller functions" with knowledge of the HTML can handle this functionality.
• If the drums and sequencer emit events, they can subscribe to one another's messages to perform multiple actions in response to those messages, without being tightly coupled.
  • Already using Zepto so could use its events system for this
  • Create a basic "Eventer" or "Evented" object to proxy $.on, $.off etc on the current object
  • Drums, Sequence (potentially other objects) prototypically inherit from "Evented"
  • functions acting as (and identified as) "controllers" set up the event subscriptions such that other objects/types don't need to know about each another, or about the "view". Only

2014-09-28

• draw sequencer layout
• keep the ad-hoc, imperative programming style
• add basic keyboard, mouse and touch handling
• add tooling - gulp, connect, sass, a src/build pattern
• add a sequencer and a demo sequence

2014-09-27

• initial idea
• get some sounds loaded and at least one playing back
• draw a box on the screen to represent the project
• draw a grid of "drum pads"
• (drawing here means use HTML & CSS)
• come up with the interaction design:
  • roughly a Roland TR-series style interface, but with MPC style pads, and no "drum selector" and the limited sequencer means it doesn't need so many controls
  • the pads 'light up', like a Korg/Novation or Ableton controller - a flash for hit and a constant fixed color to show the last pad hit
  • the sequencer bar shows just the hits for the last hit pad (e.g. hit the snare and the sequencer will show where in the bar other snares have been placed. Hit the rim-shot and the sequencer will changed to show rim hits
  • tap/click the sequencer buttons to add new hits for the last played pad to the sequence
  • if there's time, add tempo controls
  • if there's time, add sound mutation controls - ideally using an x-y grid and a Cavas with visualization, but seriously, that's a big ask with my current level of knowledge.