Tabletone

Today I'm releasing Tabletone, a Javascript library for making live looping music grids like the above. It's super easy to use, you just write some custom HTML tags and lay it out the exact same way as a table. Here's the markup for that grid:

<tt-table>
  <tt-row>
    <tt-cell pulse src="reapm-01.mp3"></tt-cell>
    <tt-cell pulse src="reapm-02.mp3"></tt-cell>
    <tt-cell pulse src="reapm-03.mp3"></tt-cell>
    <tt-cell pulse src="reapm-04.mp3"></tt-cell>
  </tt-row>
  <tt-row>
    <tt-cell pulse src="reapm-05.mp3"></tt-cell>
    <tt-cell pulse src="reapm-06.mp3"></tt-cell>
    <tt-cell pulse src="reapm-07.mp3"></tt-cell>
    <tt-cell pulse src="reapm-08.mp3"></tt-cell>
  </tt-row>
</tt-table>

Under the hood it's a motley combination of components from the Web Audio API, including AudioBufferSourceNodes for looping and AnalyserNodes for pulsing. I also got a chance to try out the new Fetch API which is actually really nice.

So if you've ever been thinking about putting some live loops on your webpage - now's the time!