From 66a95dd2be0bb09f6659641c7904b9bca7bb338b Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Wed, 19 Jul 2017 13:27:10 +0200
Subject: [PATCH 01/30] autofocus for search field

---
 templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index 40bef57..f65a124 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,7 +36,7 @@
 		</nav>
 		<content>
 			<section id="sounds">
-				<div><input type="text" id="search" /><span id="reset">⨯</span></div>
+				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
 				<div class="sound"><a href="{{ '/play/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}

From f605cdc8be5687937e3cce1e99a712f7d1aa8fe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Thu, 27 Jul 2017 17:18:49 +0200
Subject: [PATCH 02/30] Add shell script for development server

---
 devserver.sh | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100755 devserver.sh

diff --git a/devserver.sh b/devserver.sh
new file mode 100755
index 0000000..460b9de
--- /dev/null
+++ b/devserver.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+
+basedir=$(dirname "$0")
+
+if [ ! -d "$basedir/py" ]; then
+	echo "Directory \"py\" with a Python virtual environment"
+	echo "does not exist. See README.rst on how to set it up."
+else
+	export FLASK_DEBUG=1
+	export FLASK_APP="$basedir/soundboard.py"
+	"$basedir"/py/bin/flask run
+fi

From 26bb3dca8589be3dbc8cb6fa875e726c87849364 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 17:17:51 +0200
Subject: [PATCH 03/30] implementing AJAX loading for sounds as described in
 issue #5

---
 static/main.js       | 15 +++++++++++++--
 templates/index.html |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/static/main.js b/static/main.js
