index.html
<!doctype html>
<html>
<head>
<title>Pitch Detector</title>
<link href='//fonts.googleapis.com/css?family=Alike' rel='stylesheet' type='text/css'>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background: black;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script type="text/javascript">
function main() {
cartodb.createVis('map', '//team.cartodb.com/api/v2/viz/7a99951e-aba7-11e3-b843-0e10bcd91c2b/viz.json', {
shareable: false,
title: false,
description: false,
search: false,
tiles_loader: true
})
.done(function(vis, layers) {
var bm = layers[0].remove();
var torqueLayer = layers[2];
torqueLayer.stop();
var status = 0;
var live = 0;
navigator.webkitGetUserMedia({audio:true, video:false}, function(stream){
audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
var red = Math.ceil(average);
var width = Math.ceil(average/10)
var cartocss = '/** torque visualization */ Map { -torque-frame-count:2048; -torque-animation-duration:63; -torque-time-attribute:"date"; -torque-aggregation-function:"count(cartodb_id)"; -torque-resolution:1; -torque-data-aggregation:linear; } #car_log_nurburgring_2013_05_30{ comp-op: lighter; marker-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-type: ellipse; marker-width: '+width+'; marker-fill: rgb('+(200+red)+',34,'+(200-red)+'); }'
if(live>1){
cartocss+='#car_log_nurburgring_2013_05_30[frame-offset=3] {marker-width: '+(width*2)+'; marker-opacity: 0.4;}'
if(live>2){
cartocss+='#car_log_nurburgring_2013_05_30[frame-offset=6] {marker-width: '+(width*3)+'; marker-opacity: 0.3;} '
if(live>3){
cartocss+='#car_log_nurburgring_2013_05_30[frame-offset=9] {marker-width: '+(width*6)+'; marker-opacity: 0.2;} '
if(live>4){
cartocss+='#car_log_nurburgring_2013_05_30[frame-offset=12] {marker-width: '+(width*10)+'; marker-opacity: 0.1;}';
}}}}
torqueLayer.setCartoCSS(cartocss);
if(status == 0){
if (average > 50){
torqueLayer.play();
status=1;
}
} else {
if (average <= 50){
live = live-1;
if(live<=0){
status=0;
torqueLayer.pause();
}
} else {
if(live<5){live++};
}
}
canvasContext.clearRect(0, 0, 60, 130);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,130);
}
}, function (){console.warn("Error getting audio stream from getUserMedia")});
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</head>
<body>
<div id="map"></div>
<canvas id="test" style="background-color: black;"></canvas>
</body>
</html>