Spectro things

Putting Spectrogram more towards the left makes sense to me, that way from left to right it's current detections -----> past detections.

homepage/views.php

@@ -12,6 +12,9 @@ body::-webkit-scrollbar {
 <form action="" method="GET" id="views">
   <button type="submit" name="view" value="Today's Detections" form="views">Today's Detections</button>
 </form>
+<form action="" method="GET" id="views">
+  <button type="submit" name="view" value="Spectrogram" form="views">Spectrogram</button>
+</form>
 <form action="" method="GET" id="views">
   <button type="submit" name="view" value="Species Stats" form="views">Best Recordings</button>
 </form>
@@ -24,9 +27,6 @@ body::-webkit-scrollbar {
 <form action="" method="GET" id="views">
   <button type="submit" name="view" value="Recordings" form="views">Recordings</button>
 </form>
-<form action="" method="GET" id="views">
-  <button type="submit" name="view" value="Spectrogram" form="views">Spectrogram</button>
-</form>
 <form action="" method="GET" id="views">
   <button type="submit" name="view" value="View Log" form="views">View Log</button>
 </form>

scripts/spectrogram.php

@@ -36,13 +36,19 @@ window.onload = function(){
     document.getElementById('player').remove();
 
     player = audioelement;
-  } else {
+    if (started) return;
-    player = document.getElementById('player');
-  }
-  player.play();
-  if (started) return;
     started = true;
     initialize();
+  } else {
+    player = document.getElementById('player');
+    player.oncanplay = function() {
+      if (started) return;
+        started = true;
+        initialize();
+    };
+  }
+  player.play();
+  
   }
 };
 
@@ -95,7 +101,12 @@ function initialize() {
 
   ANALYSER.fftSize = 2048;  
   
-  process();
+
+  try{
+    process();
+  } catch(e) {
+    window.top.location.reload();
+  }
 
   function process() {
     const SOURCE = ACTX.createMediaElementSource(player);