Drawing a progress bar from Dilla's position

progress.js

var Dilla = require('./index');
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var dilla = new Dilla(audioContext);

// Setup the standard metronome stuff
var high = {
  'position': '*.1.01',
  'freq': 440,
  'duration': 15
};
var low = { 'freq': 330, 'duration': 15 };

dilla.set('metronome', [
  high,
  ['*.>1.01', low]
]);





// DRAWING THE PROGRESS OF DILLA

// Create the progress indicator
var line = document.createElement('div');
line.style.height = '50px';
line.style.width = 0
line.style.backgroundColor = '#fce';
document.body.appendChild(line);
var maxLineWidth = 320;

// Draw callback to be called for each frame -> 60 fps
function draw () {
  var clockPosition = dilla.getClockPositionFromPosition(dilla.position());
  var progress = clockPosition / dilla.beatsPerBar() / dilla.loopLength();
  var lineWidth = maxLineWidth * progress;
  line.style.width = lineWidth + 'px';
  window.requestAnimationFrame(draw);
}
// Start by drawing the current state
draw();







// Play the standard metronome

var oscillator, gainNode;

dilla.on('step', function (step) {
  if (step.event === 'start') {
    oscillator = step.context.createOscillator();
    gainNode = step.context.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(step.context.destination);
    oscillator.frequency.value = step.args.freq;
    gainNode.gain.setValueAtTime(1, step.time);
    oscillator.start(step.time);
  }
  else if (step.event === 'stop' && oscillator) {
    gainNode.gain.setValueAtTime(1, step.time);
    gainNode.gain.linearRampToValueAtTime(0, step.time + 0.1);
    oscillator.stop(step.time + 0.1);
    oscillator = null;
    gainNode = null;
  }
});

dilla.start();