preview prima dell invio

static/js/upload.js

@@ -1,20 +1,44 @@
 /* jshint browser: true */
 /* global $ */
 
+function putPreview (arrayBuf) {
+  var arrayBufView = new Uint8Array(arrayBuf)
+  var blob = new Blob([arrayBufView.buffer], { type: "audio/ogg" })
+  console.log(blob)
+  var url = URL.createObjectURL(blob);
+  var au = document.createElement('audio');
+
+  //name of .wav file to use during upload and download (without extendion)
+  var filename = new Date().toISOString();
+
+  //add controls to the <audio> element
+  au.controls = true;
+  au.src = url;
+  document.getElementById('preview').appendChild(au)
+}
+
 function critta(content) {
   // questa funzione non critta, ma si deve comunque chiamare così!
   console.log(content)
-  var submit = new XMLHttpRequest()
-  submit.open('POST', "upload/" + $('body').data('site'),true)
-  submit.onload = function (evt) {
-    console.log('ok, caricato!')
-    $('#bar').hide()
-    $('#status').text('Hai lasciato un messaggio in segreteria, grazie!')
-  }
-  submit.send(content)
+  $('#preview').show()
+  putPreview(content)
+
+  $('#upload').on('click', function () {
+    // TODO: fai questo alla conferma
+    var submit = new XMLHttpRequest()
+    submit.open('POST', "upload/" + $('body').data('site'),true)
+    submit.onload = function (evt) {
+      console.log('ok, caricato!')
+      $('#bar').hide()
+      $('#spiegazione1').hide()
+      $('#status').text('Hai lasciato un messaggio in segreteria, grazie!')
+    }
+    submit.send(content)
+  })
 }
 
 $(function () {
+  $('#preview').hide()
   $('#stop_record').hide()
   $('#visualizer').hide()
   $('#record_audio').on('click', function () {

templates/index.htm

@@ -32,6 +32,13 @@
 <br/>
 
 <div id="bar"></div>
+<div id="preview">
+    <div id="spiegazione1">
+    <p> Questo è l'audio che hai registrato:</p>
+    <p> Se ti va bene, premi su Carica</p>
+    <button type="button" id="upload">Carica</button>
+    </div>
+</div>
 <div id="status"></div>
 
 </div>