
WebAudio MIDI-fied Drum Machine - traxmaxx
http://webaudiodemos.appspot.com/MIDIDrums/index.html
======
mullr
While neat, all the web audio stuff I've seen fundamentally relies on
setTimeout() for sequence playback. This only works at all because the apis
let you schedule playback events ahead of time, against their special high
resolution timer. To see how it doesn't work, press play and then move to a
different browser tab.

The audio processing itself works fine while in the background, but the api
makes no facility at all for any sequencing or any user-supplied control-rate
data which runs as part of the audio graph. This is rather unfortunate and
makes it hard to build real applications.

If somebody knows some solution for scheduling playback events while in a
background tab, please speak up. In my own experiments, the very best I was
able to do was synthesizing control-like signals inside of a
ScriptProcessorNode. I quit before I got it to work, but that's all I could
really come up with. The other option would have been to start scheduling
500ms ahead once the tab goes into the background, but you have to know it's
coming.

~~~
jamespitts
Background: I am working on a live music competition game (with video) for
freestyle rap. We require an accurate tick in order to synchronize the beat
playback across many clients during a freestyle rap battle.

When developing client-side javascript I get the impression that time is
running on a thin sheet of rubber. I have also wanted to have a more reliable
tick but I often have to move onto other parts of what I am working on.

One useful technique is to try to create a fixed tick that all clients can
receive, at least you can use this to nail down some of the rubber sheet. I
use a shared tick emitting from the websocket server, and then calculate --
every sec -- how that differs from client time. In order to give clients a
synchronized event I "schedule ahead" using setTimeout and this client-server
time diff.

------
JonnieCache
Now somebody needs to make a 303, hook them up to each other via websockets
and we can have a banging html5 rave.

There are a couple of synth examples on the root page of that domain, just
need to make 'em scream and squelch. Easier said than done unfortunately.

------
philbarr
This is great! Here's mine:

{"kitIndex":0,"effectIndex":1,"tempo":100,"swingFactor":0,"effectMix":0.10204081632653061,
"kickPitchVal":0.5102040816326531,"snarePitchVal":0.5,"hihatPitchVal":0.5,"tom1PitchVal":0.4285714285714286,"tom2PitchVal":0.5,"tom3PitchVal":0.5,"rhythm1":[2,2,0,0,0,0,1,2,2,0,0,0,1,2,2,2],"rhythm2":[0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,0],"rhythm3":[0,0,0,2,2,2,0,0,0,2,2,0,2,0,2,2],"rhythm4":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"rhythm5":[0,0,0,2,0,1,2,0,0,2,0,0,2,0,0,2],"rhythm6":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}

~~~
jamespitts
Could you throw in a couple of CRs in that js, it makes the rest of us have to
scroll sideways! Thx...

~~~
philbarr
Sorry - have seen my mistake, but there's no Edit link...?

------
dspig
Give me a clue... I assume it only works in Chrome. Does it need a developer
build? A hidden option to be switched on?

~~~
dbattaglia
works in the latest version of Chrome on OSX for me. Unfortunately I think
this line in drummachine.js proves it wont really work in FF/IE: context = new
webkitAudioContext();

(I believe FF has a separate mozAudioContext(), cant wait till this stuff is
standard in browsers).

~~~
kevingadd
MIDI is a pretty recent addition to AudioContext so I don't know when you'll
ever see it in Firefox or Safari or anything like that. Maybe Safari will get
it faster if it's done at the webkit level and not the chromium level...

------
kevingadd
It's too bad it totally chokes as soon as the tab enters the background. I
wonder if Google's done any work to ensure it's safe to let web pages send
arbitrary byte data to MIDI devices? It seems like that wouldn't necessarily
be safe, but maybe they're filtering the data behind the scenes?

------
mrspeaker
navigator.getMIDIAccess! When did THAT get here?

~~~
gren
<http://www.w3.org/TR/webmidi/>

This is awesome!

~~~
catshirt
well, i guess this is useless now :) <https://github.com/catshirt/midi.io>

except for cross browser compatibility, which i don't particularly care about
for audio experiments.

------
deanclatworthy
This works brilliantly. You should definitely diable the effect level by
default. It sounded awful with it on