index e2af0a3..b965ee1 100644
--- a/static/main.js
+++ b/static/main.js
@@ -30,8 +30,6 @@ ready(function() {
 	var searchfield = document.querySelector("#search");
 
 	searchfield.addEventListener("keyup", function() {
-		console.log("Search!");
-
 		var buttons = document.querySelectorAll(".sound");
 
 		buttons.forEach(function(item) {
@@ -67,3 +65,16 @@ function hideSections() {
 		item.style.display = "none";
 	});
 }
+
+function ajaxRequest(filename){
+    var ajaxRequest;
+    try{
+        ajaxRequest = new XMLHttpRequest();
+        var url = "play/" + filename;
+        ajaxRequest.open("GET", url, true);
+        ajaxRequest.send(null);
+    }catch (e){
+        alert("Your browser broke!");
+        return false;
+    }
+}
diff --git a/templates/index.html b/templates/index.html
index f65a124..9166151 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a href="{{ '/play/' + sound | urlencode }}">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a href="{{ '/play/' + sound | urlencode }}" onclick="ajaxRequest({{ sound | urlencode }});">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">

From 4aa9f928484314e34e44184e3dd66aff8f4a0f1c Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 17:27:48 +0200
Subject: [PATCH 04/30] fixed quoting in ajax call

removed href since onclick seems to work fine
---
 templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index 9166151..fbfad67 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a href="{{ '/play/' + sound | urlencode }}" onclick="ajaxRequest({{ sound | urlencode }});">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">

From 6290c939826cbfc27317134ef6486976e6c4a233 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 17:40:34 +0200
Subject: [PATCH 05/30] added: sound button resets search field

---
 static/main.css      | 4 ++--
 templates/index.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/main.css b/static/main.css
index 21195a9..90419d9 100644
--- a/static/main.css
+++ b/static/main.css
@@ -65,12 +65,12 @@ section {
 	width: 100%;
 }
 
-#reset {
+div #reset {
 	font-size: 2em;
 	padding-left: 5px;
 }
 
-#reset:hover {
+div #reset:hover {
 	cursor: pointer;
 }
 
diff --git a/templates/index.html b/templates/index.html
index fbfad67..93895b2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,7 +30,7 @@
 	</head>
 	<body>
 		<nav>
-			<a href="#sounds">Sounds</a>
+			<a href="#sounds" id="reset">Sounds</a>
 			<a href="#youtube">YouTube</a>
 			<a href="#voice">Voice</a>
 		</nav>

From 4c34d4ac0ec27e2e6e8e2154ff61124f7e3db06d Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 19:37:58 +0200
Subject: [PATCH 06/30] pointer style cursor on hovering sound buttons

---
 static/main.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/main.css b/static/main.css
index 90419d9..d792db2 100644
--- a/static/main.css
+++ b/static/main.css
@@ -98,4 +98,6 @@ div #reset:hover {
 .sound a:hover {
 	background-color: #ff4136;
 	box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
+	cursor: pointer;
 }
+

From 6758be03968a4cc563fbf665382cac7588f05814 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 19:39:02 +0200
Subject: [PATCH 07/30] reset search on sounds nav button

reset search on escape key
---
 static/main.js       | 34 ++++++++++++++++++++++++++--------
 templates/index.html |  3 ++-
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/static/main.js b/static/main.js
index b965ee1..f5a682c 100644
--- a/static/main.js
+++ b/static/main.js
@@ -30,6 +30,7 @@ ready(function() {
 	var searchfield = document.querySelector("#search");
 
 	searchfield.addEventListener("keyup", function() {
+
 		var buttons = document.querySelectorAll(".sound");
 
 		buttons.forEach(function(item) {
@@ -46,18 +47,34 @@ ready(function() {
 	});
 
 	var reset = document.querySelector("#reset");
+	var sounds_nav = document.querySelector("#sounds-nav");
 
-	reset.addEventListener("click", function() {
-		var buttons = document.querySelectorAll(".sound");
+	reset.addEventListener("click", resetSearch, false);
+	sounds_nav.addEventListener("click", resetSearch, false);
 
-		buttons.forEach(function(item) {
-			item.style.display = "inline-block";
-		});
-
-		searchfield.value = "";
-	});
+	document.onkeydown = function(evt) {
+    		evt = evt || window.event;
+		if (evt.keyCode == 27) {
+			resetSearch();
+		}
+	};
 });
 
+
+function resetSearch() {
+	var searchfield = document.querySelector("#search");
+	var buttons = document.querySelectorAll(".sound");
+
+	searchfield.blur();
+
+        buttons.forEach(function(item) {
+        	item.style.display = "inline-block";
+        });
+
+        searchfield.value = "";
+}
+
+
 function hideSections() {
 	var sections = document.querySelectorAll("section");
 
@@ -78,3 +95,4 @@ function ajaxRequest(filename){
         return false;
     }
 }
+
diff --git a/templates/index.html b/templates/index.html
index 93895b2..bf38b3e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,7 +30,7 @@
 	</head>
 	<body>
 		<nav>
-			<a href="#sounds" id="reset">Sounds</a>
+			<a href="#sounds" id="sounds-nav">Sounds</a>
 			<a href="#youtube">YouTube</a>
 			<a href="#voice">Voice</a>
 		</nav>
@@ -67,3 +67,4 @@
 		<script src="/static/main.js"></script>
 	</body>
 </html>
+

From fa23ea0fbf3e77912615d22a9ee5a9a3f1cddace Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 19:49:37 +0200
Subject: [PATCH 08/30] made button text unselectable

---
 static/main.css      | 9 +++++++++
 templates/index.html | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/static/main.css b/static/main.css
index d792db2..9f2c798 100644
--- a/static/main.css
+++ b/static/main.css
@@ -101,3 +101,12 @@ div #reset:hover {
 	cursor: pointer;
 }
 
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
diff --git a/templates/index.html b/templates/index.html
index bf38b3e..02c6738 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">

From d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 20:34:22 +0200
Subject: [PATCH 09/30] keyboard controls and visuals

closes #21
---
 static/main.css      | 13 +++++++++++--
 static/main.js       | 22 ++++++++++++++++++++++
 templates/index.html |  3 +--
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/static/main.css b/static/main.css
index 9f2c798..86106d7 100644
--- a/static/main.css
+++ b/static/main.css
@@ -96,11 +96,20 @@ div #reset:hover {
 }
 
 .sound a:hover {
-	background-color: #ff4136;
-	box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6);
 	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;
diff --git a/static/main.js b/static/main.js
index f5a682c..b33f0bd 100644
--- a/static/main.js
+++ b/static/main.js
@@ -6,6 +6,10 @@ function ready(fn) {
 	}
 }
 
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 ready(function() {
 	hideSections();
 
@@ -52,12 +56,29 @@ ready(function() {
 	reset.addEventListener("click", resetSearch, false);
 	sounds_nav.addEventListener("click", resetSearch, false);
 
+	// keyboard listener for esc button
 	document.onkeydown = function(evt) {
     		evt = evt || window.event;
 		if (evt.keyCode == 27) {
 			resetSearch();
 		}
 	};
+	
+	// keyboard listener for enter key
+	var all_a_s = document.getElementsByTagName("a"); 
+	for(i=0; i<all_a_s.length; i++) {	
+	    all_a_s[i].addEventListener('keypress', async function (e) {
+		    var key = e.keyCode;
+		    var source = e.target;
+		    if (key === 13) {
+			source.classList.add("sound-pressed")
+		    	source.onclick(); 
+			await sleep(300);
+			source.classList.remove("sound-pressed"); 
+		    }
+		});
+	}
+
 });
 
 
@@ -72,6 +93,7 @@ function resetSearch() {
         });
 
         searchfield.value = "";
+	searchfield.focus();
 }
 
 
diff --git a/templates/index.html b/templates/index.html
index 02c6738..8378a11 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">
@@ -67,4 +67,3 @@
 		<script src="/static/main.js"></script>
 	</body>
 </html>
-

From 90c0887f979785d35484dbd6247a59c8d54c6e81 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 21:08:38 +0200
Subject: [PATCH 10/30] added keyboard shortcut for killing sounds via ajax

---
 static/main.js       | 14 ++++++++++----
 templates/index.html |  3 ++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/static/main.js b/static/main.js
index b33f0bd..fc6a44d 100644
--- a/static/main.js
+++ b/static/main.js
@@ -61,6 +61,8 @@ ready(function() {
     		evt = evt || window.event;
 		if (evt.keyCode == 27) {
 			resetSearch();
+		} else if (evt.keyCode == 75 && evt.ctrlKey) {
+			ajaxRequest("/?killvideo=yes");			
 		}
 	};
 	
@@ -70,8 +72,13 @@ ready(function() {
 	    all_a_s[i].addEventListener('keypress', async function (e) {
 		    var key = e.keyCode;
 		    var source = e.target;
-		    if (key === 13) {
-			source.classList.add("sound-pressed")
+		    // keylistener for enter or ctrl+enter (which is k10 on chrome)
+		    if (key === 13 || (key === 10 && e.ctrlKey)) {
+			if(e.ctrlKey){
+				ajaxRequest("/?killvideo=yes");
+				await sleep(100);
+			}
+			source.classList.add("sound-pressed");
 		    	source.onclick(); 
 			await sleep(300);
 			source.classList.remove("sound-pressed"); 
@@ -105,11 +112,10 @@ function hideSections() {
 	});
 }
 
-function ajaxRequest(filename){
+function ajaxRequest(url){
     var ajaxRequest;
     try{
         ajaxRequest = new XMLHttpRequest();
-        var url = "play/" + filename;
         ajaxRequest.open("GET", url, true);
         ajaxRequest.send(null);
     }catch (e){
diff --git a/templates/index.html b/templates/index.html
index 8378a11..03792ac 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,7 @@
 			<section id="sounds">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
-				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
+				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ '/play/' + sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
 			<section id="youtube">
@@ -67,3 +67,4 @@
 		<script src="/static/main.js"></script>
 	</body>
 </html>
+

From 730147514b24507e8ea245d264de6201a87a7e0f Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 21:33:04 +0200
Subject: [PATCH 11/30] added new shortcut

...to kill sounds
---
 static/main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/main.js b/static/main.js
index fc6a44d..974206f 100644
--- a/static/main.js
+++ b/static/main.js
@@ -61,9 +61,9 @@ ready(function() {
     		evt = evt || window.event;
 		if (evt.keyCode == 27) {
 			resetSearch();
-		} else if (evt.keyCode == 75 && evt.ctrlKey) {
+		} else if ((evt.keyCode == 75 || evt.keyCode == 67) && evt.ctrlKey) {
 			ajaxRequest("/?killvideo=yes");			
-		}
+		}	
 	};
 	
 	// keyboard listener for enter key

From 7f3cd26484ac70b21a4807c3958a909ee2a7ecbf Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 21:42:58 +0200
Subject: [PATCH 12/30] fixed section content is overlapping

dirty fixes #18
---
 static/main.js       | 2 --
 templates/index.html | 6 +++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/static/main.js b/static/main.js
index 974206f..95bdbd0 100644
--- a/static/main.js
+++ b/static/main.js
@@ -11,8 +11,6 @@ function sleep(ms) {
 }
 
 ready(function() {
-	hideSections();
-
 	var sections = document.querySelectorAll("section");
 	var nav = document.querySelectorAll("nav a");
 
diff --git a/templates/index.html b/templates/index.html
index 03792ac..3d9c538 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -35,13 +35,13 @@
 			<a href="#voice">Voice</a>
 		</nav>
 		<content>
-			<section id="sounds">
+			<section id="sounds" style="display:none;">
 				<div><input type="text" id="search" autofocus/><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
 				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ '/play/' + sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
-			<section id="youtube">
+			<section id="youtube" style="display:none;">
 				<form action="/" method="GET">
 					<label for="video">YouTube URL</label>
 					<input type="text" name="video" />
@@ -52,7 +52,7 @@
 					<input type="submit" name="submit" value="Terminate videos" />
 				</form>
 			</section>
-			<section id="voice">
+			<section id="voice" style="display:none;">
 				<form action="/say/" method="POST">
 					<input type="text" name="text" />
 					<input type="text" name="voice" placeholder="DE" />

From 5781ac28db7cbf3f0c8a86e0129303b98df82836 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 21:58:34 +0200
Subject: [PATCH 13/30] renamed YouPorn nav element to Streams

---
 templates/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 3d9c538..ad1b999 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -31,8 +31,8 @@
 	<body>
 		<nav>
 			<a href="#sounds" id="sounds-nav">Sounds</a>
-			<a href="#youtube">YouTube</a>
-			<a href="#voice">Voice</a>
+			<a href="#streams">Streams</a>
+			<a href="#voice">Voices</a>
 		</nav>
 		<content>
 			<section id="sounds" style="display:none;">
@@ -41,9 +41,9 @@
 				<div class="sound"><a tabindex="0" class="unselectable" onclick="ajaxRequest('{{ '/play/' + sound | urlencode }}');">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}
 			</section>
-			<section id="youtube" style="display:none;">
+			<section id="streams" style="display:none;">
 				<form action="/" method="GET">
-					<label for="video">YouTube URL</label>
+					<label for="video">Stream URL</label>
 					<input type="text" name="video" />
 					<input type="submit" value="Play" />
 				</form>

From 6a77fa054dab9660330dce32eb5f829988e285dc Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 22:42:42 +0200
Subject: [PATCH 14/30] added ajax loading for streams

---
 static/main.css      | 19 +++++++++++++++++--
 static/main.js       |  4 ++++
 templates/index.html | 17 ++++++++---------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/static/main.css b/static/main.css
index 86106d7..221137e 100644
--- a/static/main.css
+++ b/static/main.css
@@ -20,11 +20,11 @@ h1 {
 }
 
 form {
-	padding: 5px;
 	text-align: center;
+	display: inline;
 }
 
-input {
+input, button {
 	background-color: #666;
 	border: 1px solid #999;
 	border-radius: 5px;
@@ -34,6 +34,21 @@ input {
 	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;
 }
diff --git a/static/main.js b/static/main.js
index 95bdbd0..e5fc4d4 100644
--- a/static/main.js
+++ b/static/main.js
@@ -101,6 +101,10 @@ function resetSearch() {
 	searchfield.focus();
 }
 
+function playStream(){
+	var streamUrl = document.querySelector("#streaming-url").value;
+	ajaxRequest("/?video="+encodeURI(streamUrl));	
+}
 
 function hideSections() {
 	var sections = document.querySelectorAll("section");
diff --git a/templates/index.html b/templates/index.html
index ad1b999..8c04664 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -42,15 +42,14 @@
 				{% endfor %}
 			</section>
 			<section id="streams" style="display:none;">
-				<form action="/" method="GET">
-					<label for="video">Stream URL</label>
-					<input type="text" name="video" />
-					<input type="submit" value="Play" />
-				</form>
-				<form action="/" method="GET">
-					<input type="hidden" name="killvideo" value="yes" />
-					<input type="submit" name="submit" value="Terminate videos" />
-				</form>
+				<div>
+					<form>
+						<label for="video">Stream URL</label>
+						<input id="streaming-url" type="text" name="video" placeholder="paste stream url here..." />
+					</form>
+					<button onclick="playStream();">Play!</button>
+				</div>
+				<button name="submit" onclick="ajaxRequest('/?killvideo=yes');">Terminate videos</button>
 			</section>
 			<section id="voice" style="display:none;">
 				<form action="/say/" method="POST">

From 281560045d329d7f6303e1a74159846e5ea7886d Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Thu, 3 Aug 2017 22:56:06 +0200
Subject: [PATCH 15/30] fixed encoding issues with umlauts in text to speech
 input

... closes #23
---
 soundboard.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/soundboard.py b/soundboard.py
index beb27be..5d32c74 100644
--- a/soundboard.py
+++ b/soundboard.py
@@ -33,7 +33,7 @@ def index(sound=None, text=None, video=None):
         pitch = request.form.get("pitch", default="")
         pitch = pitch if pitch.strip() != "" else "50"
 
-        subprocess.Popen(["espeak", "-v", voice, "-s", speed, "-p", pitch, text], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        subprocess.Popen(["espeak", "-v", voice, "-s", speed, "-p", pitch, text.encode("utf-8")], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
         return redirect("/")
 
     video = request.args.get("video")

From 55e8e04bb25a7ac8ccde6e38b889ec4fad29c7de Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 00:41:13 +0200
Subject: [PATCH 16/30] added support for local audio playback

using howler.js library

added support for ctrl+x to toggle between modes

closes #10
---
 static/howler.js     | 2801 ++++++++++++++++++++++++++++++++++++++++++
 static/main.css      |  135 --
 static/main.js       |   50 +-
 templates/index.html |    9 +-
 4 files changed, 2856 insertions(+), 139 deletions(-)
 create mode 100644 static/howler.js

diff --git a/static/howler.js b/static/howler.js
new file mode 100644
index 0000000..dfe2897
--- /dev/null
+++ b/static/howler.js
@@ -0,0 +1,2801 @@
+/*!
+ *  howler.js v2.0.4
+ *  howlerjs.com
+ *
+ *  (c) 2013-2017, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+(function() {
+
+  'use strict';
+
+  /** Global Methods **/
+  /***************************************************************************/
+
+  /**
+   * Create the global controller. All contained methods and properties apply
+   * to all sounds that are currently playing or will be in the future.
+   */
+  var HowlerGlobal = function() {
+    this.init();
+  };
+  HowlerGlobal.prototype = {
+    /**
+     * Initialize the global Howler object.
+     * @return {Howler}
+     */
+    init: function() {
+      var self = this || Howler;
+
+      // Create a global ID counter.
+      self._counter = 1000;
+
+      // Internal properties.
+      self._codecs = {};
+      self._howls = [];
+      self._muted = false;
+      self._volume = 1;
+      self._canPlayEvent = 'canplaythrough';
+      self._navigator = (typeof window !== 'undefined' && window.navigator) ? window.navigator : null;
+
+      // Public properties.
+      self.masterGain = null;
+      self.noAudio = false;
+      self.usingWebAudio = true;
+      self.autoSuspend = true;
+      self.ctx = null;
+
+      // Set to false to disable the auto iOS enabler.
+      self.mobileAutoEnable = true;
+
+      // Setup the various state values for global tracking.
+      self._setup();
+
+      return self;
+    },
+
+    /**
+     * Get/set the global volume for all sounds.
+     * @param  {Float} vol Volume from 0.0 to 1.0.
+     * @return {Howler/Float}     Returns self or current volume.
+     */
+    volume: function(vol) {
+      var self = this || Howler;
+      vol = parseFloat(vol);
+
+      // If we don't have an AudioContext created yet, run the setup.
+      if (!self.ctx) {
+        setupAudioContext();
+      }
+
+      if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) {
+        self._volume = vol;
+
+        // Don't update any of the nodes if we are muted.
+        if (self._muted) {
+          return self;
+        }
+
+        // When using Web Audio, we just need to adjust the master gain.
+        if (self.usingWebAudio) {
+          self.masterGain.gain.value = vol;
+        }
+
+        // Loop through and change volume for all HTML5 audio nodes.
+        for (var i=0; i<self._howls.length; i++) {
+          if (!self._howls[i]._webAudio) {
+            // Get all of the sounds in this Howl group.
+            var ids = self._howls[i]._getSoundIds();
+
+            // Loop through all sounds and change the volumes.
+            for (var j=0; j<ids.length; j++) {
+              var sound = self._howls[i]._soundById(ids[j]);
+
+              if (sound && sound._node) {
+                sound._node.volume = sound._volume * vol;
+              }
+            }
+          }
+        }
+
+        return self;
+      }
+
+      return self._volume;
+    },
+
+    /**
+     * Handle muting and unmuting globally.
+     * @param  {Boolean} muted Is muted or not.
+     */
+    mute: function(muted) {
+      var self = this || Howler;
+
+      // If we don't have an AudioContext created yet, run the setup.
+      if (!self.ctx) {
+        setupAudioContext();
+      }
+
+      self._muted = muted;
+
+      // With Web Audio, we just need to mute the master gain.
+      if (self.usingWebAudio) {
+        self.masterGain.gain.value = muted ? 0 : self._volume;
+      }
+
+      // Loop through and mute all HTML5 Audio nodes.
+      for (var i=0; i<self._howls.length; i++) {
+        if (!self._howls[i]._webAudio) {
+          // Get all of the sounds in this Howl group.
+          var ids = self._howls[i]._getSoundIds();
+
+          // Loop through all sounds and mark the audio node as muted.
+          for (var j=0; j<ids.length; j++) {
+            var sound = self._howls[i]._soundById(ids[j]);
+
+            if (sound && sound._node) {
+              sound._node.muted = (muted) ? true : sound._muted;
+            }
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Unload and destroy all currently loaded Howl objects.
+     * @return {Howler}
+     */
+    unload: function() {
+      var self = this || Howler;
+
+      for (var i=self._howls.length-1; i>=0; i--) {
+        self._howls[i].unload();
+      }
+
+      // Create a new AudioContext to make sure it is fully reset.
+      if (self.usingWebAudio && self.ctx && typeof self.ctx.close !== 'undefined') {
+        self.ctx.close();
+        self.ctx = null;
+        setupAudioContext();
+      }
+
+      return self;
+    },
+
+    /**
+     * Check for codec support of specific extension.
+     * @param  {String} ext Audio file extention.
+     * @return {Boolean}
+     */
+    codecs: function(ext) {
+      return (this || Howler)._codecs[ext.replace(/^x-/, '')];
+    },
+
+    /**
+     * Setup various state values for global tracking.
+     * @return {Howler}
+     */
+    _setup: function() {
+      var self = this || Howler;
+
+      // Keeps track of the suspend/resume state of the AudioContext.
+      self.state = self.ctx ? self.ctx.state || 'running' : 'running';
+
+      // Automatically begin the 30-second suspend process
+      self._autoSuspend();
+
+      // Check if audio is available.
+      if (!self.usingWebAudio) {
+        // No audio is available on this system if noAudio is set to true.
+        if (typeof Audio !== 'undefined') {
+          try {
+            var test = new Audio();
+
+            // Check if the canplaythrough event is available.
+            if (typeof test.oncanplaythrough === 'undefined') {
+              self._canPlayEvent = 'canplay';
+            }
+          } catch(e) {
+            self.noAudio = true;
+          }
+        } else {
+          self.noAudio = true;
+        }
+      }
+
+      // Test to make sure audio isn't disabled in Internet Explorer.
+      try {
+        var test = new Audio();
+        if (test.muted) {
+          self.noAudio = true;
+        }
+      } catch (e) {}
+
+      // Check for supported codecs.
+      if (!self.noAudio) {
+        self._setupCodecs();
+      }
+
+      return self;
+    },
+
+    /**
+     * Check for browser support for various codecs and cache the results.
+     * @return {Howler}
+     */
+    _setupCodecs: function() {
+      var self = this || Howler;
+      var audioTest = null;
+
+      // Must wrap in a try/catch because IE11 in server mode throws an error.
+      try {
+        audioTest = (typeof Audio !== 'undefined') ? new Audio() : null;
+      } catch (err) {
+        return self;
+      }
+
+      if (!audioTest || typeof audioTest.canPlayType !== 'function') {
+        return self;
+      }
+
+      var mpegTest = audioTest.canPlayType('audio/mpeg;').replace(/^no$/, '');
+
+      // Opera version <33 has mixed MP3 support, so we need to check for and block it.
+      var checkOpera = self._navigator && self._navigator.userAgent.match(/OPR\/([0-6].)/g);
+      var isOldOpera = (checkOpera && parseInt(checkOpera[0].split('/')[1], 10) < 33);
+
+      self._codecs = {
+        mp3: !!(!isOldOpera && (mpegTest || audioTest.canPlayType('audio/mp3;').replace(/^no$/, ''))),
+        mpeg: !!mpegTest,
+        opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''),
+        ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),
+        oga: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''),
+        wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''),
+        aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),
+        caf: !!audioTest.canPlayType('audio/x-caf;').replace(/^no$/, ''),
+        m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
+        mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),
+        weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, ''),
+        webm: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, ''),
+        dolby: !!audioTest.canPlayType('audio/mp4; codecs="ec-3"').replace(/^no$/, ''),
+        flac: !!(audioTest.canPlayType('audio/x-flac;') || audioTest.canPlayType('audio/flac;')).replace(/^no$/, '')
+      };
+
+      return self;
+    },
+
+    /**
+     * Mobile browsers will only allow audio to be played after a user interaction.
+     * Attempt to automatically unlock audio on the first user interaction.
+     * Concept from: http://paulbakaus.com/tutorials/html5/web-audio-on-ios/
+     * @return {Howler}
+     */
+    _enableMobileAudio: function() {
+      var self = this || Howler;
+
+      // Only run this on mobile devices if audio isn't already eanbled.
+      var isMobile = /iPhone|iPad|iPod|Android|BlackBerry|BB10|Silk|Mobi/i.test(self._navigator && self._navigator.userAgent);
+      var isTouch = !!(('ontouchend' in window) || (self._navigator && self._navigator.maxTouchPoints > 0) || (self._navigator && self._navigator.msMaxTouchPoints > 0));
+      if (self._mobileEnabled || !self.ctx || (!isMobile && !isTouch)) {
+        return;
+      }
+
+      self._mobileEnabled = false;
+
+      // Some mobile devices/platforms have distortion issues when opening/closing tabs and/or web views.
+      // Bugs in the browser (especially Mobile Safari) can cause the sampleRate to change from 44100 to 48000.
+      // By calling Howler.unload(), we create a new AudioContext with the correct sampleRate.
+      if (!self._mobileUnloaded && self.ctx.sampleRate !== 44100) {
+        self._mobileUnloaded = true;
+        self.unload();
+      }
+
+      // Scratch buffer for enabling iOS to dispose of web audio buffers correctly, as per:
+      // http://stackoverflow.com/questions/24119684
+      self._scratchBuffer = self.ctx.createBuffer(1, 1, 22050);
+
+      // Call this method on touch start to create and play a buffer,
+      // then check if the audio actually played to determine if
+      // audio has now been unlocked on iOS, Android, etc.
+      var unlock = function() {
+        // Fix Android can not play in suspend state.
+        Howler._autoResume();
+
+        // Create an empty buffer.
+        var source = self.ctx.createBufferSource();
+        source.buffer = self._scratchBuffer;
+        source.connect(self.ctx.destination);
+
+        // Play the empty buffer.
+        if (typeof source.start === 'undefined') {
+          source.noteOn(0);
+        } else {
+          source.start(0);
+        }
+
+        // Calling resume() on a stack initiated by user gesture is what actually unlocks the audio on Android Chrome >= 55.
+        if (typeof self.ctx.resume === 'function') {
+          self.ctx.resume();
+        }
+
+        // Setup a timeout to check that we are unlocked on the next event loop.
+        source.onended = function() {
+          source.disconnect(0);
+
+          // Update the unlocked state and prevent this check from happening again.
+          self._mobileEnabled = true;
+          self.mobileAutoEnable = false;
+
+          // Remove the touch start listener.
+          document.removeEventListener('touchend', unlock, true);
+        };
+      };
+
+      // Setup a touch start listener to attempt an unlock in.
+      document.addEventListener('touchend', unlock, true);
+
+      return self;
+    },
+
+    /**
+     * Automatically suspend the Web Audio AudioContext after no sound has played for 30 seconds.
+     * This saves processing/energy and fixes various browser-specific bugs with audio getting stuck.
+     * @return {Howler}
+     */
+    _autoSuspend: function() {
+      var self = this;
+
+      if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === 'undefined' || !Howler.usingWebAudio) {
+        return;
+      }
+
+      // Check if any sounds are playing.
+      for (var i=0; i<self._howls.length; i++) {
+        if (self._howls[i]._webAudio) {
+          for (var j=0; j<self._howls[i]._sounds.length; j++) {
+            if (!self._howls[i]._sounds[j]._paused) {
+              return self;
+            }
+          }
+        }
+      }
+
+      if (self._suspendTimer) {
+        clearTimeout(self._suspendTimer);
+      }
+
+      // If no sound has played after 30 seconds, suspend the context.
+      self._suspendTimer = setTimeout(function() {
+        if (!self.autoSuspend) {
+          return;
+        }
+
+        self._suspendTimer = null;
+        self.state = 'suspending';
+        self.ctx.suspend().then(function() {
+          self.state = 'suspended';
+
+          if (self._resumeAfterSuspend) {
+            delete self._resumeAfterSuspend;
+            self._autoResume();
+          }
+        });
+      }, 30000);
+
+      return self;
+    },
+
+    /**
+     * Automatically resume the Web Audio AudioContext when a new sound is played.
+     * @return {Howler}
+     */
+    _autoResume: function() {
+      var self = this;
+
+      if (!self.ctx || typeof self.ctx.resume === 'undefined' || !Howler.usingWebAudio) {
+        return;
+      }
+
+      if (self.state === 'running' && self._suspendTimer) {
+        clearTimeout(self._suspendTimer);
+        self._suspendTimer = null;
+      } else if (self.state === 'suspended') {
+        self.ctx.resume().then(function() {
+          self.state = 'running';
+
+          // Emit to all Howls that the audio has resumed.
+          for (var i=0; i<self._howls.length; i++) {
+            self._howls[i]._emit('resume');
+          }
+        });
+
+        if (self._suspendTimer) {
+          clearTimeout(self._suspendTimer);
+          self._suspendTimer = null;
+        }
+      } else if (self.state === 'suspending') {
+        self._resumeAfterSuspend = true;
+      }
+
+      return self;
+    }
+  };
+
+  // Setup the global audio controller.
+  var Howler = new HowlerGlobal();
+
+  /** Group Methods **/
+  /***************************************************************************/
+
+  /**
+   * Create an audio group controller.
+   * @param {Object} o Passed in properties for this group.
+   */
+  var Howl = function(o) {
+    var self = this;
+
+    // Throw an error if no source is provided.
+    if (!o.src || o.src.length === 0) {
+      console.error('An array of source files must be passed with any new Howl.');
+      return;
+    }
+
+    self.init(o);
+  };
+  Howl.prototype = {
+    /**
+     * Initialize a new Howl group object.
+     * @param  {Object} o Passed in properties for this group.
+     * @return {Howl}
+     */
+    init: function(o) {
+      var self = this;
+
+      // If we don't have an AudioContext created yet, run the setup.
+      if (!Howler.ctx) {
+        setupAudioContext();
+      }
+
+      // Setup user-defined default properties.
+      self._autoplay = o.autoplay || false;
+      self._format = (typeof o.format !== 'string') ? o.format : [o.format];
+      self._html5 = o.html5 || false;
+      self._muted = o.mute || false;
+      self._loop = o.loop || false;
+      self._pool = o.pool || 5;
+      self._preload = (typeof o.preload === 'boolean') ? o.preload : true;
+      self._rate = o.rate || 1;
+      self._sprite = o.sprite || {};
+      self._src = (typeof o.src !== 'string') ? o.src : [o.src];
+      self._volume = o.volume !== undefined ? o.volume : 1;
+
+      // Setup all other default properties.
+      self._duration = 0;
+      self._state = 'unloaded';
+      self._sounds = [];
+      self._endTimers = {};
+      self._queue = [];
+
+      // Setup event listeners.
+      self._onend = o.onend ? [{fn: o.onend}] : [];
+      self._onfade = o.onfade ? [{fn: o.onfade}] : [];
+      self._onload = o.onload ? [{fn: o.onload}] : [];
+      self._onloaderror = o.onloaderror ? [{fn: o.onloaderror}] : [];
+      self._onpause = o.onpause ? [{fn: o.onpause}] : [];
+      self._onplay = o.onplay ? [{fn: o.onplay}] : [];
+      self._onstop = o.onstop ? [{fn: o.onstop}] : [];
+      self._onmute = o.onmute ? [{fn: o.onmute}] : [];
+      self._onvolume = o.onvolume ? [{fn: o.onvolume}] : [];
+      self._onrate = o.onrate ? [{fn: o.onrate}] : [];
+      self._onseek = o.onseek ? [{fn: o.onseek}] : [];
+      self._onresume = [];
+
+      // Web Audio or HTML5 Audio?
+      self._webAudio = Howler.usingWebAudio && !self._html5;
+
+      // Automatically try to enable audio on iOS.
+      if (typeof Howler.ctx !== 'undefined' && Howler.ctx && Howler.mobileAutoEnable) {
+        Howler._enableMobileAudio();
+      }
+
+      // Keep track of this Howl group in the global controller.
+      Howler._howls.push(self);
+
+      // If they selected autoplay, add a play event to the load queue.
+      if (self._autoplay) {
+        self._queue.push({
+          event: 'play',
+          action: function() {
+            self.play();
+          }
+        });
+      }
+
+      // Load the source file unless otherwise specified.
+      if (self._preload) {
+        self.load();
+      }
+
+      return self;
+    },
+
+    /**
+     * Load the audio file.
+     * @return {Howler}
+     */
+    load: function() {
+      var self = this;
+      var url = null;
+
+      // If no audio is available, quit immediately.
+      if (Howler.noAudio) {
+        self._emit('loaderror', null, 'No audio support.');
+        return;
+      }
+
+      // Make sure our source is in an array.
+      if (typeof self._src === 'string') {
+        self._src = [self._src];
+      }
+
+      // Loop through the sources and pick the first one that is compatible.
+      for (var i=0; i<self._src.length; i++) {
+        var ext, str;
+
+        if (self._format && self._format[i]) {
+          // If an extension was specified, use that instead.
+          ext = self._format[i];
+        } else {
+          // Make sure the source is a string.
+          str = self._src[i];
+          if (typeof str !== 'string') {
+            self._emit('loaderror', null, 'Non-string found in selected audio sources - ignoring.');
+            continue;
+          }
+
+          // Extract the file extension from the URL or base64 data URI.
+          ext = /^data:audio\/([^;,]+);/i.exec(str);
+          if (!ext) {
+            ext = /\.([^.]+)$/.exec(str.split('?', 1)[0]);
+          }
+
+          if (ext) {
+            ext = ext[1].toLowerCase();
+          }
+        }
+
+        // Log a warning if no extension was found.
+        if (!ext) {
+          console.warn('No file extension was found. Consider using the "format" property or specify an extension.');
+        }
+
+        // Check if this extension is available.
+        if (ext && Howler.codecs(ext)) {
+          url = self._src[i];
+          break;
+        }
+      }
+
+      if (!url) {
+        self._emit('loaderror', null, 'No codec support for selected audio sources.');
+        return;
+      }
+
+      self._src = url;
+      self._state = 'loading';
+
+      // If the hosting page is HTTPS and the source isn't,
+      // drop down to HTML5 Audio to avoid Mixed Content errors.
+      if (window.location.protocol === 'https:' && url.slice(0, 5) === 'http:') {
+        self._html5 = true;
+        self._webAudio = false;
+      }
+
+      // Create a new sound object and add it to the pool.
+      new Sound(self);
+
+      // Load and decode the audio data for playback.
+      if (self._webAudio) {
+        loadBuffer(self);
+      }
+
+      return self;
+    },
+
+    /**
+     * Play a sound or resume previous playback.
+     * @param  {String/Number} sprite   Sprite name for sprite playback or sound id to continue previous.
+     * @param  {Boolean} internal Internal Use: true prevents event firing.
+     * @return {Number}          Sound ID.
+     */
+    play: function(sprite, internal) {
+      var self = this;
+      var id = null;
+
+      // Determine if a sprite, sound id or nothing was passed
+      if (typeof sprite === 'number') {
+        id = sprite;
+        sprite = null;
+      } else if (typeof sprite === 'string' && self._state === 'loaded' && !self._sprite[sprite]) {
+        // If the passed sprite doesn't exist, do nothing.
+        return null;
+      } else if (typeof sprite === 'undefined') {
+        // Use the default sound sprite (plays the full audio length).
+        sprite = '__default';
+
+        // Check if there is a single paused sound that isn't ended.
+        // If there is, play that sound. If not, continue as usual.
+        var num = 0;
+        for (var i=0; i<self._sounds.length; i++) {
+          if (self._sounds[i]._paused && !self._sounds[i]._ended) {
+            num++;
+            id = self._sounds[i]._id;
+          }
+        }
+
+        if (num === 1) {
+          sprite = null;
+        } else {
+          id = null;
+        }
+      }
+
+      // Get the selected node, or get one from the pool.
+      var sound = id ? self._soundById(id) : self._inactiveSound();
+
+      // If the sound doesn't exist, do nothing.
+      if (!sound) {
+        return null;
+      }
+
+      // Select the sprite definition.
+      if (id && !sprite) {
+        sprite = sound._sprite || '__default';
+      }
+
+      // If the sound hasn't loaded, we must wait to get the audio's duration.
+      // We also need to wait to make sure we don't run into race conditions with
+      // the order of function calls.
+      if (self._state !== 'loaded') {
+        // Set the sprite value on this sound.
+        sound._sprite = sprite;
+
+        // Makr this sounded as not ended in case another sound is played before this one loads.
+        sound._ended = false;
+
+        // Add the sound to the queue to be played on load.
+        var soundId = sound._id;
+        self._queue.push({
+          event: 'play',
+          action: function() {
+            self.play(soundId);
+          }
+        });
+
+        return soundId;
+      }
+
+      // Don't play the sound if an id was passed and it is already playing.
+      if (id && !sound._paused) {
+        // Trigger the play event, in order to keep iterating through queue.
+        if (!internal) {
+          setTimeout(function() {
+            self._emit('play', sound._id);
+          }, 0);
+        }
+
+        return sound._id;
+      }
+
+      // Make sure the AudioContext isn't suspended, and resume it if it is.
+      if (self._webAudio) {
+        Howler._autoResume();
+      }
+
+      // Determine how long to play for and where to start playing.
+      var seek = Math.max(0, sound._seek > 0 ? sound._seek : self._sprite[sprite][0] / 1000);
+      var duration = Math.max(0, ((self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000) - seek);
+      var timeout = (duration * 1000) / Math.abs(sound._rate);
+
+      // Update the parameters of the sound
+      sound._paused = false;
+      sound._ended = false;
+      sound._sprite = sprite;
+      sound._seek = seek;
+      sound._start = self._sprite[sprite][0] / 1000;
+      sound._stop = (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000;
+      sound._loop = !!(sound._loop || self._sprite[sprite][2]);
+
+      // Begin the actual playback.
+      var node = sound._node;
+      if (self._webAudio) {
+        // Fire this when the sound is ready to play to begin Web Audio playback.
+        var playWebAudio = function() {
+          self._refreshBuffer(sound);
+
+          // Setup the playback params.
+          var vol = (sound._muted || self._muted) ? 0 : sound._volume;
+          node.gain.setValueAtTime(vol, Howler.ctx.currentTime);
+          sound._playStart = Howler.ctx.currentTime;
+
+          // Play the sound using the supported method.
+          if (typeof node.bufferSource.start === 'undefined') {
+            sound._loop ? node.bufferSource.noteGrainOn(0, seek, 86400) : node.bufferSource.noteGrainOn(0, seek, duration);
+          } else {
+            sound._loop ? node.bufferSource.start(0, seek, 86400) : node.bufferSource.start(0, seek, duration);
+          }
+
+          // Start a new timer if none is present.
+          if (timeout !== Infinity) {
+            self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);
+          }
+
+          if (!internal) {
+            setTimeout(function() {
+              self._emit('play', sound._id);
+            }, 0);
+          }
+        };
+
+        var isRunning = (Howler.state === 'running');
+        if (self._state === 'loaded' && isRunning) {
+          playWebAudio();
+        } else {
+          // Wait for the audio to load and then begin playback.
+          var event = !isRunning && self._state === 'loaded' ? 'resume' : 'load';
+          self.once(event, playWebAudio, isRunning ? sound._id : null);
+
+          // Cancel the end timer.
+          self._clearTimer(sound._id);
+        }
+      } else {
+        // Fire this when the sound is ready to play to begin HTML5 Audio playback.
+        var playHtml5 = function() {
+          node.currentTime = seek;
+          node.muted = sound._muted || self._muted || Howler._muted || node.muted;
+          node.volume = sound._volume * Howler.volume();
+          node.playbackRate = sound._rate;
+          node.play();
+
+          // Setup the new end timer.
+          if (timeout !== Infinity) {
+            self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);
+          }
+
+          if (!internal) {
+            self._emit('play', sound._id);
+          }
+        };
+
+        // Play immediately if ready, or wait for the 'canplaythrough'e vent.
+        var loadedNoReadyState = (self._state === 'loaded' && (window && window.ejecta || !node.readyState && Howler._navigator.isCocoonJS));
+        if (node.readyState === 4 || loadedNoReadyState) {
+          playHtml5();
+        } else {
+          var listener = function() {
+            // Begin playback.
+            playHtml5();
+
+            // Clear this listener.
+            node.removeEventListener(Howler._canPlayEvent, listener, false);
+          };
+          node.addEventListener(Howler._canPlayEvent, listener, false);
+
+          // Cancel the end timer.
+          self._clearTimer(sound._id);
+        }
+      }
+
+      return sound._id;
+    },
+
+    /**
+     * Pause playback and save current position.
+     * @param  {Number} id The sound ID (empty to pause all in group).
+     * @return {Howl}
+     */
+    pause: function(id) {
+      var self = this;
+
+      // If the sound hasn't loaded, add it to the load queue to pause when capable.
+      if (self._state !== 'loaded') {
+        self._queue.push({
+          event: 'pause',
+          action: function() {
+            self.pause(id);
+          }
+        });
+
+        return self;
+      }
+
+      // If no id is passed, get all ID's to be paused.
+      var ids = self._getSoundIds(id);
+
+      for (var i=0; i<ids.length; i++) {
+        // Clear the end timer.
+        self._clearTimer(ids[i]);
+
+        // Get the sound.
+        var sound = self._soundById(ids[i]);
+
+        if (sound && !sound._paused) {
+          // Reset the seek position.
+          sound._seek = self.seek(ids[i]);
+          sound._rateSeek = 0;
+          sound._paused = true;
+
+          // Stop currently running fades.
+          self._stopFade(ids[i]);
+
+          if (sound._node) {
+            if (self._webAudio) {
+              // Make sure the sound has been created.
+              if (!sound._node.bufferSource) {
+                continue;
+              }
+
+              if (typeof sound._node.bufferSource.stop === 'undefined') {
+                sound._node.bufferSource.noteOff(0);
+              } else {
+                sound._node.bufferSource.stop(0);
+              }
+
+              // Clean up the buffer source.
+              self._cleanBuffer(sound._node);
+            } else if (!isNaN(sound._node.duration) || sound._node.duration === Infinity) {
+              sound._node.pause();
+            }
+          }
+        }
+
+        // Fire the pause event, unless `true` is passed as the 2nd argument.
+        if (!arguments[1]) {
+          self._emit('pause', sound ? sound._id : null);
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Stop playback and reset to start.
+     * @param  {Number} id The sound ID (empty to stop all in group).
+     * @param  {Boolean} internal Internal Use: true prevents event firing.
+     * @return {Howl}
+     */
+    stop: function(id, internal) {
+      var self = this;
+
+      // If the sound hasn't loaded, add it to the load queue to stop when capable.
+      if (self._state !== 'loaded') {
+        self._queue.push({
+          event: 'stop',
+          action: function() {
+            self.stop(id);
+          }
+        });
+
+        return self;
+      }
+
+      // If no id is passed, get all ID's to be stopped.
+      var ids = self._getSoundIds(id);
+
+      for (var i=0; i<ids.length; i++) {
+        // Clear the end timer.
+        self._clearTimer(ids[i]);
+
+        // Get the sound.
+        var sound = self._soundById(ids[i]);
+
+        if (sound) {
+          // Reset the seek position.
+          sound._seek = sound._start || 0;
+          sound._rateSeek = 0;
+          sound._paused = true;
+          sound._ended = true;
+
+          // Stop currently running fades.
+          self._stopFade(ids[i]);
+
+          if (sound._node) {
+            if (self._webAudio) {
+              // Make sure the sound's AudioBufferSourceNode has been created.
+              if (sound._node.bufferSource) {
+                if (typeof sound._node.bufferSource.stop === 'undefined') {
+                  sound._node.bufferSource.noteOff(0);
+                } else {
+                  sound._node.bufferSource.stop(0);
+                }
+
+                // Clean up the buffer source.
+                self._cleanBuffer(sound._node);
+              }
+            } else if (!isNaN(sound._node.duration) || sound._node.duration === Infinity) {
+              sound._node.currentTime = sound._start || 0;
+              sound._node.pause();
+            }
+          }
+
+          if (!internal) {
+            self._emit('stop', sound._id);
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Mute/unmute a single sound or all sounds in this Howl group.
+     * @param  {Boolean} muted Set to true to mute and false to unmute.
+     * @param  {Number} id    The sound ID to update (omit to mute/unmute all).
+     * @return {Howl}
+     */
+    mute: function(muted, id) {
+      var self = this;
+
+      // If the sound hasn't loaded, add it to the load queue to mute when capable.
+      if (self._state !== 'loaded') {
+        self._queue.push({
+          event: 'mute',
+          action: function() {
+            self.mute(muted, id);
+          }
+        });
+
+        return self;
+      }
+
+      // If applying mute/unmute to all sounds, update the group's value.
+      if (typeof id === 'undefined') {
+        if (typeof muted === 'boolean') {
+          self._muted = muted;
+        } else {
+          return self._muted;
+        }
+      }
+
+      // If no id is passed, get all ID's to be muted.
+      var ids = self._getSoundIds(id);
+
+      for (var i=0; i<ids.length; i++) {
+        // Get the sound.
+        var sound = self._soundById(ids[i]);
+
+        if (sound) {
+          sound._muted = muted;
+
+          if (self._webAudio && sound._node) {
+            sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler.ctx.currentTime);
+          } else if (sound._node) {
+            sound._node.muted = Howler._muted ? true : muted;
+          }
+
+          self._emit('mute', sound._id);
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Get/set the volume of this sound or of the Howl group. This method can optionally take 0, 1 or 2 arguments.
+     *   volume() -> Returns the group's volume value.
+     *   volume(id) -> Returns the sound id's current volume.
+     *   volume(vol) -> Sets the volume of all sounds in this Howl group.
+     *   volume(vol, id) -> Sets the volume of passed sound id.
+     * @return {Howl/Number} Returns self or current volume.
+     */
+    volume: function() {
+      var self = this;
+      var args = arguments;
+      var vol, id;
+
+      // Determine the values based on arguments.
+      if (args.length === 0) {
+        // Return the value of the groups' volume.
+        return self._volume;
+      } else if (args.length === 1 || args.length === 2 && typeof args[1] === 'undefined') {
+        // First check if this is an ID, and if not, assume it is a new volume.
+        var ids = self._getSoundIds();
+        var index = ids.indexOf(args[0]);
+        if (index >= 0) {
+          id = parseInt(args[0], 10);
+        } else {
+          vol = parseFloat(args[0]);
+        }
+      } else if (args.length >= 2) {
+        vol = parseFloat(args[0]);
+        id = parseInt(args[1], 10);
+      }
+
+      // Update the volume or return the current volume.
+      var sound;
+      if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) {
+        // If the sound hasn't loaded, add it to the load queue to change volume when capable.
+        if (self._state !== 'loaded') {
+          self._queue.push({
+            event: 'volume',
+            action: function() {
+              self.volume.apply(self, args);
+            }
+          });
+
+          return self;
+        }
+
+        // Set the group volume.
+        if (typeof id === 'undefined') {
+          self._volume = vol;
+        }
+
+        // Update one or all volumes.
+        id = self._getSoundIds(id);
+        for (var i=0; i<id.length; i++) {
+          // Get the sound.
+          sound = self._soundById(id[i]);
+
+          if (sound) {
+            sound._volume = vol;
+
+            // Stop currently running fades.
+            if (!args[2]) {
+              self._stopFade(id[i]);
+            }
+
+            if (self._webAudio && sound._node && !sound._muted) {
+              sound._node.gain.setValueAtTime(vol, Howler.ctx.currentTime);
+            } else if (sound._node && !sound._muted) {
+              sound._node.volume = vol * Howler.volume();
+            }
+
+            self._emit('volume', sound._id);
+          }
+        }
+      } else {
+        sound = id ? self._soundById(id) : self._sounds[0];
+        return sound ? sound._volume : 0;
+      }
+
+      return self;
+    },
+
+    /**
+     * Fade a currently playing sound between two volumes (if no id is passsed, all sounds will fade).
+     * @param  {Number} from The value to fade from (0.0 to 1.0).
+     * @param  {Number} to   The volume to fade to (0.0 to 1.0).
+     * @param  {Number} len  Time in milliseconds to fade.
+     * @param  {Number} id   The sound id (omit to fade all sounds).
+     * @return {Howl}
+     */
+    fade: function(from, to, len, id) {
+      var self = this;
+      var diff = Math.abs(from - to);
+      var dir = from > to ? 'out' : 'in';
+      var steps = diff / 0.01;
+      var stepLen = (steps > 0) ? len / steps : len;
+
+      // Since browsers clamp timeouts to 4ms, we need to clamp our steps to that too.
+      if (stepLen < 4) {
+        steps = Math.ceil(steps / (4 / stepLen));
+        stepLen = 4;
+      }
+
+      // If the sound hasn't loaded, add it to the load queue to fade when capable.
+      if (self._state !== 'loaded') {
+        self._queue.push({
+          event: 'fade',
+          action: function() {
+            self.fade(from, to, len, id);
+          }
+        });
+
+        return self;
+      }
+
+      // Set the volume to the start position.
+      self.volume(from, id);
+
+      // Fade the volume of one or all sounds.
+      var ids = self._getSoundIds(id);
+      for (var i=0; i<ids.length; i++) {
+        // Get the sound.
+        var sound = self._soundById(ids[i]);
+
+        // Create a linear fade or fall back to timeouts with HTML5 Audio.
+        if (sound) {
+          // Stop the previous fade if no sprite is being used (otherwise, volume handles this).
+          if (!id) {
+            self._stopFade(ids[i]);
+          }
+
+          // If we are using Web Audio, let the native methods do the actual fade.
+          if (self._webAudio && !sound._muted) {
+            var currentTime = Howler.ctx.currentTime;
+            var end = currentTime + (len / 1000);
+            sound._volume = from;
+            sound._node.gain.setValueAtTime(from, currentTime);
+            sound._node.gain.linearRampToValueAtTime(to, end);
+          }
+
+          var vol = from;
+          sound._interval = setInterval(function(soundId, sound) {
+            // Update the volume amount, but only if the volume should change.
+            if (steps > 0) {
+              vol += (dir === 'in' ? 0.01 : -0.01);
+            }
+
+            // Make sure the volume is in the right bounds.
+            vol = Math.max(0, vol);
+            vol = Math.min(1, vol);
+
+            // Round to within 2 decimal points.
+            vol = Math.round(vol * 100) / 100;
+
+            // Change the volume.
+            if (self._webAudio) {
+              if (typeof id === 'undefined') {
+                self._volume = vol;
+              }
+
+              sound._volume = vol;
+            } else {
+              self.volume(vol, soundId, true);
+            }
+
+            // When the fade is complete, stop it and fire event.
+            if ((to < from && vol <= to) || (to > from && vol >= to)) {
+              clearInterval(sound._interval);
+              sound._interval = null;
+              self.volume(to, soundId);
+              self._emit('fade', soundId);
+            }
+          }.bind(self, ids[i], sound), stepLen);
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Internal method that stops the currently playing fade when
+     * a new fade starts, volume is changed or the sound is stopped.
+     * @param  {Number} id The sound id.
+     * @return {Howl}
+     */
+    _stopFade: function(id) {
+      var self = this;
+      var sound = self._soundById(id);
+
+      if (sound && sound._interval) {
+        if (self._webAudio) {
+          sound._node.gain.cancelScheduledValues(Howler.ctx.currentTime);
+        }
+
+        clearInterval(sound._interval);
+        sound._interval = null;
+        self._emit('fade', id);
+      }
+
+      return self;
+    },
+
+    /**
+     * Get/set the loop parameter on a sound. This method can optionally take 0, 1 or 2 arguments.
+     *   loop() -> Returns the group's loop value.
+     *   loop(id) -> Returns the sound id's loop value.
+     *   loop(loop) -> Sets the loop value for all sounds in this Howl group.
+     *   loop(loop, id) -> Sets the loop value of passed sound id.
+     * @return {Howl/Boolean} Returns self or current loop value.
+     */
+    loop: function() {
+      var self = this;
+      var args = arguments;
+      var loop, id, sound;
+
+      // Determine the values for loop and id.
+      if (args.length === 0) {
+        // Return the grou's loop value.
+        return self._loop;
+      } else if (args.length === 1) {
+        if (typeof args[0] === 'boolean') {
+          loop = args[0];
+          self._loop = loop;
+        } else {
+          // Return this sound's loop value.
+          sound = self._soundById(parseInt(args[0], 10));
+          return sound ? sound._loop : false;
+        }
+      } else if (args.length === 2) {
+        loop = args[0];
+        id = parseInt(args[1], 10);
+      }
+
+      // If no id is passed, get all ID's to be looped.
+      var ids = self._getSoundIds(id);
+      for (var i=0; i<ids.length; i++) {
+        sound = self._soundById(ids[i]);
+
+        if (sound) {
+          sound._loop = loop;
+          if (self._webAudio && sound._node && sound._node.bufferSource) {
+            sound._node.bufferSource.loop = loop;
+            if (loop) {
+              sound._node.bufferSource.loopStart = sound._start || 0;
+              sound._node.bufferSource.loopEnd = sound._stop;
+            }
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Get/set the playback rate of a sound. This method can optionally take 0, 1 or 2 arguments.
+     *   rate() -> Returns the first sound node's current playback rate.
+     *   rate(id) -> Returns the sound id's current playback rate.
+     *   rate(rate) -> Sets the playback rate of all sounds in this Howl group.
+     *   rate(rate, id) -> Sets the playback rate of passed sound id.
+     * @return {Howl/Number} Returns self or the current playback rate.
+     */
+    rate: function() {
+      var self = this;
+      var args = arguments;
+      var rate, id;
+
+      // Determine the values based on arguments.
+      if (args.length === 0) {
+        // We will simply return the current rate of the first node.
+        id = self._sounds[0]._id;
+      } else if (args.length === 1) {
+        // First check if this is an ID, and if not, assume it is a new rate value.
+        var ids = self._getSoundIds();
+        var index = ids.indexOf(args[0]);
+        if (index >= 0) {
+          id = parseInt(args[0], 10);
+        } else {
+          rate = parseFloat(args[0]);
+        }
+      } else if (args.length === 2) {
+        rate = parseFloat(args[0]);
+        id = parseInt(args[1], 10);
+      }
+
+      // Update the playback rate or return the current value.
+      var sound;
+      if (typeof rate === 'number') {
+        // If the sound hasn't loaded, add it to the load queue to change playback rate when capable.
+        if (self._state !== 'loaded') {
+          self._queue.push({
+            event: 'rate',
+            action: function() {
+              self.rate.apply(self, args);
+            }
+          });
+
+          return self;
+        }
+
+        // Set the group rate.
+        if (typeof id === 'undefined') {
+          self._rate = rate;
+        }
+
+        // Update one or all volumes.
+        id = self._getSoundIds(id);
+        for (var i=0; i<id.length; i++) {
+          // Get the sound.
+          sound = self._soundById(id[i]);
+
+          if (sound) {
+            // Keep track of our position when the rate changed and update the playback
+            // start position so we can properly adjust the seek position for time elapsed.
+            sound._rateSeek = self.seek(id[i]);
+            sound._playStart = self._webAudio ? Howler.ctx.currentTime : sound._playStart;
+            sound._rate = rate;
+
+            // Change the playback rate.
+            if (self._webAudio && sound._node && sound._node.bufferSource) {
+              sound._node.bufferSource.playbackRate.value = rate;
+            } else if (sound._node) {
+              sound._node.playbackRate = rate;
+            }
+
+            // Reset the timers.
+            var seek = self.seek(id[i]);
+            var duration = ((self._sprite[sound._sprite][0] + self._sprite[sound._sprite][1]) / 1000) - seek;
+            var timeout = (duration * 1000) / Math.abs(sound._rate);
+
+            // Start a new end timer if sound is already playing.
+            if (self._endTimers[id[i]] || !sound._paused) {
+              self._clearTimer(id[i]);
+              self._endTimers[id[i]] = setTimeout(self._ended.bind(self, sound), timeout);
+            }
+
+            self._emit('rate', sound._id);
+          }
+        }
+      } else {
+        sound = self._soundById(id);
+        return sound ? sound._rate : self._rate;
+      }
+
+      return self;
+    },
+
+    /**
+     * Get/set the seek position of a sound. This method can optionally take 0, 1 or 2 arguments.
+     *   seek() -> Returns the first sound node's current seek position.
+     *   seek(id) -> Returns the sound id's current seek position.
+     *   seek(seek) -> Sets the seek position of the first sound node.
+     *   seek(seek, id) -> Sets the seek position of passed sound id.
+     * @return {Howl/Number} Returns self or the current seek position.
+     */
+    seek: function() {
+      var self = this;
+      var args = arguments;
+      var seek, id;
+
+      // Determine the values based on arguments.
+      if (args.length === 0) {
+        // We will simply return the current position of the first node.
+        id = self._sounds[0]._id;
+      } else if (args.length === 1) {
+        // First check if this is an ID, and if not, assume it is a new seek position.
+        var ids = self._getSoundIds();
+        var index = ids.indexOf(args[0]);
+        if (index >= 0) {
+          id = parseInt(args[0], 10);
+        } else {
+          id = self._sounds[0]._id;
+          seek = parseFloat(args[0]);
+        }
+      } else if (args.length === 2) {
+        seek = parseFloat(args[0]);
+        id = parseInt(args[1], 10);
+      }
+
+      // If there is no ID, bail out.
+      if (typeof id === 'undefined') {
+        return self;
+      }
+
+      // If the sound hasn't loaded, add it to the load queue to seek when capable.
+      if (self._state !== 'loaded') {
+        self._queue.push({
+          event: 'seek',
+          action: function() {
+            self.seek.apply(self, args);
+          }
+        });
+
+        return self;
+      }
+
+      // Get the sound.
+      var sound = self._soundById(id);
+
+      if (sound) {
+        if (typeof seek === 'number' && seek >= 0) {
+          // Pause the sound and update position for restarting playback.
+          var playing = self.playing(id);
+          if (playing) {
+            self.pause(id, true);
+          }
+
+          // Move the position of the track and cancel timer.
+          sound._seek = seek;
+          sound._ended = false;
+          self._clearTimer(id);
+
+          // Restart the playback if the sound was playing.
+          if (playing) {
+            self.play(id, true);
+          }
+
+          // Update the seek position for HTML5 Audio.
+          if (!self._webAudio && sound._node) {
+            sound._node.currentTime = seek;
+          }
+
+          self._emit('seek', id);
+        } else {
+          if (self._webAudio) {
+            var realTime = self.playing(id) ? Howler.ctx.currentTime - sound._playStart : 0;
+            var rateSeek = sound._rateSeek ? sound._rateSeek - sound._seek : 0;
+            return sound._seek + (rateSeek + realTime * Math.abs(sound._rate));
+          } else {
+            return sound._node.currentTime;
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Check if a specific sound is currently playing or not (if id is provided), or check if at least one of the sounds in the group is playing or not.
+     * @param  {Number}  id The sound id to check. If none is passed, the whole sound group is checked.
+     * @return {Boolean} True if playing and false if not.
+     */
+    playing: function(id) {
+      var self = this;
+
+      // Check the passed sound ID (if any).
+      if (typeof id === 'number') {
+        var sound = self._soundById(id);
+        return sound ? !sound._paused : false;
+      }
+
+      // Otherwise, loop through all sounds and check if any are playing.
+      for (var i=0; i<self._sounds.length; i++) {
+        if (!self._sounds[i]._paused) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
+    /**
+     * Get the duration of this sound. Passing a sound id will return the sprite duration.
+     * @param  {Number} id The sound id to check. If none is passed, return full source duration.
+     * @return {Number} Audio duration in seconds.
+     */
+    duration: function(id) {
+      var self = this;
+      var duration = self._duration;
+
+      // If we pass an ID, get the sound and return the sprite length.
+      var sound = self._soundById(id);
+      if (sound) {
+        duration = self._sprite[sound._sprite][1] / 1000;
+      }
+
+      return duration;
+    },
+
+    /**
+     * Returns the current loaded state of this Howl.
+     * @return {String} 'unloaded', 'loading', 'loaded'
+     */
+    state: function() {
+      return this._state;
+    },
+
+    /**
+     * Unload and destroy the current Howl object.
+     * This will immediately stop all sound instances attached to this group.
+     */
+    unload: function() {
+      var self = this;
+
+      // Stop playing any active sounds.
+      var sounds = self._sounds;
+      for (var i=0; i<sounds.length; i++) {
+        // Stop the sound if it is currently playing.
+        if (!sounds[i]._paused) {
+          self.stop(sounds[i]._id);
+        }
+
+        // Remove the source or disconnect.
+        if (!self._webAudio) {
+          // Set the source to 0-second silence to stop any downloading (except in IE).
+          var checkIE = /MSIE |Trident\//.test(Howler._navigator && Howler._navigator.userAgent);
+          if (!checkIE) {
+            sounds[i]._node.src = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA';
+          }
+
+          // Remove any event listeners.
+          sounds[i]._node.removeEventListener('error', sounds[i]._errorFn, false);
+          sounds[i]._node.removeEventListener(Howler._canPlayEvent, sounds[i]._loadFn, false);
+        }
+
+        // Empty out all of the nodes.
+        delete sounds[i]._node;
+
+        // Make sure all timers are cleared out.
+        self._clearTimer(sounds[i]._id);
+
+        // Remove the references in the global Howler object.
+        var index = Howler._howls.indexOf(self);
+        if (index >= 0) {
+          Howler._howls.splice(index, 1);
+        }
+      }
+
+      // Delete this sound from the cache (if no other Howl is using it).
+      var remCache = true;
+      for (i=0; i<Howler._howls.length; i++) {
+        if (Howler._howls[i]._src === self._src) {
+          remCache = false;
+          break;
+        }
+      }
+
+      if (cache && remCache) {
+        delete cache[self._src];
+      }
+
+      // Clear global errors.
+      Howler.noAudio = false;
+
+      // Clear out `self`.
+      self._state = 'unloaded';
+      self._sounds = [];
+      self = null;
+
+      return null;
+    },
+
+    /**
+     * Listen to a custom event.
+     * @param  {String}   event Event name.
+     * @param  {Function} fn    Listener to call.
+     * @param  {Number}   id    (optional) Only listen to events for this sound.
+     * @param  {Number}   once  (INTERNAL) Marks event to fire only once.
+     * @return {Howl}
+     */
+    on: function(event, fn, id, once) {
+      var self = this;
+      var events = self['_on' + event];
+
+      if (typeof fn === 'function') {
+        events.push(once ? {id: id, fn: fn, once: once} : {id: id, fn: fn});
+      }
+
+      return self;
+    },
+
+    /**
+     * Remove a custom event. Call without parameters to remove all events.
+     * @param  {String}   event Event name.
+     * @param  {Function} fn    Listener to remove. Leave empty to remove all.
+     * @param  {Number}   id    (optional) Only remove events for this sound.
+     * @return {Howl}
+     */
+    off: function(event, fn, id) {
+      var self = this;
+      var events = self['_on' + event];
+      var i = 0;
+
+      // Allow passing just an event and ID.
+      if (typeof fn === 'number') {
+        id = fn;
+        fn = null;
+      }
+
+      if (fn || id) {
+        // Loop through event store and remove the passed function.
+        for (i=0; i<events.length; i++) {
+          var isId = (id === events[i].id);
+          if (fn === events[i].fn && isId || !fn && isId) {
+            events.splice(i, 1);
+            break;
+          }
+        }
+      } else if (event) {
+        // Clear out all events of this type.
+        self['_on' + event] = [];
+      } else {
+        // Clear out all events of every type.
+        var keys = Object.keys(self);
+        for (i=0; i<keys.length; i++) {
+          if ((keys[i].indexOf('_on') === 0) && Array.isArray(self[keys[i]])) {
+            self[keys[i]] = [];
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Listen to a custom event and remove it once fired.
+     * @param  {String}   event Event name.
+     * @param  {Function} fn    Listener to call.
+     * @param  {Number}   id    (optional) Only listen to events for this sound.
+     * @return {Howl}
+     */
+    once: function(event, fn, id) {
+      var self = this;
+
+      // Setup the event listener.
+      self.on(event, fn, id, 1);
+
+      return self;
+    },
+
+    /**
+     * Emit all events of a specific type and pass the sound id.
+     * @param  {String} event Event name.
+     * @param  {Number} id    Sound ID.
+     * @param  {Number} msg   Message to go with event.
+     * @return {Howl}
+     */
+    _emit: function(event, id, msg) {
+      var self = this;
+      var events = self['_on' + event];
+
+      // Loop through event store and fire all functions.
+      for (var i=events.length-1; i>=0; i--) {
+        if (!events[i].id || events[i].id === id || event === 'load') {
+          setTimeout(function(fn) {
+            fn.call(this, id, msg);
+          }.bind(self, events[i].fn), 0);
+
+          // If this event was setup with `once`, remove it.
+          if (events[i].once) {
+            self.off(event, events[i].fn, events[i].id);
+          }
+        }
+      }
+
+      return self;
+    },
+
+    /**
+     * Queue of actions initiated before the sound has loaded.
+     * These will be called in sequence, with the next only firing
+     * after the previous has finished executing (even if async like play).
+     * @return {Howl}
+     */
+    _loadQueue: function() {
+      var self = this;
+
+      if (self._queue.length > 0) {
+        var task = self._queue[0];
+
+        // don't move onto the next task until this one is done
+        self.once(task.event, function() {
+          self._queue.shift();
+          self._loadQueue();
+        });
+
+        task.action();
+      }
+
+      return self;
+    },
+
+    /**
+     * Fired when playback ends at the end of the duration.
+     * @param  {Sound} sound The sound object to work with.
+     * @return {Howl}
+     */
+    _ended: function(sound) {
+      var self = this;
+      var sprite = sound._sprite;
+
+      // If we are using IE and there was network latency we may be clipping
+      // audio before it completes playing. Lets check the node to make sure it
+      // believes it has completed, before ending the playback.
+      if (!self._webAudio && self._node && !self._node.ended) {
+        setTimeout(self._ended.bind(self, sound), 100);
+        return self;
+      }
+
+      // Should this sound loop?
+      var loop = !!(sound._loop || self._sprite[sprite][2]);
+
+      // Fire the ended event.
+      self._emit('end', sound._id);
+
+      // Restart the playback for HTML5 Audio loop.
+      if (!self._webAudio && loop) {
+        self.stop(sound._id, true).play(sound._id);
+      }
+
+      // Restart this timer if on a Web Audio loop.
+      if (self._webAudio && loop) {
+        self._emit('play', sound._id);
+        sound._seek = sound._start || 0;
+        sound._rateSeek = 0;
+        sound._playStart = Howler.ctx.currentTime;
+
+        var timeout = ((sound._stop - sound._start) * 1000) / Math.abs(sound._rate);
+        self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);
+      }
+
+      // Mark the node as paused.
+      if (self._webAudio && !loop) {
+        sound._paused = true;
+        sound._ended = true;
+        sound._seek = sound._start || 0;
+        sound._rateSeek = 0;
+        self._clearTimer(sound._id);
+
+        // Clean up the buffer source.
+        self._cleanBuffer(sound._node);
+
+        // Attempt to auto-suspend AudioContext if no sounds are still playing.
+        Howler._autoSuspend();
+      }
+
+      // When using a sprite, end the track.
+      if (!self._webAudio && !loop) {
+        self.stop(sound._id);
+      }
+
+      return self;
+    },
+
+    /**
+     * Clear the end timer for a sound playback.
+     * @param  {Number} id The sound ID.
+     * @return {Howl}
+     */
+    _clearTimer: function(id) {
+      var self = this;
+
+      if (self._endTimers[id]) {
+        clearTimeout(self._endTimers[id]);
+        delete self._endTimers[id];
+      }
+
+      return self;
+    },
+
+    /**
+     * Return the sound identified by this ID, or return null.
+     * @param  {Number} id Sound ID
+     * @return {Object}    Sound object or null.
+     */
+    _soundById: function(id) {
+      var self = this;
+
+      // Loop through all sounds and find the one with this ID.
+      for (var i=0; i<self._sounds.length; i++) {
+        if (id === self._sounds[i]._id) {
+          return self._sounds[i];
+        }
+      }
+
+      return null;
+    },
+
+    /**
+     * Return an inactive sound from the pool or create a new one.
+     * @return {Sound} Sound playback object.
+     */
+    _inactiveSound: function() {
+      var self = this;
+
+      self._drain();
+
+      // Find the first inactive node to recycle.
+      for (var i=0; i<self._sounds.length; i++) {
+        if (self._sounds[i]._ended) {
+          return self._sounds[i].reset();
+        }
+      }
+
+      // If no inactive node was found, create a new one.
+      return new Sound(self);
+    },
+
+    /**
+     * Drain excess inactive sounds from the pool.
+     */
+    _drain: function() {
+      var self = this;
+      var limit = self._pool;
+      var cnt = 0;
+      var i = 0;
+
+      // If there are less sounds than the max pool size, we are done.
+      if (self._sounds.length < limit) {
+        return;
+      }
+
+      // Count the number of inactive sounds.
+      for (i=0; i<self._sounds.length; i++) {
+        if (self._sounds[i]._ended) {
+          cnt++;
+        }
+      }
+
+      // Remove excess inactive sounds, going in reverse order.
+      for (i=self._sounds.length - 1; i>=0; i--) {
+        if (cnt <= limit) {
+          return;
+        }
+
+        if (self._sounds[i]._ended) {
+          // Disconnect the audio source when using Web Audio.
+          if (self._webAudio && self._sounds[i]._node) {
+            self._sounds[i]._node.disconnect(0);
+          }
+
+          // Remove sounds until we have the pool size.
+          self._sounds.splice(i, 1);
+          cnt--;
+        }
+      }
+    },
+
+    /**
+     * Get all ID's from the sounds pool.
+     * @param  {Number} id Only return one ID if one is passed.
+     * @return {Array}    Array of IDs.
+     */
+    _getSoundIds: function(id) {
+      var self = this;
+
+      if (typeof id === 'undefined') {
+        var ids = [];
+        for (var i=0; i<self._sounds.length; i++) {
+          ids.push(self._sounds[i]._id);
+        }
+
+        return ids;
+      } else {
+        return [id];
+      }
+    },
+
+    /**
+     * Load the sound back into the buffer source.
+     * @param  {Sound} sound The sound object to work with.
+     * @return {Howl}
+     */
+    _refreshBuffer: function(sound) {
+      var self = this;
+
+      // Setup the buffer source for playback.
+      sound._node.bufferSource = Howler.ctx.createBufferSource();
+      sound._node.bufferSource.buffer = cache[self._src];
+
+      // Connect to the correct node.
+      if (sound._panner) {
+        sound._node.bufferSource.connect(sound._panner);
+      } else {
+        sound._node.bufferSource.connect(sound._node);
+      }
+
+      // Setup looping and playback rate.
+      sound._node.bufferSource.loop = sound._loop;
+      if (sound._loop) {
+        sound._node.bufferSource.loopStart = sound._start || 0;
+        sound._node.bufferSource.loopEnd = sound._stop;
+      }
+      sound._node.bufferSource.playbackRate.value = sound._rate;
+
+      return self;
+    },
+
+    /**
+     * Prevent memory leaks by cleaning up the buffer source after playback.
+     * @param  {Object} node Sound's audio node containing the buffer source.
+     * @return {Howl}
+     */
+    _cleanBuffer: function(node) {
+      var self = this;
+
+      if (self._scratchBuffer) {
+        node.bufferSource.onended = null;
+        node.bufferSource.disconnect(0);
+        try { node.bufferSource.buffer = self._scratchBuffer; } catch(e) {}
+      }
+      node.bufferSource = null;
+
+      return self;
+    }
+  };
+
+  /** Single Sound Methods **/
+  /***************************************************************************/
+
+  /**
+   * Setup the sound object, which each node attached to a Howl group is contained in.
+   * @param {Object} howl The Howl parent group.
+   */
+  var Sound = function(howl) {
+    this._parent = howl;
+    this.init();
+  };
+  Sound.prototype = {
+    /**
+     * Initialize a new Sound object.
+     * @return {Sound}
+     */
+    init: function() {
+      var self = this;
+      var parent = self._parent;
+
+      // Setup the default parameters.
+      self._muted = parent._muted;
+      self._loop = parent._loop;
+      self._volume = parent._volume;
+      self._rate = parent._rate;
+      self._seek = 0;
+      self._paused = true;
+      self._ended = true;
+      self._sprite = '__default';
+
+      // Generate a unique ID for this sound.
+      self._id = ++Howler._counter;
+
+      // Add itself to the parent's pool.
+      parent._sounds.push(self);
+
+      // Create the new node.
+      self.create();
+
+      return self;
+    },
+
+    /**
+     * Create and setup a new sound object, whether HTML5 Audio or Web Audio.
+     * @return {Sound}
+     */
+    create: function() {
+      var self = this;
+      var parent = self._parent;
+      var volume = (Howler._muted || self._muted || self._parent._muted) ? 0 : self._volume;
+
+      if (parent._webAudio) {
+        // Create the gain node for controlling volume (the source will connect to this).
+        self._node = (typeof Howler.ctx.createGain === 'undefined') ? Howler.ctx.createGainNode() : Howler.ctx.createGain();
+        self._node.gain.setValueAtTime(volume, Howler.ctx.currentTime);
+        self._node.paused = true;
+        self._node.connect(Howler.masterGain);
+      } else {
+        self._node = new Audio();
+
+        // Listen for errors (http://dev.w3.org/html5/spec-author-view/spec.html#mediaerror).
+        self._errorFn = self._errorListener.bind(self);
+        self._node.addEventListener('error', self._errorFn, false);
+
+        // Listen for 'canplaythrough' event to let us know the sound is ready.
+        self._loadFn = self._loadListener.bind(self);
+        self._node.addEventListener(Howler._canPlayEvent, self._loadFn, false);
+
+        // Setup the new audio node.
+        self._node.src = parent._src;
+        self._node.preload = 'auto';
+        self._node.volume = volume * Howler.volume();
+
+        // Begin loading the source.
+        self._node.load();
+      }
+
+      return self;
+    },
+
+    /**
+     * Reset the parameters of this sound to the original state (for recycle).
+     * @return {Sound}
+     */
+    reset: function() {
+      var self = this;
+      var parent = self._parent;
+
+      // Reset all of the parameters of this sound.
+      self._muted = parent._muted;
+      self._loop = parent._loop;
+      self._volume = parent._volume;
+      self._rate = parent._rate;
+      self._seek = 0;
+      self._rateSeek = 0;
+      self._paused = true;
+      self._ended = true;
+      self._sprite = '__default';
+
+      // Generate a new ID so that it isn't confused with the previous sound.
+      self._id = ++Howler._counter;
+
+      return self;
+    },
+
+    /**
+     * HTML5 Audio error listener callback.
+     */
+    _errorListener: function() {
+      var self = this;
+
+      // Fire an error event and pass back the code.
+      self._parent._emit('loaderror', self._id, self._node.error ? self._node.error.code : 0);
+
+      // Clear the event listener.
+      self._node.removeEventListener('error', self._errorFn, false);
+    },
+
+    /**
+     * HTML5 Audio canplaythrough listener callback.
+     */
+    _loadListener: function() {
+      var self = this;
+      var parent = self._parent;
+
+      // Round up the duration to account for the lower precision in HTML5 Audio.
+      parent._duration = Math.ceil(self._node.duration * 10) / 10;
+
+      // Setup a sprite if none is defined.
+      if (Object.keys(parent._sprite).length === 0) {
+        parent._sprite = {__default: [0, parent._duration * 1000]};
+      }
+
+      if (parent._state !== 'loaded') {
+        parent._state = 'loaded';
+        parent._emit('load');
+        parent._loadQueue();
+      }
+
+      // Clear the event listener.
+      self._node.removeEventListener(Howler._canPlayEvent, self._loadFn, false);
+    }
+  };
+
+  /** Helper Methods **/
+  /***************************************************************************/
+
+  var cache = {};
+
+  /**
+   * Buffer a sound from URL, Data URI or cache and decode to audio source (Web Audio API).
+   * @param  {Howl} self
+   */
+  var loadBuffer = function(self) {
+    var url = self._src;
+
+    // Check if the buffer has already been cached and use it instead.
+    if (cache[url]) {
+      // Set the duration from the cache.
+      self._duration = cache[url].duration;
+
+      // Load the sound into this Howl.
+      loadSound(self);
+
+      return;
+    }
+
+    if (/^data:[^;]+;base64,/.test(url)) {
+      // Decode the base64 data URI without XHR, since some browsers don't support it.
+      var data = atob(url.split(',')[1]);
+      var dataView = new Uint8Array(data.length);
+      for (var i=0; i<data.length; ++i) {
+        dataView[i] = data.charCodeAt(i);
+      }
+
+      decodeAudioData(dataView.buffer, self);
+    } else {
+      // Load the buffer from the URL.
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', url, true);
+      xhr.responseType = 'arraybuffer';
+      xhr.onload = function() {
+        // Make sure we get a successful response back.
+        var code = (xhr.status + '')[0];
+        if (code !== '0' && code !== '2' && code !== '3') {
+          self._emit('loaderror', null, 'Failed loading audio file with status: ' + xhr.status + '.');
+          return;
+        }
+
+        decodeAudioData(xhr.response, self);
+      };
+      xhr.onerror = function() {
+        // If there is an error, switch to HTML5 Audio.
+        if (self._webAudio) {
+          self._html5 = true;
+          self._webAudio = false;
+          self._sounds = [];
+          delete cache[url];
+          self.load();
+        }
+      };
+      safeXhrSend(xhr);
+    }
+  };
+
+  /**
+   * Send the XHR request wrapped in a try/catch.
+   * @param  {Object} xhr XHR to send.
+   */
+  var safeXhrSend = function(xhr) {
+    try {
+      xhr.send();
+    } catch (e) {
+      xhr.onerror();
+    }
+  };
+
+  /**
+   * Decode audio data from an array buffer.
+   * @param  {ArrayBuffer} arraybuffer The audio data.
+   * @param  {Howl}        self
+   */
+  var decodeAudioData = function(arraybuffer, self) {
+    // Decode the buffer into an audio source.
+    Howler.ctx.decodeAudioData(arraybuffer, function(buffer) {
+      if (buffer && self._sounds.length > 0) {
+        cache[self._src] = buffer;
+        loadSound(self, buffer);
+      }
+    }, function() {
+      self._emit('loaderror', null, 'Decoding audio data failed.');
+    });
+  };
+
+  /**
+   * Sound is now loaded, so finish setting everything up and fire the loaded event.
+   * @param  {Howl} self
+   * @param  {Object} buffer The decoded buffer sound source.
+   */
+  var loadSound = function(self, buffer) {
+    // Set the duration.
+    if (buffer && !self._duration) {
+      self._duration = buffer.duration;
+    }
+
+    // Setup a sprite if none is defined.
+    if (Object.keys(self._sprite).length === 0) {
+      self._sprite = {__default: [0, self._duration * 1000]};
+    }
+
+    // Fire the loaded event.
+    if (self._state !== 'loaded') {
+      self._state = 'loaded';
+      self._emit('load');
+      self._loadQueue();
+    }
+  };
+
+  /**
+   * Setup the audio context when available, or switch to HTML5 Audio mode.
+   */
+  var setupAudioContext = function() {
+    // Check if we are using Web Audio and setup the AudioContext if we are.
+    try {
+      if (typeof AudioContext !== 'undefined') {
+        Howler.ctx = new AudioContext();
+      } else if (typeof webkitAudioContext !== 'undefined') {
+        Howler.ctx = new webkitAudioContext();
+      } else {
+        Howler.usingWebAudio = false;
+      }
+    } catch(e) {
+      Howler.usingWebAudio = false;
+    }
+
+    // Check if a webview is being used on iOS8 or earlier (rather than the browser).
+    // If it is, disable Web Audio as it causes crashing.
+    var iOS = (/iP(hone|od|ad)/.test(Howler._navigator && Howler._navigator.platform));
+    var appVersion = Howler._navigator && Howler._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
+    var version = appVersion ? parseInt(appVersion[1], 10) : null;
+    if (iOS && version && version < 9) {
+      var safari = /safari/.test(Howler._navigator && Howler._navigator.userAgent.toLowerCase());
+      if (Howler._navigator && Howler._navigator.standalone && !safari || Howler._navigator && !Howler._navigator.standalone && !safari) {
+        Howler.usingWebAudio = false;
+      }
+    }
+
+    // Create and expose the master GainNode when using Web Audio (useful for plugins or advanced usage).
+    if (Howler.usingWebAudio) {
+      Howler.masterGain = (typeof Howler.ctx.createGain === 'undefined') ? Howler.ctx.createGainNode() : Howler.ctx.createGain();
+      Howler.masterGain.gain.value = Howler._muted ? 0 : 1;
+      Howler.masterGain.connect(Howler.ctx.destination);
+    }
+
+    // Re-run the setup on Howler.
+    Howler._setup();
+  };
+
+  // Add support for AMD (Asynchronous Module Definition) libraries such as require.js.
+  if (typeof define === 'function' && define.amd) {
+    define([], function() {
+      return {
+        Howler: Howler,
+        Howl: Howl
+      };
+    });
+  }
+
+  // Add support for CommonJS libraries such as browserify.
+  if (typeof exports !== 'undefined') {
+    exports.Howler = Howler;
+    exports.Howl = Howl;
+  }
+
+  // Define globally in case AMD is not available or unused.
+  if (typeof window !== 'undefined') {
+    window.HowlerGlobal = HowlerGlobal;
+    window.Howler = Howler;
+    window.Howl = Howl;
+    window.Sound = Sound;
+  } else if (typeof global !== 'undefined') { // Add to global in Node.js (for testing, etc).
+    global.HowlerGlobal = HowlerGlobal;
+    global.Howler = Howler;
+    global.Howl = Howl;
+    global.Sound = Sound;
+  }
+})();
+
+
+/*!
+ *  Spatial Plugin - Adds support for stereo and 3D audio where Web Audio is supported.
+ *  
+ *  howler.js v2.0.4
+ *  howlerjs.com
+ *
+ *  (c) 2013-2017, James Simpson of GoldFire Studios
+ *  goldfirestudios.com
+ *
+ *  MIT License
+ */
+
+(function() {
+
+  'use strict';
+
+  // Setup default properties.
+  HowlerGlobal.prototype._pos = [0, 0, 0];
+  HowlerGlobal.prototype._orientation = [0, 0, -1, 0, 1, 0];
+  
+  /** Global Methods **/
+  /***************************************************************************/
+
+  /**
+   * Helper method to update the stereo panning position of all current Howls.
+   * Future Howls will not use this value unless explicitly set.
+   * @param  {Number} pan A value of -1.0 is all the way left and 1.0 is all the way right.
+   * @return {Howler/Number}     Self or current stereo panning value.
+   */
+  HowlerGlobal.prototype.stereo = function(pan) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self.ctx || !self.ctx.listener) {
+      return self;
+    }
+
+    // Loop through all Howls and update their stereo panning.
+    for (var i=self._howls.length-1; i>=0; i--) {
+      self._howls[i].stereo(pan);
+    }
+
+    return self;
+  };
+
+  /**
+   * Get/set the position of the listener in 3D cartesian space. Sounds using
+   * 3D position will be relative to the listener's position.
+   * @param  {Number} x The x-position of the listener.
+   * @param  {Number} y The y-position of the listener.
+   * @param  {Number} z The z-position of the listener.
+   * @return {Howler/Array}   Self or current listener position.
+   */
+  HowlerGlobal.prototype.pos = function(x, y, z) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self.ctx || !self.ctx.listener) {
+      return self;
+    }
+
+    // Set the defaults for optional 'y' & 'z'.
+    y = (typeof y !== 'number') ? self._pos[1] : y;
+    z = (typeof z !== 'number') ? self._pos[2] : z;
+
+    if (typeof x === 'number') {
+      self._pos = [x, y, z];
+      self.ctx.listener.setPosition(self._pos[0], self._pos[1], self._pos[2]);
+    } else {
+      return self._pos;
+    }
+
+    return self;
+  };
+
+  /**
+   * Get/set the direction the listener is pointing in the 3D cartesian space.
+   * A front and up vector must be provided. The front is the direction the
+   * face of the listener is pointing, and up is the direction the top of the
+   * listener is pointing. Thus, these values are expected to be at right angles
+   * from each other.
+   * @param  {Number} x   The x-orientation of the listener.
+   * @param  {Number} y   The y-orientation of the listener.
+   * @param  {Number} z   The z-orientation of the listener.
+   * @param  {Number} xUp The x-orientation of the top of the listener.
+   * @param  {Number} yUp The y-orientation of the top of the listener.
+   * @param  {Number} zUp The z-orientation of the top of the listener.
+   * @return {Howler/Array}     Returns self or the current orientation vectors.
+   */
+  HowlerGlobal.prototype.orientation = function(x, y, z, xUp, yUp, zUp) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self.ctx || !self.ctx.listener) {
+      return self;
+    }
+
+    // Set the defaults for optional 'y' & 'z'.
+    var or = self._orientation;
+    y = (typeof y !== 'number') ? or[1] : y;
+    z = (typeof z !== 'number') ? or[2] : z;
+    xUp = (typeof xUp !== 'number') ? or[3] : xUp;
+    yUp = (typeof yUp !== 'number') ? or[4] : yUp;
+    zUp = (typeof zUp !== 'number') ? or[5] : zUp;
+
+    if (typeof x === 'number') {
+      self._orientation = [x, y, z, xUp, yUp, zUp];
+      self.ctx.listener.setOrientation(x, y, z, xUp, yUp, zUp);
+    } else {
+      return or;
+    }
+
+    return self;
+  };
+
+  /** Group Methods **/
+  /***************************************************************************/
+
+  /**
+   * Add new properties to the core init.
+   * @param  {Function} _super Core init method.
+   * @return {Howl}
+   */
+  Howl.prototype.init = (function(_super) {
+    return function(o) {
+      var self = this;
+
+      // Setup user-defined default properties.
+      self._orientation = o.orientation || [1, 0, 0];
+      self._stereo = o.stereo || null;
+      self._pos = o.pos || null;
+      self._pannerAttr = {
+        coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : 360,
+        coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : 360,
+        coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : 0,
+        distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : 'inverse',
+        maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : 10000,
+        panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : 'HRTF',
+        refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : 1,
+        rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : 1
+      };
+
+      // Setup event listeners.
+      self._onstereo = o.onstereo ? [{fn: o.onstereo}] : [];
+      self._onpos = o.onpos ? [{fn: o.onpos}] : [];
+      self._onorientation = o.onorientation ? [{fn: o.onorientation}] : [];
+
+      // Complete initilization with howler.js core's init function.
+      return _super.call(this, o);
+    };
+  })(Howl.prototype.init);
+
+  /**
+   * Get/set the stereo panning of the audio source for this sound or all in the group.
+   * @param  {Number} pan  A value of -1.0 is all the way left and 1.0 is all the way right.
+   * @param  {Number} id (optional) The sound ID. If none is passed, all in group will be updated.
+   * @return {Howl/Number}    Returns self or the current stereo panning value.
+   */
+  Howl.prototype.stereo = function(pan, id) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self._webAudio) {
+      return self;
+    }
+
+    // If the sound hasn't loaded, add it to the load queue to change stereo pan when capable.
+    if (self._state !== 'loaded') {
+      self._queue.push({
+        event: 'stereo',
+        action: function() {
+          self.stereo(pan, id);
+        }
+      });
+
+      return self;
+    }
+
+    // Check for PannerStereoNode support and fallback to PannerNode if it doesn't exist.
+    var pannerType = (typeof Howler.ctx.createStereoPanner === 'undefined') ? 'spatial' : 'stereo';
+
+    // Setup the group's stereo panning if no ID is passed.
+    if (typeof id === 'undefined') {
+      // Return the group's stereo panning if no parameters are passed.
+      if (typeof pan === 'number') {
+        self._stereo = pan;
+        self._pos = [pan, 0, 0];
+      } else {
+        return self._stereo;
+      }
+    }
+
+    // Change the streo panning of one or all sounds in group.
+    var ids = self._getSoundIds(id);
+    for (var i=0; i<ids.length; i++) {
+      // Get the sound.
+      var sound = self._soundById(ids[i]);
+
+      if (sound) {
+        if (typeof pan === 'number') {
+          sound._stereo = pan;
+          sound._pos = [pan, 0, 0];
+
+          if (sound._node) {
+            // If we are falling back, make sure the panningModel is equalpower.
+            sound._pannerAttr.panningModel = 'equalpower';
+
+            // Check if there is a panner setup and create a new one if not.
+            if (!sound._panner || !sound._panner.pan) {
+              setupPanner(sound, pannerType);
+            }
+
+            if (pannerType === 'spatial') {
+              sound._panner.setPosition(pan, 0, 0);
+            } else {
+              sound._panner.pan.value = pan;
+            }
+          }
+
+          self._emit('stereo', sound._id);
+        } else {
+          return sound._stereo;
+        }
+      }
+    }
+
+    return self;
+  };
+
+  /**
+   * Get/set the 3D spatial position of the audio source for this sound or
+   * all in the group. The most common usage is to set the 'x' position for
+   * left/right panning. Setting any value higher than 1.0 will begin to
+   * decrease the volume of the sound as it moves further away.
+   * @param  {Number} x  The x-position of the audio from -1000.0 to 1000.0.
+   * @param  {Number} y  The y-position of the audio from -1000.0 to 1000.0.
+   * @param  {Number} z  The z-position of the audio from -1000.0 to 1000.0.
+   * @param  {Number} id (optional) The sound ID. If none is passed, all in group will be updated.
+   * @return {Howl/Array}    Returns self or the current 3D spatial position: [x, y, z].
+   */
+  Howl.prototype.pos = function(x, y, z, id) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self._webAudio) {
+      return self;
+    }
+
+    // If the sound hasn't loaded, add it to the load queue to change position when capable.
+    if (self._state !== 'loaded') {
+      self._queue.push({
+        event: 'pos',
+        action: function() {
+          self.pos(x, y, z, id);
+        }
+      });
+
+      return self;
+    }
+
+    // Set the defaults for optional 'y' & 'z'.
+    y = (typeof y !== 'number') ? 0 : y;
+    z = (typeof z !== 'number') ? -0.5 : z;
+
+    // Setup the group's spatial position if no ID is passed.
+    if (typeof id === 'undefined') {
+      // Return the group's spatial position if no parameters are passed.
+      if (typeof x === 'number') {
+        self._pos = [x, y, z];
+      } else {
+        return self._pos;
+      }
+    }
+
+    // Change the spatial position of one or all sounds in group.
+    var ids = self._getSoundIds(id);
+    for (var i=0; i<ids.length; i++) {
+      // Get the sound.
+      var sound = self._soundById(ids[i]);
+
+      if (sound) {
+        if (typeof x === 'number') {
+          sound._pos = [x, y, z];
+
+          if (sound._node) {
+            // Check if there is a panner setup and create a new one if not.
+            if (!sound._panner || sound._panner.pan) {
+              setupPanner(sound, 'spatial');
+            }
+
+            sound._panner.setPosition(x, y, z);
+          }
+
+          self._emit('pos', sound._id);
+        } else {
+          return sound._pos;
+        }
+      }
+    }
+
+    return self;
+  };
+
+  /**
+   * Get/set the direction the audio source is pointing in the 3D cartesian coordinate
+   * space. Depending on how direction the sound is, based on the `cone` attributes,
+   * a sound pointing away from the listener can be quiet or silent.
+   * @param  {Number} x  The x-orientation of the source.
+   * @param  {Number} y  The y-orientation of the source.
+   * @param  {Number} z  The z-orientation of the source.
+   * @param  {Number} id (optional) The sound ID. If none is passed, all in group will be updated.
+   * @return {Howl/Array}    Returns self or the current 3D spatial orientation: [x, y, z].
+   */
+  Howl.prototype.orientation = function(x, y, z, id) {
+    var self = this;
+
+    // Stop right here if not using Web Audio.
+    if (!self._webAudio) {
+      return self;
+    }
+
+    // If the sound hasn't loaded, add it to the load queue to change orientation when capable.
+    if (self._state !== 'loaded') {
+      self._queue.push({
+        event: 'orientation',
+        action: function() {
+          self.orientation(x, y, z, id);
+        }
+      });
+
+      return self;
+    }
+
+    // Set the defaults for optional 'y' & 'z'.
+    y = (typeof y !== 'number') ? self._orientation[1] : y;
+    z = (typeof z !== 'number') ? self._orientation[2] : z;
+
+    // Setup the group's spatial orientation if no ID is passed.
+    if (typeof id === 'undefined') {
+      // Return the group's spatial orientation if no parameters are passed.
+      if (typeof x === 'number') {
+        self._orientation = [x, y, z];
+      } else {
+        return self._orientation;
+      }
+    }
+
+    // Change the spatial orientation of one or all sounds in group.
+    var ids = self._getSoundIds(id);
+    for (var i=0; i<ids.length; i++) {
+      // Get the sound.
+      var sound = self._soundById(ids[i]);
+
+      if (sound) {
+        if (typeof x === 'number') {
+          sound._orientation = [x, y, z];
+
+          if (sound._node) {
+            // Check if there is a panner setup and create a new one if not.
+            if (!sound._panner) {
+              // Make sure we have a position to setup the node with.
+              if (!sound._pos) {
+                sound._pos = self._pos || [0, 0, -0.5];
+              }
+
+              setupPanner(sound, 'spatial');
+            }
+
+            sound._panner.setOrientation(x, y, z);
+          }
+
+          self._emit('orientation', sound._id);
+        } else {
+          return sound._orientation;
+        }
+      }
+    }
+
+    return self;
+  };
+
+  /**
+   * Get/set the panner node's attributes for a sound or group of sounds.
+   * This method can optionall take 0, 1 or 2 arguments.
+   *   pannerAttr() -> Returns the group's values.
+   *   pannerAttr(id) -> Returns the sound id's values.
+   *   pannerAttr(o) -> Set's the values of all sounds in this Howl group.
+   *   pannerAttr(o, id) -> Set's the values of passed sound id.
+   *
+   *   Attributes:
+   *     coneInnerAngle - (360 by default) There will be no volume reduction inside this angle.
+   *     coneOuterAngle - (360 by default) The volume will be reduced to a constant value of
+   *                      `coneOuterGain` outside this angle.
+   *     coneOuterGain - (0 by default) The amount of volume reduction outside of `coneOuterAngle`.
+   *     distanceModel - ('inverse' by default) Determines algorithm to use to reduce volume as audio moves
+   *                      away from listener. Can be `linear`, `inverse` or `exponential`.
+   *     maxDistance - (10000 by default) Volume won't reduce between source/listener beyond this distance.
+   *     panningModel - ('HRTF' by default) Determines which spatialization algorithm is used to position audio.
+   *                     Can be `HRTF` or `equalpower`.
+   *     refDistance - (1 by default) A reference distance for reducing volume as the source
+   *                    moves away from the listener.
+   *     rolloffFactor - (1 by default) How quickly the volume reduces as source moves from listener.
+   * 
+   * @return {Howl/Object} Returns self or current panner attributes.
+   */
+  Howl.prototype.pannerAttr = function() {
+    var self = this;
+    var args = arguments;
+    var o, id, sound;
+
+    // Stop right here if not using Web Audio.
+    if (!self._webAudio) {
+      return self;
+    }
+
+    // Determine the values based on arguments.
+    if (args.length === 0) {
+      // Return the group's panner attribute values.
+      return self._pannerAttr;
+    } else if (args.length === 1) {
+      if (typeof args[0] === 'object') {
+        o = args[0];
+
+        // Set the grou's panner attribute values.
+        if (typeof id === 'undefined') {
+          self._pannerAttr = {
+            coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : self._coneInnerAngle,
+            coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : self._coneOuterAngle,
+            coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : self._coneOuterGain,
+            distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : self._distanceModel,
+            maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : self._maxDistance,
+            panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : self._panningModel,
+            refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : self._refDistance,
+            rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : self._rolloffFactor
+          };
+        }
+      } else {
+        // Return this sound's panner attribute values.
+        sound = self._soundById(parseInt(args[0], 10));
+        return sound ? sound._pannerAttr : self._pannerAttr;
+      }
+    } else if (args.length === 2) {
+      o = args[0];
+      id = parseInt(args[1], 10);
+    }
+
+    // Update the values of the specified sounds.
+    var ids = self._getSoundIds(id);
+    for (var i=0; i<ids.length; i++) {
+      sound = self._soundById(ids[i]);
+
+      if (sound) {
+        // Merge the new values into the sound.
+        var pa = sound._pannerAttr;
+        pa = {
+          coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : pa.coneInnerAngle,
+          coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : pa.coneOuterAngle,
+          coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : pa.coneOuterGain,
+          distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : pa.distanceModel,
+          maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : pa.maxDistance,
+          panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : pa.panningModel,
+          refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : pa.refDistance,
+          rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : pa.rolloffFactor
+        };
+
+        // Update the panner values or create a new panner if none exists.
+        var panner = sound._panner;
+        if (panner) {
+          panner.coneInnerAngle = pa.coneInnerAngle;
+          panner.coneOuterAngle = pa.coneOuterAngle;
+          panner.coneOuterGain = pa.coneOuterGain;
+          panner.distanceModel = pa.distanceModel;
+          panner.maxDistance = pa.maxDistance;
+          panner.panningModel = pa.panningModel;
+          panner.refDistance = pa.refDistance;
+          panner.rolloffFactor = pa.rolloffFactor;
+        } else {
+          // Make sure we have a position to setup the node with.
+          if (!sound._pos) {
+            sound._pos = self._pos || [0, 0, -0.5];
+          }
+
+          // Create a new panner node.
+          setupPanner(sound, 'spatial');
+        }
+      }
+    }
+
+    return self;
+  };
+
+  /** Single Sound Methods **/
+  /***************************************************************************/
+
+  /**
+   * Add new properties to the core Sound init.
+   * @param  {Function} _super Core Sound init method.
+   * @return {Sound}
+   */
+  Sound.prototype.init = (function(_super) {
+    return function() {
+      var self = this;
+      var parent = self._parent;
+
+      // Setup user-defined default properties.
+      self._orientation = parent._orientation;
+      self._stereo = parent._stereo;
+      self._pos = parent._pos;
+      self._pannerAttr = parent._pannerAttr;
+
+      // Complete initilization with howler.js core Sound's init function.
+      _super.call(this);
+
+      // If a stereo or position was specified, set it up.
+      if (self._stereo) {
+        parent.stereo(self._stereo);
+      } else if (self._pos) {
+        parent.pos(self._pos[0], self._pos[1], self._pos[2], self._id);
+      }
+    };
+  })(Sound.prototype.init);
+
+  /**
+   * Override the Sound.reset method to clean up properties from the spatial plugin.
+   * @param  {Function} _super Sound reset method.
+   * @return {Sound}
+   */
+  Sound.prototype.reset = (function(_super) {
+    return function() {
+      var self = this;
+      var parent = self._parent;
+
+      // Reset all spatial plugin properties on this sound.
+      self._orientation = parent._orientation;
+      self._pos = parent._pos;
+      self._pannerAttr = parent._pannerAttr;
+
+      // Complete resetting of the sound.
+      return _super.call(this);
+    };
+  })(Sound.prototype.reset);
+
+  /** Helper Methods **/
+  /***************************************************************************/
+
+  /**
+   * Create a new panner node and save it on the sound.
+   * @param  {Sound} sound Specific sound to setup panning on.
+   * @param {String} type Type of panner to create: 'stereo' or 'spatial'.
+   */
+  var setupPanner = function(sound, type) {
+    type = type || 'spatial';
+
+    // Create the new panner node.
+    if (type === 'spatial') {
+      sound._panner = Howler.ctx.createPanner();
+      sound._panner.coneInnerAngle = sound._pannerAttr.coneInnerAngle;
+      sound._panner.coneOuterAngle = sound._pannerAttr.coneOuterAngle;
+      sound._panner.coneOuterGain = sound._pannerAttr.coneOuterGain;
+      sound._panner.distanceModel = sound._pannerAttr.distanceModel;
+      sound._panner.maxDistance = sound._pannerAttr.maxDistance;
+      sound._panner.panningModel = sound._pannerAttr.panningModel;
+      sound._panner.refDistance = sound._pannerAttr.refDistance;
+      sound._panner.rolloffFactor = sound._pannerAttr.rolloffFactor;
+      sound._panner.setPosition(sound._pos[0], sound._pos[1], sound._pos[2]);
+      sound._panner.setOrientation(sound._orientation[0], sound._orientation[1], sound._orientation[2]);
+    } else {
+      sound._panner = Howler.ctx.createStereoPanner();
+      sound._panner.pan.value = sound._stereo;
+    }
+
+    sound._panner.connect(sound._node);
+
+    // Update the connections.
+    if (!sound._paused) {
+      sound._parent.pause(sound._id, true).play(sound._id);
+    }
+  };
+})();
diff --git a/static/main.css b/static/main.css
index 221137e..8b13789 100644
--- a/static/main.css
+++ b/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;
-}
 
diff --git a/static/main.js b/static/main.js
index e5fc4d4..4ad2b7d 100644
--- a/static/main.js
+++ b/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,13 +58,21 @@ 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) {
-			ajaxRequest("/?killvideo=yes");			
+			// ctrl+k and ctrl+c key binding
+			if (localModeEnabled) {
+				killAllHowlerAudio();
+			} else {
+				ajaxRequest("/?killvideo=yes");
+			}
+		} else if (evt.keyCode == 88 && evt.ctrlKey){
+			toggleLocalMode();			
 		}	
 	};
 	
@@ -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();
+	}	
+}
+
diff --git a/templates/index.html b/templates/index.html
index 8c04664..f2f56bf 100644
--- a/templates/index.html
+++ b/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>

From cd933addf7d09132ad4596de9b357337e007ee56 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 00:58:39 +0200
Subject: [PATCH 17/30] added kill audio support for local playback

---
 static/main.js       | 16 ++++++++++------
 templates/index.html |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/static/main.js b/static/main.js
index 4ad2b7d..d80a766 100644
--- a/static/main.js
+++ b/static/main.js
@@ -66,11 +66,7 @@ ready(function() {
 			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");
-			}
+			killAllAudio();
 		} else if (evt.keyCode == 88 && evt.ctrlKey){
 			toggleLocalMode();			
 		}	
@@ -85,7 +81,7 @@ ready(function() {
 		    // keylistener for enter or ctrl+enter (which is k10 on chrome)
 		    if (key === 13 || (key === 10 && e.ctrlKey)) {
 			if(e.ctrlKey){
-				ajaxRequest("/?killvideo=yes");
+				killAllAudio();
 				await sleep(100);
 			}
 			source.classList.add("sound-pressed");
@@ -172,3 +168,11 @@ function killAllHowlerAudio(){
 	}	
 }
 
+function killAllAudio(){
+	if (localModeEnabled) {
+        	killAllHowlerAudio();
+        } else {
+                ajaxRequest("/?killvideo=yes");
+        }
+}
+
diff --git a/templates/index.html b/templates/index.html
index f2f56bf..3e31879 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -53,7 +53,7 @@
 					</form>
 					<button onclick="playStream();">Play!</button>
 				</div>
-				<button name="submit" onclick="ajaxRequest('/?killvideo=yes');">Terminate videos</button>
+				<button name="submit" onclick="killAllAudio();">Terminate videos</button>
 			</section>
 			<section id="voice" style="display:none;">
 				<form action="/say/" method="POST">

From fa9a8de0eb6b438ce520a35f70a4a2d1cccd8a9c Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 13:13:35 +0200
Subject: [PATCH 18/30] added main.css with support for local playback

... as it has been missed in cd933addf7d09132ad4596de9b357337e007ee56
---
 static/main.css | 141 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/static/main.css b/static/main.css
index 8b13789..7cffd89 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1 +1,142 @@
+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;
+	display: inline;
+	vertical-align: middle;
+}
+
+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;
+}
+
+#local-mode-button .local {
+	color: red;
+}
 

From c3c8af986d0b5864a7a7041276ff6d8b0944f4b5 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 13:21:23 +0200
Subject: [PATCH 19/30] removed div dependency as mentioned in
 6758be03968a4cc563fbf665382cac7588f05814#note_855

---
 static/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/main.css b/static/main.css
index 7cffd89..f758fc3 100644
--- a/static/main.css
+++ b/static/main.css
@@ -80,14 +80,14 @@ section {
 	width: 100%;
 }
 
-div #reset {
+#reset {
 	font-size: 2em;
 	padding-left: 5px;
 	display: inline;
 	vertical-align: middle;
 }
 
-div #reset:hover {
+#reset:hover {
 	cursor: pointer;
 }
 

From 8eaf74a4b417b154355658b952f419420fb3fd6a Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 13:58:41 +0200
Subject: [PATCH 20/30] added apache config for serving sounds to clients

... and playing them on client side

addition to 55e8e04bb25a7ac8ccde6e38b889ec4fad29c7de
---
 apache/010-soundboard.conf | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apache/010-soundboard.conf b/apache/010-soundboard.conf
index 84372a9..03cb961 100644
--- a/apache/010-soundboard.conf
+++ b/apache/010-soundboard.conf
@@ -1,10 +1,10 @@
 Listen 5000
 <VirtualHost *:5000>
-    #ServerName example.com
-
     WSGIDaemonProcess soundboard user=www-data group=www-data threads=5
     WSGIScriptAlias / /var/www/soundboard/soundboard.wsgi
 
+    Alias /sounds /home/pi/sounds
+
     <Directory /var/www/soundboard>
         WSGIProcessGroup soundboard
         WSGIApplicationGroup %{GLOBAL}
@@ -12,4 +12,14 @@ Listen 5000
         Order deny,allow
         Allow from all
     </Directory>
+
+    <Directory /home/pi/sounds>
+	Options FollowSymLinks
+	AllowOverride All
+	Order deny,allow
+        Allow from all
+	Require all granted
+    </Directory>
+
 </VirtualHost>
+

From ed84c4fbe9b5e0c1256b6739c5470512e52907b6 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 13:59:24 +0200
Subject: [PATCH 21/30] added TODOs to main.js

---
 static/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/main.js b/static/main.js
index d80a766..a6e77fb 100644
--- a/static/main.js
+++ b/static/main.js
@@ -72,6 +72,7 @@ ready(function() {
 		}	
 	};
 	
+	// TODO: make sure that only sound buttons get selected, not ALL a-tags. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_857
 	// keyboard listener for enter key
 	var all_a_s = document.getElementsByTagName("a"); 
 	for(i=0; i<all_a_s.length; i++) {	
@@ -99,6 +100,7 @@ function resetSearch() {
 	var searchfield = document.querySelector("#search");
 	var buttons = document.querySelectorAll(".sound");
 
+	// TODO: check if blur() still necessary or if value="" and focus() are already enough. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_871
 	searchfield.blur();
 
         buttons.forEach(function(item) {

From 94224c0c646809c711e61ba1ab791f524a8e1447 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Fri, 4 Aug 2017 14:18:06 +0200
Subject: [PATCH 22/30] Serve sound files via Flask for local playback

---
 soundboard.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/soundboard.py b/soundboard.py
index 5d32c74..d6d7616 100644
--- a/soundboard.py
+++ b/soundboard.py
@@ -1,7 +1,7 @@
 import os
 import subprocess
 
-from flask import Flask, render_template, request, redirect, url_for
+from flask import Flask, render_template, request, redirect, url_for, send_from_directory
 
 import config
 
@@ -49,3 +49,7 @@ def index(sound=None, text=None, video=None):
         subprocess.Popen(["pkill", "-f", "omxplayer"])
 
     return render_template("index.html", sounds=sounds)
+
+@app.route("/sounds/<path:name>")
+def sounds(name):
+	return send_from_directory(config.path, name)

From 6e538a6bf89f6e4ac945023f7340a8f3f7734cb6 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 12:21:09 +0000
Subject: [PATCH 23/30] Update README.rst

---
 README.rst | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/README.rst b/README.rst
index 1375c80..4ce90ab 100644
--- a/README.rst
+++ b/README.rst
@@ -59,3 +59,28 @@ Production
 For production deployment Apache (or other webservers like nginx, lighttpd etc.) should be used.
 
 For Apache a sample configuration is provided in the folder `apache` which can be adapted.
+
+Please keep in mind that you may have to adjust the path to the sound files in your apache config in order to enable local playback on the clients.
+
+Usage
+=====
+
+Users can browse the webinterface, search for sounds and play them on the remote server or their local browser.
+
+Additionally to the normal point and click usage there are also several keyboard shortcuts available.
+
+Keyboard shortcuts
+------------------
+
+- Navigation items, input fields and sound buttons can be selected by using tab and shift+tab
+- esc clears the search field
+- enter plays the selected sound
+- ctrl+k and ctrl+c kill all sounds
+- ctrl+x switches between local and remote playback
+- ctrl+enter kills sounds before the selected gets played
+
+
+Live version
+============
+
+A list of sound requests and already added sounds can be found here: https://pad.wiai.de/p/soundboardTodos
\ No newline at end of file

From 3d382200236b5f50cd1f3966c7d6ca5ce1852bad Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 14:26:40 +0200
Subject: [PATCH 24/30] removed blur() in resetSearch()

see d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_874 for details
---
 static/main.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/static/main.js b/static/main.js
index a6e77fb..075569c 100644
--- a/static/main.js
+++ b/static/main.js
@@ -100,9 +100,6 @@ function resetSearch() {
 	var searchfield = document.querySelector("#search");
 	var buttons = document.querySelectorAll(".sound");
 
-	// TODO: check if blur() still necessary or if value="" and focus() are already enough. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_871
-	searchfield.blur();
-
         buttons.forEach(function(item) {
         	item.style.display = "inline-block";
         });

From 64102b9396129f45d6fcd0788a2089f2139fa85d Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 14:48:19 +0200
Subject: [PATCH 25/30] housekeeping in main.js

adding some comments

restructured keylisteners
---
 static/main.js | 96 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 36 deletions(-)

diff --git a/static/main.js b/static/main.js
index 075569c..28bfa31 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,4 +1,7 @@
+
 var localModeEnabled = false;
+
+// References to howler objects 
 var howlerSounds = [];
 
 function ready(fn) {
@@ -58,43 +61,51 @@ ready(function() {
 	reset.addEventListener("click", resetSearch, false);
 	sounds_nav.addEventListener("click", resetSearch, false);
 
-	// 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
-			killAllAudio();
-		} else if (evt.keyCode == 88 && evt.ctrlKey){
-			toggleLocalMode();			
-		}	
-	};
-	
-	// TODO: make sure that only sound buttons get selected, not ALL a-tags. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_857
-	// keyboard listener for enter key
-	var all_a_s = document.getElementsByTagName("a"); 
-	for(i=0; i<all_a_s.length; i++) {	
-	    all_a_s[i].addEventListener('keypress', async function (e) {
-		    var key = e.keyCode;
-		    var source = e.target;
-		    // keylistener for enter or ctrl+enter (which is k10 on chrome)
-		    if (key === 13 || (key === 10 && e.ctrlKey)) {
-			if(e.ctrlKey){
-				killAllAudio();
-				await sleep(100);
-			}
-			source.classList.add("sound-pressed");
-		    	source.onclick(); 
-			await sleep(300);
-			source.classList.remove("sound-pressed"); 
-		    }
-		});
-	}
-
+	addKeyListeners();
 });
 
+/*
+* Adds all necessary KeyListeners to document
+*/
+function addKeyListeners() {
+        // 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
+                        killAllAudio();
+                } else if (evt.keyCode == 88 && evt.ctrlKey){
+                        // ctrl+x key binding
+                        toggleLocalMode();
+                }
+        };
+
+
+        // TODO: make sure that only sound buttons get selected, not ALL a-tags. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_857
+        // keyboard listener for playing sounds using enter key
+        var all_a_s = document.getElementsByTagName("a");
+        for(i=0; i<all_a_s.length; i++) {
+            all_a_s[i].addEventListener('keypress', async function (e) {
+                    var key = e.keyCode;
+                    var source = e.target;
+                    // keylistener for enter or ctrl+enter (which is k10 on chrome)
+                    if (key === 13 || (key === 10 && e.ctrlKey)) {
+                        if(e.ctrlKey){
+                                killAllAudio();
+                                await sleep(100);
+                        }
+                        source.classList.add("sound-pressed");
+                        source.onclick();
+                        await sleep(300);
+                        source.classList.remove("sound-pressed");
+                    }
+                });
+        }
+}
+
 
 function resetSearch() {
 	var searchfield = document.querySelector("#search");
@@ -108,6 +119,9 @@ function resetSearch() {
 	searchfield.focus();
 }
 
+/*
+* Reads the stream url from input with id #streaming-url and forwards it to the server using AJAX.
+*/
 function playStream(){
 	var streamUrl = document.querySelector("#streaming-url").value;
 	ajaxRequest("/?video="+encodeURI(streamUrl));	
@@ -128,11 +142,15 @@ function ajaxRequest(url){
         ajaxRequest.open("GET", url, true);
         ajaxRequest.send(null);
     }catch (e){
-        alert("Your browser broke!");
+        alert("Unfortunately we were unable to handle your request. Please try again later and contact the server administrator if the problem persists.");
         return false;
     }
 }
 
+/*
+* Switches between local and remote playback mode.
+* Additionally changes the button text and its color so that the user has a visible feedback.
+/*
 function toggleLocalMode(){
 	toggleButton = document.getElementById("local-mode-button").children[0];
 	if(localModeEnabled){
@@ -148,6 +166,9 @@ function toggleLocalMode(){
 	}	
 }
 
+/*
+* Either plays the given sound file locally by using howler.js or forwards the request to the remote server using AJAX.
+*/
 function playSound(filename){
 	if(localModeEnabled){
 		// play local audio using howler.js
@@ -167,6 +188,9 @@ function killAllHowlerAudio(){
 	}	
 }
 
+/*
+* Kills all local or remote audio, depending on localModeEnabled
+*/
 function killAllAudio(){
 	if (localModeEnabled) {
         	killAllHowlerAudio();

From b6905e566c676578278d6041e59352ad95641a30 Mon Sep 17 00:00:00 2001
From: Andreas Erhard <andreas@erhard.cc>
Date: Fri, 4 Aug 2017 17:39:27 +0200
Subject: [PATCH 26/30] fixed wrong js comment

---
 static/main.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/main.js b/static/main.js
index 28bfa31..e893bcc 100644
--- a/static/main.js
+++ b/static/main.js
@@ -84,11 +84,11 @@ function addKeyListeners() {
         };
 
 
-        // TODO: make sure that only sound buttons get selected, not ALL a-tags. See d4377e0f49dc8dd5787f4466c9ab7f7e7cd37ec5#note_857
         // keyboard listener for playing sounds using enter key
-        var all_a_s = document.getElementsByTagName("a");
-        for(i=0; i<all_a_s.length; i++) {
-            all_a_s[i].addEventListener('keypress', async function (e) {
+	var buttons = document.querySelectorAll(".sound");
+
+	buttons.forEach(function(item) {
+        	item.firstChild.addEventListener('keypress', async function (e) {
                     var key = e.keyCode;
                     var source = e.target;
                     // keylistener for enter or ctrl+enter (which is k10 on chrome)
@@ -103,7 +103,7 @@ function addKeyListeners() {
                         source.classList.remove("sound-pressed");
                     }
                 });
-        }
+        });
 }
 
 
@@ -122,7 +122,7 @@ function resetSearch() {
 /*
 * Reads the stream url from input with id #streaming-url and forwards it to the server using AJAX.
 */
-function playStream(){
+function playStream() {
 	var streamUrl = document.querySelector("#streaming-url").value;
 	ajaxRequest("/?video="+encodeURI(streamUrl));	
 }
@@ -135,7 +135,7 @@ function hideSections() {
 	});
 }
 
-function ajaxRequest(url){
+function ajaxRequest(url) {
     var ajaxRequest;
     try{
         ajaxRequest = new XMLHttpRequest();
@@ -150,8 +150,8 @@ function ajaxRequest(url){
 /*
 * Switches between local and remote playback mode.
 * Additionally changes the button text and its color so that the user has a visible feedback.
-/*
-function toggleLocalMode(){
+*/
+function toggleLocalMode() {
 	toggleButton = document.getElementById("local-mode-button").children[0];
 	if(localModeEnabled){
 		localModeEnabled = false;
@@ -169,7 +169,7 @@ function toggleLocalMode(){
 /*
 * Either plays the given sound file locally by using howler.js or forwards the request to the remote server using AJAX.
 */
-function playSound(filename){
+function playSound(filename) {
 	if(localModeEnabled){
 		// play local audio using howler.js
 		var sound = new Howl({
@@ -182,7 +182,7 @@ function playSound(filename){
 	}
 }
 
-function killAllHowlerAudio(){
+function killAllHowlerAudio() {
 	for(i=0; i<howlerSounds.length; i++) {
             howlerSounds[i].stop();
 	}	
@@ -191,7 +191,7 @@ function killAllHowlerAudio(){
 /*
 * Kills all local or remote audio, depending on localModeEnabled
 */
-function killAllAudio(){
+function killAllAudio() {
 	if (localModeEnabled) {
         	killAllHowlerAudio();
         } else {

From 984ff20c19f3be40f05b6cd6a97779f40ec7d3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Thu, 14 Sep 2017 18:27:36 +0200
Subject: [PATCH 27/30] Fix whitespace issues (trailing, indentation, etc)

---
 static/main.js | 117 ++++++++++++++++++++++++-------------------------
 1 file changed, 57 insertions(+), 60 deletions(-)

diff --git a/static/main.js b/static/main.js
index e893bcc..d020e9d 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,7 +1,6 @@
-
 var localModeEnabled = false;
 
-// References to howler objects 
+// References to howler objects
 var howlerSounds = [];
 
 function ready(fn) {
@@ -39,7 +38,6 @@ ready(function() {
 	searchfield.focus();
 
 	searchfield.addEventListener("keyup", function() {
-
 		var buttons = document.querySelectorAll(".sound");
 
 		buttons.forEach(function(item) {
@@ -48,7 +46,7 @@ ready(function() {
 
 		buttons.forEach(function(item) {
 			var name = item.firstChild.innerHTML;
-	
+
 			if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
 				item.style.display = "none";
 			}
@@ -68,42 +66,42 @@ ready(function() {
 * Adds all necessary KeyListeners to document
 */
 function addKeyListeners() {
-        // 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
-                        killAllAudio();
-                } else if (evt.keyCode == 88 && evt.ctrlKey){
-                        // ctrl+x key binding
-                        toggleLocalMode();
-                }
-        };
+	// 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
+			killAllAudio();
+		} else if (evt.keyCode == 88 && evt.ctrlKey){
+			// ctrl+x key binding
+			toggleLocalMode();
+		}
+	};
 
 
-        // keyboard listener for playing sounds using enter key
+	// keyboard listener for playing sounds using enter key
 	var buttons = document.querySelectorAll(".sound");
 
 	buttons.forEach(function(item) {
-        	item.firstChild.addEventListener('keypress', async function (e) {
-                    var key = e.keyCode;
-                    var source = e.target;
-                    // keylistener for enter or ctrl+enter (which is k10 on chrome)
-                    if (key === 13 || (key === 10 && e.ctrlKey)) {
-                        if(e.ctrlKey){
-                                killAllAudio();
-                                await sleep(100);
-                        }
-                        source.classList.add("sound-pressed");
-                        source.onclick();
-                        await sleep(300);
-                        source.classList.remove("sound-pressed");
-                    }
-                });
-        });
+		item.firstChild.addEventListener('keypress', async function (e) {
+			var key = e.keyCode;
+			var source = e.target;
+			// keylistener for enter or ctrl+enter (which is k10 on chrome)
+			if (key === 13 || (key === 10 && e.ctrlKey)) {
+				if(e.ctrlKey){
+					killAllAudio();
+					await sleep(100);
+				}
+				source.classList.add("sound-pressed");
+				source.onclick();
+				await sleep(300);
+				source.classList.remove("sound-pressed");
+			}
+		});
+	});
 }
 
 
@@ -111,11 +109,11 @@ function resetSearch() {
 	var searchfield = document.querySelector("#search");
 	var buttons = document.querySelectorAll(".sound");
 
-        buttons.forEach(function(item) {
-        	item.style.display = "inline-block";
-        });
+	buttons.forEach(function(item) {
+		item.style.display = "inline-block";
+	});
 
-        searchfield.value = "";
+	searchfield.value = "";
 	searchfield.focus();
 }
 
@@ -124,7 +122,7 @@ function resetSearch() {
 */
 function playStream() {
 	var streamUrl = document.querySelector("#streaming-url").value;
-	ajaxRequest("/?video="+encodeURI(streamUrl));	
+	ajaxRequest("/?video="+encodeURI(streamUrl));
 }
 
 function hideSections() {
@@ -136,15 +134,15 @@ function hideSections() {
 }
 
 function ajaxRequest(url) {
-    var ajaxRequest;
-    try{
-        ajaxRequest = new XMLHttpRequest();
-        ajaxRequest.open("GET", url, true);
-        ajaxRequest.send(null);
-    }catch (e){
-        alert("Unfortunately we were unable to handle your request. Please try again later and contact the server administrator if the problem persists.");
-        return false;
-    }
+	var ajaxRequest;
+	try{
+		ajaxRequest = new XMLHttpRequest();
+		ajaxRequest.open("GET", url, true);
+		ajaxRequest.send(null);
+	}catch (e){
+		alert("Unfortunately we were unable to handle your request. Please try again later and contact the server administrator if the problem persists.");
+		return false;
+	}
 }
 
 /*
@@ -161,9 +159,9 @@ function toggleLocalMode() {
 	}else{
 		localModeEnabled = true;
 		toggleButton.classList.add("local");
-                toggleButton.innerHTML = "[L]";
-                toggleButton.title = "play sounds locally";
-	}	
+		toggleButton.innerHTML = "[L]";
+		toggleButton.title = "play sounds locally";
+	}
 }
 
 /*
@@ -173,7 +171,7 @@ function playSound(filename) {
 	if(localModeEnabled){
 		// play local audio using howler.js
 		var sound = new Howl({
-		  src: ['/sounds/'+filename]
+			src: ['/sounds/'+filename]
 		});
 		sound.play();
 		howlerSounds.push(sound);
@@ -184,8 +182,8 @@ function playSound(filename) {
 
 function killAllHowlerAudio() {
 	for(i=0; i<howlerSounds.length; i++) {
-            howlerSounds[i].stop();
-	}	
+		howlerSounds[i].stop();
+	}
 }
 
 /*
@@ -193,9 +191,8 @@ function killAllHowlerAudio() {
 */
 function killAllAudio() {
 	if (localModeEnabled) {
-        	killAllHowlerAudio();
-        } else {
-                ajaxRequest("/?killvideo=yes");
-        }
+		killAllHowlerAudio();
+	} else {
+		ajaxRequest("/?killvideo=yes");
+	}
 }
-

From d0dc1a7fbd3967e4602f96c5df77e7a45a80a296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Thu, 14 Sep 2017 18:33:01 +0200
Subject: [PATCH 28/30] Minor code style improvements (mostly whitespace)

---
 static/main.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/static/main.js b/static/main.js
index d020e9d..be5b03e 100644
--- a/static/main.js
+++ b/static/main.js
@@ -81,7 +81,6 @@ function addKeyListeners() {
 		}
 	};
 
-
 	// keyboard listener for playing sounds using enter key
 	var buttons = document.querySelectorAll(".sound");
 
@@ -91,7 +90,7 @@ function addKeyListeners() {
 			var source = e.target;
 			// keylistener for enter or ctrl+enter (which is k10 on chrome)
 			if (key === 13 || (key === 10 && e.ctrlKey)) {
-				if(e.ctrlKey){
+				if (e.ctrlKey){
 					killAllAudio();
 					await sleep(100);
 				}
@@ -135,11 +134,11 @@ function hideSections() {
 
 function ajaxRequest(url) {
 	var ajaxRequest;
-	try{
+	try {
 		ajaxRequest = new XMLHttpRequest();
 		ajaxRequest.open("GET", url, true);
 		ajaxRequest.send(null);
-	}catch (e){
+	} catch (e) {
 		alert("Unfortunately we were unable to handle your request. Please try again later and contact the server administrator if the problem persists.");
 		return false;
 	}
@@ -151,12 +150,12 @@ function ajaxRequest(url) {
 */
 function toggleLocalMode() {
 	toggleButton = document.getElementById("local-mode-button").children[0];
-	if(localModeEnabled){
+	if (localModeEnabled) {
 		localModeEnabled = false;
 		toggleButton.classList.remove("local");
 		toggleButton.innerHTML = "[S]";
 		toggleButton.title = "play sounds on server";
-	}else{
+	} else {
 		localModeEnabled = true;
 		toggleButton.classList.add("local");
 		toggleButton.innerHTML = "[L]";
@@ -168,20 +167,20 @@ function toggleLocalMode() {
 * Either plays the given sound file locally by using howler.js or forwards the request to the remote server using AJAX.
 */
 function playSound(filename) {
-	if(localModeEnabled){
+	if (localModeEnabled){
 		// play local audio using howler.js
 		var sound = new Howl({
-			src: ['/sounds/'+filename]
+			src: ['/sounds/' + filename]
 		});
 		sound.play();
 		howlerSounds.push(sound);
-	}else{
-		ajaxRequest("/play/"+filename);
+	} else {
+		ajaxRequest("/play/" + filename);
 	}
 }
 
 function killAllHowlerAudio() {
-	for(i=0; i<howlerSounds.length; i++) {
+	for (var i = 0; i < howlerSounds.length; i++) {
 		howlerSounds[i].stop();
 	}
 }

From 425a6d3094d2806950ead22d7bf1d5659071000c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Thu, 14 Sep 2017 18:33:41 +0200
Subject: [PATCH 29/30] Add hint for JavaScript linter to fix ES6 warnings

---
 static/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/main.js b/static/main.js
index be5b03e..01f86b4 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,3 +1,5 @@
+/* jshint esversion: 6 */
+
 var localModeEnabled = false;
 
 // References to howler objects

From f570309d9cc64b761aa2354da885be9cdf8d1b42 Mon Sep 17 00:00:00 2001
From: clemens <git@clemensklug.de>
Date: Mon, 23 Oct 2017 21:04:52 +0200
Subject: [PATCH 30/30] add images

---
 requirements.txt     |  1 +
 soundboard.py        | 19 +++++++++++++++++++
 static/main.js       | 17 +++++++++++++++++
 templates/index.html | 11 +++++++++++
 4 files changed, 48 insertions(+)

diff --git a/requirements.txt b/requirements.txt
index 6aee249..639537d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,3 +4,4 @@ itsdangerous==0.24
 Jinja2==2.9.6
 MarkupSafe==1.0
 Werkzeug==0.12.2
+requests
\ No newline at end of file
diff --git a/soundboard.py b/soundboard.py
index d6d7616..f6417b4 100644
--- a/soundboard.py
+++ b/soundboard.py
@@ -1,6 +1,9 @@
 import os
+import shutil
 import subprocess
+import tempfile
 
+import requests
 from flask import Flask, render_template, request, redirect, url_for, send_from_directory
 
 import config
@@ -53,3 +56,19 @@ def index(sound=None, text=None, video=None):
 @app.route("/sounds/<path:name>")
 def sounds(name):
 	return send_from_directory(config.path, name)
+
+@app.route("/image/")
+def image(imageurl=None):
+	if not imageurl:
+		return False
+	with tempfile.NamedTemporaryFile(mode="wb", buffering=True) as tmp:
+		image = requests.get(imageurl, stream=True)
+		if not image.ok:
+			return False
+		shutil.copyfileobj(image.raw, tmp)
+		subprocess.Popen(["killall", "pngview"])
+		subprocess.Popen(["/opt/raspidmx/pngview/pngview", "-b", "0", "-d", "0", "-n", tmp.name])
+
+@app.route("/kill/images")
+def killImages():
+	subprocess.Popen(["killall", "pngview"])
diff --git a/static/main.js b/static/main.js
index 01f86b4..0adffca 100644
--- a/static/main.js
+++ b/static/main.js
@@ -197,3 +197,20 @@ function killAllAudio() {
 		ajaxRequest("/?killvideo=yes");
 	}
 }
+
+
+
+/*
+* Reads the stream url from input with id #streaming-url and forwards it to the server using AJAX.
+*/
+function showImage() {
+	var streamUrl = document.querySelector("#streaming-url").value;
+	ajaxRequest("/image/?imageurl="+encodeURI(streamUrl));
+}
+
+/*
+* Kills all images
+*/
+function killAllImages() {
+	ajaxRequest("/kill/images");
+}
diff --git a/templates/index.html b/templates/index.html
index 3e31879..51cfbfe 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -33,6 +33,7 @@
 			<a href="#sounds" id="sounds-nav">Sounds</a>
 			<a href="#streams">Streams</a>
 			<a href="#voice">Voices</a>
+			<a href="#image">Images</a>
 		</nav>
 		<content>
 			<section id="sounds" style="display:none;">
@@ -66,6 +67,16 @@
 					<input type="submit" value="Voice" />
 				</form>
 			</section>
+			<section id="images" style="display:none;">
+				<div>
+					<form>
+						<label for="image">Image URL</label>
+						<input id="streaming-url" type="text" name="image" placeholder="paste image url here..." />
+					</form>
+					<button onclick="showImage();">Play!</button>
+				</div>
+				<button name="submit" onclick="killAllImages();">clear images</button>
+			</section>
 		</content>
 		<script src="/static/howler.js"></script>
 		<script src="/static/main.js"></script>