added support for local audio playback

using howler.js library

added support for ctrl+x to toggle between modes

closes #10

static/main.css

@@ -1,136 +1 @@
-html, body {
-	margin: 0;
-}
-
-html {
-	font-family: Helvetica, "Open Sans", sans-serif;
-}
-
-body {
-	background-color: #333;
-	color: #eee;
-}
-
-a {
-	text-decoration: none;
-}
-
-h1 {
-	text-align: center;
-}
-
-form {
-	text-align: center;
-	display: inline;
-}
-
-input, button {
-	background-color: #666;
-	border: 1px solid #999;
-	border-radius: 5px;
-	color: #eee;
-	margin: 0;
-	padding: 5px;
-	vertical-align: middle;
-}
-
-button {
-	margin: 5px;
-}
-
-button:hover {
-        background-color: #999;
-        border: 1px solid #666;
-}
-
-button:active {
-        background-color: #999;
-        border: 1px solid #666;	
-	color: #000;
-}
-
-label {
-	vertical-align: middle;
-}
-
-nav {
-	text-align: center;
-	margin: 1em;
-}
-
-nav a {
-	background-color: #eee;
-	border: 1px solid #000;
-	border-radius: 5px;
-	color: #333;
-	display: inline-block;
-	padding: 1em;
-}
-
-content {
-	position: absolute;
-	width: 100%;
-}
-
-section {
-	position: absolute;
-	left: 0;
-	text-align: center;
-	top: 0;
-	width: 100%;
-}
-
-div #reset {
-	font-size: 2em;
-	padding-left: 5px;
-}
-
-div #reset:hover {
-	cursor: pointer;
-}
-
-.sound {
-	display: inline-block;
-}
-
-.sound a {
-	background-color: #ff4136;
-	border: 1px solid #000;
-	border-radius: 50px;
-	box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.6);
-	color: #eee;
-	display: inline-block;
-	font-size: 0.6em;
-	height: 100px;
-	line-height: 100px;
-	margin: 10px;
-	overflow: hidden;
-	text-align: center;
-	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-	width: 100px;
-}
-
-.sound a:hover {
-	cursor: pointer;
-}
-
-.sound a:active {
-        background-color: #ff4136;
-        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
-	cursor: pointer;
-}
-
-.sound-pressed {
-        background-color: #ff4136 !important;
-        box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6) !important;
-}
-
-.unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
 

static/main.js

@@ -1,3 +1,6 @@
+var localModeEnabled = false;
+var howlerSounds = [];
+
 function ready(fn) {
 	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
 		fn();
@@ -30,6 +33,7 @@ ready(function() {
 	});
 
 	var searchfield = document.querySelector("#search");
+	searchfield.focus();
 
 	searchfield.addEventListener("keyup", function() {
 
@@ -54,14 +58,22 @@ ready(function() {
 	reset.addEventListener("click", resetSearch, false);
 	sounds_nav.addEventListener("click", resetSearch, false);
 
-	// keyboard listener for esc button
+	// keyboard listener for global key strokes/inputs
 	document.onkeydown = function(evt) {
     		evt = evt || window.event;
 		if (evt.keyCode == 27) {
+			// esc key
 			resetSearch();
 		} else if ((evt.keyCode == 75 || evt.keyCode == 67) && evt.ctrlKey) {
+			// ctrl+k and ctrl+c key binding
+			if (localModeEnabled) {
+				killAllHowlerAudio();
+			} else {
 				ajaxRequest("/?killvideo=yes");
 			}
+		} else if (evt.keyCode == 88 && evt.ctrlKey){
+			toggleLocalMode();			
+		}	
 	};
 	
 	// keyboard listener for enter key
@@ -126,3 +138,37 @@ function ajaxRequest(url){
     }
 }
 
+function toggleLocalMode(){
+	toggleButton = document.getElementById("local-mode-button").children[0];
+	if(localModeEnabled){
+		localModeEnabled = false;
+		toggleButton.classList.remove("local");
+		toggleButton.innerHTML = "[S]";
+		toggleButton.title = "play sounds on server";
+	}else{
+		localModeEnabled = true;
+		toggleButton.classList.add("local");
+                toggleButton.innerHTML = "[L]";
+                toggleButton.title = "play sounds locally";
+	}	
+}
+
+function playSound(filename){
+	if(localModeEnabled){
+		// play local audio using howler.js
+		var sound = new Howl({
+		  src: ['/sounds/'+filename]
+		});
+		sound.play();
+		howlerSounds.push(sound);
+	}else{
+		ajaxRequest("/play/"+filename);
+	}
+}
+
+function killAllHowlerAudio(){
+	for(i=0; i<howlerSounds.length; i++) {
+            howlerSounds[i].stop();
+	}	
+}
+

templates/index.html

@@ -36,9 +36,13 @@
 		</nav>
 		<content>
 			<section id="sounds" style="display:none;">
-				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
+				<div>
+					<a onclick="toggleLocalMode();" id="local-mode-button"><button title="play sounds on server">[S]</button></a>
+					<input type="text" id="search" autofocus/>
+					<div id="reset">✕</div>
+				</div>
 				{% for sound in sounds %}
-				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ '/play/' + sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a tabindex="0" class="unselectable" onclick="playSound('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="streams" style="display:none;">
@@ -63,6 +67,7 @@
 				</form>
 			</section>
 		</content>
+		<script src="/static/howler.js"></script>
 		<script src="/static/main.js"></script>
 	</body>
 </html>