My friend Danny introduced me to Bytebeat music. There's a great introduction here. The short version of it is you write a function that given only 't' as input produces music.

Danny also introduced me to glitch machine which is cool iOS app for playing with Bytebeat music. The article above also links to a couple of webpage versions, one in JavaScript and one in Flash.

I like that you can edit in real time in glitch machine as the music a playing. On the other hand, while the retro input system is cool it can be a little too different. Unfortunately the JavaScript example does not have live editing which makes it less fun.

So, inspired by Mr.Doob's GLSL Sandbox I whipped up a live editing HTML5 Beatbytes page.

A few options:

1) You can choose between floatbeat and bytebeat.

Bytebeat expects your output is an unsigned 8bit value. (0 to 255). floatbeat assumes your output is −1.0 to +1.0. I started with floatbeat since the various JavaScript audio APIs want floats. It works and I'm sure there's some awesome things you can do since it gives you access to more math but even though it worked and even though I could get bytebeat music to work as floatbeat music with just a few tweaks I ended up feeling like I couldn't very well call it bytebeat if I only had floatbeat.

2) You can choose between infix and postfix expressions.

I don't really know which is more common but since there are lots of samples in each I wanted it to be easy to copy and past them in regardless of where they came from.

3) Sharing beats.

The code is saved to the URL as you edit so you can copy the URL and send it to someone to share songs. Here's a few to get you started.

• glitch machine
• octo
• seargeant
• splatterpiller
• ????1
• ????2
• ????3
• ????4
• ????5
• ????6
• kb 2011-10-04
• ryg 2011-10-10
• blueberry 2011-10-05
• mu6k
• mix 2 channels
• quiddit
• rythymgrind
• robot toothbrush
• number machine
• starlost
• guitarhead

So far it seems to work on Chrome and Firefox, even Firefox on Android and iOS 6+ although it probably needs some TLC to be usable on such a small screen.

This example shows that by using the comma operator you can pretty much write arbitrary code.

http://goo.gl/IZVBS

This example shows using the mouse position as input.

http://goo.gl/t50LG

Sometimes just making noise can be fun

http://goo.gl/Fm6Gc

This example shows using the tilt as input though it only works if you have a machine and browser that supports the device orientation API.

http://goo.gl/yMFNw

The project is hosted on github.