Added SSL, readme, and play/stop support

* Use SSL so Firefox knows you're okay with the project recording you
* Play/stop button plays/stops all tracks simultaneously
* Record button plays all tracks for singing over
* Audio blobs now have unique filenames

ReadMe.org

@@ -0,0 +1,25 @@
+* Song Sketcher
+
+This project is meant to be a quick-and-dirty recorder for saving song ideas.
+
+My goal was to support basic multitracking as well, but I'm not sure syncing things will be feasible.
+
+I made this because I was disappointed with the apps available on Android for doing similar things.
+
+** Setup
+
+This project requires Python 3.
+
+*** 1. Install ~tornado~
+
+#+BEGIN_SRC sh
+  pip3 install tornado
+#+END_SRC
+
+*** 2. Generate SSL keys
+
+#+BEGIN_SRC sh
+  openssl req -x509 -nodes -days 365 -newkey rsa:1024 -keyout certificates/server_jupyter_based.crt.key -out certificates/server_jupyter_based.crt.pem
+#+END_SRC
+
+These are needed because otherwise, Firefox will ask every time whether the site has permission to record with your microphone. This is a problem because everything gets out of sync, and it's annoying.

song-sketcher-server.py

@@ -4,9 +4,11 @@ import tornado.ioloop
 import tornado.web
 import tornado.websocket
 import tornado.httpclient
+import tornado.httpserver
 import tornado.gen
 
 import os
+from datetime import datetime
 # import random
 # import shutil
 # import json
@@ -26,12 +28,14 @@ class UploadHandler(tornado.web.RequestHandler):
         original_filename = recording['filename']
 
         # TODO Actually look at what type the file is!
-        output_file = open('output/' + original_filename + '.ogg', 'wb')
+        outputFilename = ('output/' + original_filename +
+                           datetime.now().strftime("_%Y_%m_%d_%H_%M_%S") + '.ogg')
+        output_file = open(outputFilename, 'wb')
         output_file.write(recording['body'])
 
-        print('File ' + original_filename + ' uploaded')
+        print('File ' + outputFilename + ' uploaded')
 
-        self.finish('File ' + original_filename + ' uploaded')
+        self.finish('File ' + outputFilename + ' uploaded')
 
 #
 # Startup
@@ -71,8 +75,33 @@ if __name__ == '__main__':
     port = 8888
     print('\nStarting Song Sketcher Server on port {}...'.format(port))
     app = make_app()
-    app.listen(port)
+
+    #
+    # Notes on SSL
+    #
+    # Certificate generation (for localhost) (didn't actually work):
+    #  https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec?gi=bd966500e56a
+    # Tornado instructions:
+    #  https://stackoverflow.com/questions/18307131/how-to-create-https-tornado-server
+    # Note that I added the rootCA to Certificates trust in Firefox Preferences as well (didn't do anything)
+    #
+    # What I actually did:
+    # openssl req -x509 -nodes -days 365 -newkey rsa:1024 -keyout certificates/server_jupyter_based.crt.key -out certificates/server_jupyter_based.crt.pem
+    # (from https://jupyter-notebook.readthedocs.io/en/latest/public_server.html)
+    # I then had to tell Firefox to truse this certificate even though it is self-signing (because
+    # I want a free certificate for this non-serious project)
+    useSSL = True
+    if useSSL:
+        app.listen(port, ssl_options={"certfile":"certificates/server_jupyter_based.crt.pem",
+                                      "keyfile":"certificates/server_jupyter_based.crt.key"})
+    else:
+        # The problem with non-ssl version is that Firefox will ask every time whether it can use
+        #  the microphone, which gets everything out of sync
+        app.listen(port)
+        
     ioLoop = tornado.ioloop.IOLoop.current()
+    
     # updateStatusCallback = tornado.ioloop.PeriodicCallback(updateScriptStatus, 100)
     # updateStatusCallback.start()
+    
     ioLoop.start()

song-sketcher.html

@@ -48,6 +48,7 @@
 		 </div> -->
 
 	<button id="toggleRecord" class="toggleRecord" onclick="toggleRecord()">Record</button>
+	<button id="togglePlay" class="togglePlay" onclick="togglePlay()">Play</button>
 	
 	<audio controls>
 		<source src="output/blob.ogg" type="audio/ogg">

webResources/song-sketcher.js

@@ -87,7 +87,46 @@ function toggleRecord() {
         stopRecording();
         getElement("toggleRecord").innerHTML = "Record";
     } else {
+		// Multitracker should play other tracks during recording. This will cause feedback without
+		// headphones but it's not meant to be a finished recording, just a "sketch"
+		var audioTracks = document.getElementsByTagName("audio");
+		for (var i = 0; i < audioTracks.length; i++)
+		{
+			// In case the user played individual tracks, reset their time
+			audioTracks[i].currentTime = 0;
+			audioTracks[i].play();
+		}
+		
         startRecording();
         getElement("toggleRecord").innerHTML = "Stop Recording";
     }
 }
+
+function togglePlay() {
+
+	var audioTracks = document.getElementsByTagName("audio");
+	
+	var tracksArePlaying = false;
+	for (var i = 0; i < audioTracks.length; i++)
+	{
+		if (!audioTracks[i].paused)
+			tracksArePlaying = true;
+	}
+	
+    if (tracksArePlaying) {
+        for (var i = 0; i < audioTracks.length; i++)
+		{
+			audioTracks[i].pause();
+			audioTracks[i].currentTime = 0;
+		}
+        getElement("togglePlay").innerHTML = "Play";
+    } else {
+        for (var i = 0; i < audioTracks.length; i++)
+		{
+			// In case the user played individual tracks, reset their time
+			audioTracks[i].currentTime = 0;
+			audioTracks[i].play();
+		}
+        getElement("togglePlay").innerHTML = "Stop";
+    }
+}