<x-beat>

A Web Component for generating a continuous stream of beats from (currently) MIDI and (soon) Web Audio for the synchronising of GIFs to music. Source on GitHub.

MIDI BEAT SIGNALPREDICTED BEATS (to drive an x-gif)

Can't see any blue lines? You gotta get yourself a browser that has the Web MIDI API enabled (Chrome stable + enable this flag: chrome://flags/#enable-web-midi). Then get something to generate MIDI beats from audio (Wavetick works really well, and instructions for setting up a MIDI bus to connect it to Chrome are here), then play some music!

Once that's all working, check it out powering <x-gif>! It takes this much code to wire them together :D

var xBeat = document.querySelector('x-beat'),
  xGif = document.querySelector('x-gif');

xBeat.addEventListener('x-beat-clock', function(e) {
  xGif.clock.apply(xGif, e.detail);
});

If you know more about this stuff than me and want to help contribute, here's how I see this going:

• Figure out a really robust beat-tracking algorithm, so even if the input is noisy or disappears, x-beat is still producing smooth output. Discuss on GitHub
• Replace the MIDI input with in-browser beat detection written in JS using the Web Audio API. Discuss on GitHub