WebAudio MIDI-fied Drum Machine | Hacker News Reader

WebAudio MIDI-fied Drum Machine

webaudiodemos.appspot.com

43 pointstraxmaxx16 comments

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.

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.

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.

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]}

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

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

Drum and bass!

{"kitIndex":4, "effectIndex":15, "tempo":176, "swingFactor":0, "effectMix":0.326530612244898, "kickPitchVal":0.5, "snarePitchVal":0.5, "hihatPitchVal":0.6122448979591837, "tom1PitchVal":0.8571428571428572, "tom2PitchVal":0.7551020408163265, "tom3PitchVal":0.6734693877551021, "rhythm1":[2,0,0,0,0,0,1,0,0,0,2,0,0,0,0,0], "rhythm2":[0,0,0,0,2,0,0,1,0,1,0,0,2,0,0,0], "rhythm3":[2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1], "rhythm4":[0,0,2,0,0,0,0,0,0,0,0,0,0,0,1,0], "rhythm5":[0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0], "rhythm6":[0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0]}

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

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).

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...

Now I've tried normal and dev builds, OSX and Win7, none of them list my MIDI devices. Must still be a bit too cutting edge for me!

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?

navigator.getMIDIAccess! When did THAT get here?

http://www.w3.org/TR/webmidi/

This is awesome!

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.

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

Reply on news.ycombinator.com