implementing AJAX loading for sounds as described in issue #5

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;
+    }
+}

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">