riordinato JS + gestione errore microfono

static/js/detto.js

@@ -44,7 +44,7 @@ function processa_audio(){
 	audioCtx = new AudioContext();
 
 	navigator.mediaDevices.getUserMedia(constraints).then(stream => {
-		document.getElementById("record_audio").disabled = true;
+    $('body').trigger('recording-start-ok')
 		window.localStream = stream;
 		const recorder = new MediaRecorder(stream, options);
 		window.localRecorder = recorder;
@@ -64,14 +64,16 @@ function processa_audio(){
 				reader.onload = function(event) {
 					console.log("reader loaded");
 					var content = event.target.result;
-					critta(content);
-					document.getElementById("record_audio").disabled = false;
+          $('body').trigger('recording-stop-ready', content)
 				}
 				reader.readAsArrayBuffer(blob);
 		}
 	recorder.start(1000);
 
-	});
+	}).catch(function onMicDenied(err) {
+    console.log('ouch!', err)
+    $('body').trigger('recording-start-fail', err)
+  });
 }
 
 function stop_recorder(stream){

static/js/upload.js

@@ -17,11 +17,8 @@ function putPreview (arrayBuf) {
   document.getElementById('preview').appendChild(au)
 }
 
-function critta(content) {
+function upload(content) {
   // questa funzione non critta, ma si deve comunque chiamare così!
-  console.log(content)
-  $('#preview').show()
-  putPreview(content)
 
   $('#upload').on('click', function () {
     // TODO: fai questo alla conferma
@@ -37,17 +34,24 @@ function critta(content) {
   })
 }
 
-$(function () {
+$(function guiFunctions() {
   $('#preview').hide()
   $('#stop_record').hide()
   $('#visualizer').hide()
-  $('#record_audio').on('click', function () {
+  $('body').on('recording-start-ok', function() {
     $('#record_audio').hide()
     $('#stop_record').show()
     $('#visualizer').show()
   })
-  $('#stop_record').on('click', function () {
+  $('body').on('recording-start-fail', function(evt, err) {
+    $('#content').hide()
+    $('#container').text('Errore! apri il microfono')
+  })
+  $('body').on('recording-stop-ready', function(evt, content) {
     $('#stop_record').hide()
     $('#visualizer').hide()
+    $('#preview').show()
+    putPreview(content)
+    upload(content)
   })
 })

templates/index.htm

@@ -23,8 +23,8 @@
 <!-- <div id="image"><a href="/"><img alt="logo" src="logo" height="80"/></a></div> -->
 <section id="help"></section>
 
-<button id="record_audio" type="button">Registra<img src="record.png"/></button>
-<button id="stop_record" type="button">Stop<img src="stop.png"/></button>
+<button id="record_audio" type="button">Registra</button>
+<button id="stop_record" type="button">Stop</button>
 
 <canvas id="visualizer" class="visualizer"></canvas>
 <audio  id="player" controls="controls"></audio>
@@ -41,14 +41,13 @@
 </div>
 <div id="status"></div>
 
-</div>
+</div><!-- content -->
 
-<div id="footer"><footer>:: powered by <a href="//www.esiliati.org/">www.esiliati.org</a> - info: <a href="mailto:staff@esiliati.org/">staff@esiliati.org</a> - provided by <a href="http://lepisma.ortiche.net">lepisma.ortiche.net</a>, a leaf of <a href="//uichi.ortiche.net">ortiche.net</a> ::</footer>
-</div>
+</div><!-- container -->
+
+<script src="{{ url_for('static', filename='js/jquery-1.12.4.js') }}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/upload.js')}}"></script>
+<script type="text/javascript" src="{{url_for('static', filename='js/detto.js')}}"></script>
 
-</div>
-    <script src="{{ url_for('static', filename='js/jquery-1.12.4.js') }}"></script>
-    <script type="text/javascript" src="{{url_for('static', filename='js/upload.js')}}"></script>
-    <script type="text/javascript" src="{{url_for('static', filename='js/detto.js')}}"></script>
 </body>
 </html>