Generate overview of all audio files

www/css/styles.css

@@ -33,6 +33,13 @@ img.icon {
   flex-direction: row;
   height: 100vh;
   width: 100vw; }
+  #interface #audioFiles {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    right: 10%;
+    bottom: 10%;
+    background: #ccc; }
 
 #status {
   display: flex;

www/index.html

@@ -73,6 +73,7 @@
 				<div id="btn-save" class="btn">Save</div>
 				<div id="btn-addMsg" class="btn">Create message</div>
 				<div id="btn-diversions" class="btn">View Diversions</div>
+				<div id="btn-audio" class="btn">View Audio Files</div>
 			</div>
 			<div id="msg"></div>
 			<svg id='graph' viewbox="-640 -512 1280 1024"

www/js/hugvey_console.js

@@ -123,7 +123,7 @@ class Panopticon {
                     	}, 500);
                     	
                     	console.log(startDate, endDate);
-                    	setInterval(function(){panopticon.timeline.moveTo(new Date());}, 1000);
+                    	this.timelineInterval = setInterval(function(){panopticon.timeline.moveTo(new Date());}, 1000);
                     }
                     break;
 
@@ -346,6 +346,7 @@ class Graph {
         document.getElementById( 'btn-save' ).addEventListener( 'click', function( e ) { graph.saveJson(); } );
         document.getElementById( 'btn-addMsg' ).addEventListener( 'click', function( e ) { graph.createMsg(); } );
         document.getElementById( 'btn-diversions' ).addEventListener( 'click', function( e ) { graph.showDiversions(); } );
+        document.getElementById( 'btn-audio' ).addEventListener( 'click', function( e ) { graph.showAudioFiles(); } );
     }
 
     clickMsg( msg ) {
@@ -579,6 +580,32 @@ class Graph {
         msgEl.appendChild(divEl);
     }
 
+    showAudioFiles( ) {
+    	let audioFilesEl = crel('div',{
+	    		'id':'audioFiles'
+	    	},
+    		crel(
+    			'div',
+    			{
+    				'class':'btn btn-close',
+    				'on': {
+    					'click': function() {
+    						audioFilesEl.parentNode.removeChild(audioFilesEl)
+    					}
+    				}
+    			},
+    			'close'
+    		));
+    	for(let msg of panopticon.graph.messages) {
+    		audioFilesEl.appendChild(crel(
+    				'audio',
+    				{'controls':'controls'},
+    				crel('source', {'src': msg['audio'] ? msg['audio']['file'] : panopticon.graph.getAudioUrlForMsg(msg)})
+    		))
+    	}
+    	document.getElementById("interface").appendChild(audioFilesEl);
+    }
+
     showMsg( msg ) {
         let msgEl = document.getElementById( 'msg' );
         msgEl.innerHTML = "";

www/scss/styles.scss

@@ -47,6 +47,15 @@ img.icon{
 	
 	&.showStatus{
 	}
+
+	#audioFiles {
+	    position: absolute;
+	    top: 10%;
+	    left: 10%;
+	    right: 10%;
+	    bottom: 10%;
+	    background: #ccc;
+	}
 }
 
 #status{