Sound of Twitter

MeltwaterArchive · Mar 29, 2012 · 81c85ef · 81c85ef
commit 81c85ef
Show file tree

Hide file tree

Showing 44 changed files with 717 additions and 0 deletions.
diff --git a/framework.js b/framework.js
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+	<head>
+
+		<!-- Meta Tags -->
+		<meta charset="utf-8">
+
+		<!-- Title -->
+		<title>SOUND</title>
+
+		<!-- Styles -->
+		<link rel="stylesheet" href="sound.css">
+
+		<!-- Scripts -->
+		<script type="text/javascript" src="framework.js"></script>
+	</head>
+
+	<body>
+
+		<section id="title">LIFE</section>
+
+		<section>
+
+			<audio src="sounds/SNegD.ogg" id="s0"></audio>
+			<audio src="sounds/SNegC.ogg" id="s1"></audio>
+			<audio src="sounds/SNegB.ogg" id="s2"></audio>
+			<audio src="sounds/SNegA.ogg" id="s3"></audio>
+
+			<audio src="sounds/SND.ogg" id="s4"></audio>
+			<audio src="sounds/SNC.ogg" id="s5"></audio>
+			<audio src="sounds/SNB.ogg" id="s6"></audio>
+			<audio src="sounds/SNA.ogg" id="s7"></audio>
+
+			<audio src="sounds/SPD.ogg" id="s8"></audio>
+			<audio src="sounds/SPC.ogg" id="s9"></audio>
+			<audio src="sounds/SPB.ogg" id="s10"></audio>
+			<audio src="sounds/SPA.ogg" id="s11"></audio>
+
+			<div class="note" id="e0"></div>
+			<div class="note" id="e1"></div>
+			<div class="note" id="e2"></div>
+			<div class="note" id="e3"></div>
+			<div class="note" id="e4"></div>
+			<div class="note" id="e5"></div>
+			<div class="note" id="e6"></div>
+			<div class="note" id="e7"></div>
+			<div class="note" id="e8"></div>
+			<div class="note" id="e9"></div>
+			<div class="note" id="e10"></div>
+			<div class="note" id="e11"></div>
+
+		</section>
+
+		<script type="text/javascript" src="sound.js"></script>
+
+	</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,21 @@
+#Sound of Twitter
+
+Using DataSift this is a little application which visualises the sentiment from Twitter with lights and sounds.
+
+You can see a demo over on [YouTube](http://www.youtube.com/watch?v=DLlBSY-ci7U) or read more information on [DataSift Labs](http://labs.datasift.com]
+
+##Prerequisites 
+
+You will need to get a API key from [DataSift](http://datasift.com). 
+
+You will need credit on your DataSift account (depending on the stream, this application may rapidly consume your credits).
+
+You will need to agree to the [Salience Entities](http://datasift.com/source/19/salience-entities) data source.
+
+##Configuration
+
+<pre>
+	DataSift.connect('<username>', '<apikey>', 'websocket.datasift.com');
+</pre>
+
+Change line 39 of sound.js to include your username and password. Currently the default stream is a search for a keyword 'life' in order to change you search change line 40 to include the stream hash of what you want to search for.
diff --git a/sound.css b/sound.css
@@ -0,0 +1,61 @@
+body { height: 100%; width: 100%; overflow: hidden; padding: 10% }
+
+.note {
+	width: 15%;
+	height: 15%;
+	border-radius: 50%;
+	margin: -50px 0px 0px -50px;
+	-webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	background: purple;
+}
+
+.note.hover {
+    width: 150%;
+    height: 150%;
+    -moz-border-radius: 75%;
+    -webkit-border-radius: 75%;
+    border-radius: 75%;
+    margin: -75% 0 0 -75%;
+	opacity: 0.6;
+	background: purple;
+}
+
+#e0 { background: #ff0000; top: 15%; left: 20%; }
+#e1 { background: #dc1c00; top: 38%; left: 20%; }
+#e2 { background: #c53400; top: 60%; left: 20%; }
+#e3 { background: #b34500; top: 82%; left: 20%; }
+
+#e4 { background: #a05e00; top: 15%; left: 50%; }
+#e5 { background: #8b7700; top: 38%; left: 50%; }
+#e6 { background: #789200; top: 60%; left: 50%; }
+#e7 { background: #62ad00; top: 82%; left: 50%; }
+
+#e8 { background: #49c600; top: 15%; left: 80%; }
+#e9 { background: #30d500; top: 38%; left: 80%; }
+#e10 { background: #20e500; top: 60%; left: 80%; }
+#e11 { background: #00ff00; top: 82%; left: 80%; }
+
+#title {
+	display: none;
+	width: 528px;
+	height: 157px;
+	left: 50%;
+	margin-left: -264px;
+	top: 50%;
+	margin-top: -78px;
+	background: url(life.png) no-repeat center;
+	position: absolute;
+	z-index: 500;
+	text-indent: -9999px;
+}
+
+audio {
+	display: hidden;
+}
diff --git a/sound.js b/sound.js
@@ -0,0 +1,126 @@
+
+
+
+var Listen = {
+
+	/**
+	 * Total number of sound files we have loaded
+	 */
+	totalSounds: 12,
+
+	/**
+	 * All the HTML5 audio objects
+	 */
+	sounds: [],
+
+	/**
+	 * The elements representing the sounds
+	 */
+	elements: [],
+
+	/**
+	 * The notes to play
+	 */
+	sentiment: [],
+
+	counter: 0,
+
+	/**
+	* Start listening
+	*/
+	start: function() {
+		// collect all the sounds & elements
+		for (i = 0; i < this.totalSounds; i++) {
+			this.sounds.push(document.getElementById('s' + i));
+			this.elements.push(document.getElementById('e' + i));
+		}
+
+		// connect to DataSift
+		DataSift.connect('<username>', '<apikey>', 'websocket.datasift.com');
+		DataSift.register('b65ceba2ba57cadc880a18bd48c2f467', {
+			onMessage: function(d) { this.onMessage(d); }.bind(this),
+			onError: function() {}
+		});
+
+		setInterval(function() {
+			this.notes();
+		}.bind(this), 500);
+	},
+
+	onMessage: function(data) {
+
+		data = data.data;
+
+		if (data.salience && data.salience.content && data.salience.content.sentiment) {
+			this.sentiment.push(data.salience.content.sentiment);
+		}
+	},
+
+	notes: function() {
+
+		var value = null;
+		var rand  = Math.floor(3*Math.random());
+
+		if (rand == 0) {
+			value = this.sentiment.max();
+		} else if (rand == 1) {
+			value = this.sentiment.average();
+		} else if (rand == 2) {
+			value = this.sentiment.min();
+		}
+
+		if (!isNaN(value) && value !== null && value !== -Infinity && value !== Infinity) {
+			this.play(value);
+		}
+
+		this.sentiment = [];
+	},
+
+	play: function(value) {
+
+		var scale = 40;
+		var distribution = scale/this.totalSounds;
+		var note = 0;
+
+		// first make the value positive
+		value = value < 0 ? value*-1 : value > 0 ? value+(scale/2) : value;
+
+		note = Math.floor(value / distribution);
+
+		if (this.sounds[note].ended) {
+			this.sounds[note].play();
+		} else {
+			var audio = new Audio(this.sounds[note].src);
+			audio.play();
+		}
+
+		if (this.elements[note].className == 'note') {
+			this.elements[note].className = 'note hover';
+		}
+		var temp = this.elements[note];
+
+		setTimeout(function() {
+			temp.className = 'note';
+		}, 500);
+	}
+}
+
+Listen.start();
+
+
+
+Array.prototype.max = function() {
+  return Math.max.apply(null, this)
+}
+
+Array.prototype.min = function() {
+  return Math.min.apply(null, this)
+}
+
+Array.prototype.average = function() {
+	var total = 0;
+	for (var i = 0; i < this.length; i++) {
+		total += this[i];
+	}
+	return total/this.length;
+}
diff --git a/sounds/DRUMS NEGATIVE.ogg b/sounds/DRUMS NEGATIVE.ogg
diff --git a/sounds/DRUMS NEUTRAL.ogg b/sounds/DRUMS NEUTRAL.ogg
diff --git a/sounds/DRUMS POSITIVE.ogg b/sounds/DRUMS POSITIVE.ogg
diff --git a/sounds/LNeg A.ogg b/sounds/LNeg A.ogg
diff --git a/sounds/LNeg B.ogg b/sounds/LNeg B.ogg
diff --git a/sounds/LNeg C.ogg b/sounds/LNeg C.ogg
diff --git a/sounds/LNeg D.ogg b/sounds/LNeg D.ogg
diff --git a/sounds/LNeut A.ogg b/sounds/LNeut A.ogg
diff --git a/sounds/LNeut B.ogg b/sounds/LNeut B.ogg
diff --git a/sounds/LNeut C.ogg b/sounds/LNeut C.ogg
diff --git a/sounds/LNeut D.ogg b/sounds/LNeut D.ogg
diff --git a/sounds/LPos A.ogg b/sounds/LPos A.ogg
diff --git a/sounds/LPos B.ogg b/sounds/LPos B.ogg
diff --git a/sounds/LPos C.ogg b/sounds/LPos C.ogg
diff --git a/sounds/LPos D.ogg b/sounds/LPos D.ogg
diff --git a/sounds/SNA.m4a b/sounds/SNA.m4a
diff --git a/sounds/SNA.ogg b/sounds/SNA.ogg
diff --git a/sounds/SNB.m4a b/sounds/SNB.m4a
diff --git a/sounds/SNB.ogg b/sounds/SNB.ogg
diff --git a/sounds/SNC.m4a b/sounds/SNC.m4a
diff --git a/sounds/SNC.ogg b/sounds/SNC.ogg
diff --git a/sounds/SND.m4a b/sounds/SND.m4a
diff --git a/sounds/SND.ogg b/sounds/SND.ogg
diff --git a/sounds/SNegA.m4a b/sounds/SNegA.m4a
diff --git a/sounds/SNegA.ogg b/sounds/SNegA.ogg
diff --git a/sounds/SNegB.m4a b/sounds/SNegB.m4a
diff --git a/sounds/SNegB.ogg b/sounds/SNegB.ogg
diff --git a/sounds/SNegC.m4a b/sounds/SNegC.m4a
diff --git a/sounds/SNegC.ogg b/sounds/SNegC.ogg
diff --git a/sounds/SNegD.m4a b/sounds/SNegD.m4a
diff --git a/sounds/SNegD.ogg b/sounds/SNegD.ogg
diff --git a/sounds/SPA.m4a b/sounds/SPA.m4a
diff --git a/sounds/SPA.ogg b/sounds/SPA.ogg
diff --git a/sounds/SPB.m4a b/sounds/SPB.m4a
diff --git a/sounds/SPB.ogg b/sounds/SPB.ogg
diff --git a/sounds/SPC.m4a b/sounds/SPC.m4a
diff --git a/sounds/SPC.ogg b/sounds/SPC.ogg
diff --git a/sounds/SPD.m4a b/sounds/SPD.m4a
diff --git a/sounds/SPD.ogg b/sounds/SPD.ogg