index.html

<p>If you don't hear anything, turn the volume up.</p>

<label>Rate</label>
<input type="range" min="0.33333333333333" max="6" step="any" id="clock-rate" value="2" />

<script src="modules/collection/js/object.assign.js"></script>
<script src="modules/collection/js/observe.js"></script>
<script src="modules/collection/js/mixin.array.js"></script>
<script src="modules/collection/js/mixin.events.js"></script>
<script src="modules/collection/js/collection.js"></script>
<script src="modules/audio-object/js/audio-object.js"></script>

<script src="js/window.audiocontext.js"></script>
<script src="js/clock.js"></script>

<script>
	var audio = new window.AudioContext();
	var clock = new Clock(audio, [
			{ beat: 0, tempo: 120 },
			{ beat: 4, tempo: 180 },
			{ beat: 8, tempo: 240 },
			{ beat: 12, tempo: 80 }
		]);

	var timeDiffs = [];

	function sum(n, v) { return n + v; }

	/* Rate */

	var rate = AudioObject.getOutput(clock, 'rate');
	var duration = AudioObject.getOutput(clock, 'duration');
	var durationGain = audio.createGain();
	var delay = audio.createDelay(3);
	var delayGain = audio.createGain();
	var analyser = audio.createAnalyser();

	analyser.fftSize = 1024;
	durationGain.gain.value = 0.5;
	delay.delayTime.value = 0;
	delayGain.gain.value = 0.25;
	rate.connect(analyser);
	duration.connect(durationGain);
	durationGain.connect(delay.delayTime);
	delay.connect(delayGain);
	delayGain.connect(audio.destination);

	var bufferLength = analyser.frequencyBinCount;
	var dataArray = new Float32Array(bufferLength);

	function analyseRate() {
		analyser.getFloatTimeDomainData(dataArray);
		return Math.max.apply(Math, dataArray);
	}

	/* Buffers */

	var bufferBass, bufferHat, bufferSnare;

	function fetchBuffer(audio, url) {
		return new Promise(function(accept, reject) {
			var request = new XMLHttpRequest();
			request.open('GET', url, true);
			request.responseType = 'arraybuffer';

			request.onload = function() {

				audio.decodeAudioData(request.response, accept, reject);
			}

			request.send();
		});
	}

	function playBuffer(buffer) {
		var source = audio.createBufferSource();

		// Control the playback rate entirely from the clock rate. A bug in
		// Chrome (Fixed in 44) was preventing playbackRate from hearing
		// connections:
		// https://code.google.com/p/chromium/issues/detail?id=471675
		source.playbackRate.value = 0;
		rate.connect(source.playbackRate);

		source.connect(audio.destination);
		source.connect(delay);
		source.buffer = buffer || new Float32Array(0);
		return source;
	}

	fetchBuffer(audio, 'audio/bassdrum.wav').then(function(buffer) { bufferBass = buffer; });
	fetchBuffer(audio, 'audio/hihat.wav').then(function(buffer) { bufferHat = buffer; });
	fetchBuffer(audio, 'audio/snare.wav').then(function(buffer) { bufferSnare = buffer; });


	/* Tests */

	function log(name, time) {
		var timeDiff = time - clock.time;
		timeDiffs.push(timeDiff);
		console.log(name, clock.beatAtTime(time).toFixed(3), time.toFixed(3), timeDiff.toFixed(3), analyseRate());
	}

	function playBass(time) {
		if (!bufferBass) { return; }
		var source = playBuffer(bufferBass)
		source.start(time);
		log('kick ', time);
	}

	function playHat(time) {
		if (!bufferHat) { return; }
		var source = playBuffer(bufferHat)
		source.start(time);
		log('hihat', time);
	}

	function playSnare(time) {
		if (!bufferSnare) { return; }
		var source = playBuffer(bufferSnare)
		source.start(time);
		log('snare', time);
	}

	function end(time) {
		var clockTime = clock.time;
		var total = timeDiffs.reduce(sum, 0);
		var average = total / timeDiffs.length;

		clock.uncue();

		console.log('-----', clock.beatAtTime(clockTime).toFixed(3), (time - clockTime).toFixed(3), average.toFixed(3), analyseRate());
	}

	function cueHat() {
		var n = 0;

		function cue(time) {
			playHat(time);
			if (n >= 16) { return; }
			n = n + 0.5;
			clock.cue(n, cue);
		}

		clock.cue(n, cue);
	}

	clock.start(2);

	setTimeout(function() {
		console.log('PLAY');

		cueHat();

		clock
		.cue(0,    playBass)
		.cue(2,    playSnare)
		.cue(3.5,  playBass)
		.cue(4,    playBass)
		.cue(6,    playSnare)
		.cue(7.5,  playBass)
		.cue(8,    playBass)
		.cue(10,   playSnare)
		.cue(11.5, playBass)
		.cue(12,   playBass)
		.cue(14,   playSnare)
		.cue(15.5, playBass)
		.cue(16,   playBass)
		.on(16, end);
	}, 500);

	setTimeout(function() {
		clock.rate = 0.75;
		clock.tempo(12, 60);
	}, 3000);


	/* Input control */
	var control = document.getElementById('clock-rate');

	control.addEventListener('input', function(e) {
		var value = parseFloat(e.target.value);
		clock.rate = value;
	});
</script>