finally mp3 works

app/models.py

@@ -3,7 +3,6 @@ from marshmallow import Schema, fields, ValidationError, pre_load
 import datetime
 from sqlalchemy import Column, DateTime
 
-
 # authors = db.Table('books_authors',
 #     db.Column('book_id', db.Integer, db.ForeignKey('books.id'), primary_key=True),
 #     db.Column('author_id', db.Integer, db.ForeignKey('authors.id'), primary_key=True)
@@ -52,7 +51,6 @@ class Location(db.Model):
     # gender = db.Column(db.Numeric())
     # who = db.Column(db.String(255))
 
-
     def __init__(self, longitude, latitude, loc_type, message, audio):
         self.longitude = longitude
         self.latitude = latitude

app/templates/addaudio.html

@@ -21,13 +21,6 @@
     <input type="hidden" name="longitude" value="{{ longitude }}" />
     <input type="hidden" name="latitude" value="{{ latitude }}" />
     
-
-    <div class="recorder">
-      Recorder
-      <input type="button" class="start"  value="Record" />
-      <input type="button" class="stop" value="Stop" />
-      <pre class="status"></pre>
-    </div>
     
     <div id="audio">
       <div class="record_controls">
@@ -38,6 +31,7 @@
 
       </div>
       <div id="audio-player-container"></div>
+      <ul id="playlist"></ul>
     </div>
 
     <input hidden="true" type="file" name="file" id="uploadedFile" accept="audio/*"><br>
@@ -64,48 +58,87 @@ var seconds_int;
 var audio;
 var state = "empty";
 var audio_context;
+var mimeType;
+const recorder = new MicRecorder({
+      bitRate: 128
+    });
 
+const audioChunks = [];
 
 function record_audio(){
-  if(state == "empty"){
+    if(state == "empty"){
-  navigator.mediaDevices.getUserMedia({ audio: true })
+    // navigator.mediaDevices.getUserMedia({ audio: true })
-  .then(stream => {
+    // .then(stream => {
-    mediaRecorder = new MediaRecorder(stream);
+    //   mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm;codecs=opus'}); // , {mimeType:"audio/ogg"}
-    mediaRecorder.start();
+    //   mediaRecorder.start();
 
-    state = "recording";
+    //   state = "recording";
-    document.getElementById('stop_btn').style.display = 'block'
+    //   document.getElementById('stop_btn').style.display = 'block'
 
-    seconds_int = setInterval(
+    //   seconds_int = setInterval(
-    function () {
+    //   function () {
-      document.getElementById("record_btn").innerHTML = seconds_rec + " s";
+    //     document.getElementById("record_btn").innerHTML = seconds_rec + " s";
-      seconds_rec += 1;
+    //     seconds_rec += 1;
-  }, 1000);
+    // }, 1000);
+
+      
+    //   mediaRecorder.addEventListener("dataavailable", event => {
+        
+    //     audioChunks.push(event.data);
+    //     if(mediaRecorder.state == 'inactive')  makeLink();
+    //   });
+
+    //   setTimeout(() => {
+    //     stop_audio()
+    //   }, 1000 * 60);
+    // });
 
-    const audioChunks = [];
-    mediaRecorder.addEventListener("dataavailable", event => {
-      audioChunks.push(event.data);
-    });
 
-    mediaRecorder.addEventListener("stop", () => {
+    recorder.start().then(() => {
-      console.log("stopping");
+
-      const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});
+      state = "recording";
+      document.getElementById('stop_btn').style.display = 'block'
+
+      seconds_int = setInterval(
+      function () {
+        document.getElementById("record_btn").innerHTML = seconds_rec + " s";
+        seconds_rec += 1;
+    }, 1000);
+
+      setTimeout(() => {
+        stop_audio()
+      }, 1000 * 60);
+
+      }).catch((e) => {
+        console.error(e);
+      });
+  }
+}
+
+function blobToFile(theBlob, fileName){
+    //A Blob() is almost a File() - it's just missing the two properties below which we will add
+    theBlob.lastModifiedDate = new Date();
+    theBlob.name = fileName;
+    return theBlob;
+}
+
+function makeLink(){
+      const audioBlob = new Blob(audioChunks, {type: 'audio/webm;codecs=opus'});
+      
       const audioUrl = URL.createObjectURL(audioBlob);
       var sound      = document.createElement('audio');
       sound.id       = 'audio-player';
       sound.controls = 'controls';
       sound.src      = audioUrl;
-      console.log(audioUrl)
+      console.log(audioBlob)
-      sound.type     = 'audio/mpeg';
+      sound.type     = 'audio/webm;codecs=opus';
       document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
-
       
-      let file = new File([audioBlob], "audio.mp3",{type:"audio/mpeg"});
+      let file = new File([audioBlob], "audio.webm",{ type:"audio/webm;codecs=opus",lastModifiedDate: new Date()});
       let container = new DataTransfer();
       container.items.add(file);
       document.getElementById("uploadedFile").files = container.files;
       
-  
       audio = new Audio(audioUrl);
       audio.addEventListener("ended", function(){
           audio.currentTime = 0;
@@ -116,35 +149,65 @@ function record_audio(){
         var duration = audio.duration;
         $('.progress_bar').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},0,'linear');
     });
-
       document.getElementById('play_btn').style.display = 'block'
       document.getElementById('redo_btn').style.display = 'block'
       document.getElementById('stop_btn').style.display = 'none'
       document.getElementById("record_btn").innerHTML = "recording…";
       document.getElementById('record_btn').style.display = 'none'
-
+};
-    });
-
-    setTimeout(() => {
-      stop_audio()
-    }, 1000 * 60);
-  });
-}
-}
 
 function stop_audio(){
+  if(state == "recording"){
     clearInterval(seconds_int); 
-    mediaRecorder.stop();
+    state = "done";
+    recorder.stop().getMp3().then(([buffer, blob]) => {
+        console.log(buffer, blob);
+        const file = new File(buffer, 'music.mp3', {
+          type: blob.type,
+          lastModified: Date.now()
+        });
+
+        const li = document.createElement('li');
+        var audioUrl = URL.createObjectURL(file)
+        // const player = new Audio(audioUrl);
+        // player.controls = true;
+        // li.appendChild(player);
+        // document.querySelector('#playlist').appendChild(li);
+
+        let container = new DataTransfer();
+        container.items.add(file);
+        document.getElementById("uploadedFile").files = container.files;
+
+        audio = new Audio(audioUrl);
+        audio.addEventListener("ended", function(){
+            audio.currentTime = 0;
+            document.getElementById("play_btn").innerHTML = '<span class="icon_p"></span>play'
+        });
+        audio.addEventListener("timeupdate", function() {
+          var currentTime = audio.currentTime;
+          var duration = audio.duration;
+          $('.progress_bar').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},0,'linear');
+      });
+        document.getElementById('play_btn').style.display = 'block'
+        document.getElementById('redo_btn').style.display = 'block'
+        document.getElementById('stop_btn').style.display = 'none'
+        document.getElementById("record_btn").innerHTML = "recording…";
+        document.getElementById('record_btn').style.display = 'none'
+
+      }).catch((e) => {
+        console.error(e);
+      });
+    }
 }
 
 function redo_audio(){
     state = "empty";
     seconds_rec = 0;
     document.getElementById('play_btn').style.display = 'none'
-      document.getElementById('redo_btn').style.display = 'none'
+    document.getElementById('redo_btn').style.display = 'none'
-      document.getElementById('stop_btn').style.display = 'block'
+    document.getElementById('stop_btn').style.display = 'block'
-      document.getElementById('record_btn').style.display = 'block'
+    document.getElementById('record_btn').style.display = 'block'
-      record_audio()
+    record_audio()
 }
 
 function  play_audio(){

app/templates/base.html

@@ -15,10 +15,7 @@
     <script src="/static/js/leaflet-knn.min.js"></script>
     <script src="/static/js/leaflet.geometryutil.js"></script>
     <script type="text/javascript" src="/static/js/jquery.min.js"></script>
-
+    <script src="https://unpkg.com/mic-recorder-to-mp3"></script>
-    <script type="text/javascript" src="/static/js/mp3recorder.js"></script>
-    <!-- <script type="text/javascript" src="/static/js/mp3Worker.js"></script> -->
-    <script type="text/javascript" src="/static/js/recorderWorker.js"></script>
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <title>GEO</title>
 

app/templates/list.html

@@ -9,21 +9,17 @@
       <div class="row">
         <div>{{location.id}}</div> 
         <div>{{location.longitude}}, {{location.latitude}}</div>
-        <div>{{location.message if location.loc_type == "message"}}</div>
+        <div>{{location.message if location.loc_type == "message"}}{{location.message if location.loc_type == "audio"}}</div>
         <div>
           {% if location.loc_type == "audio" %}
           
-          <audio id="audio-player" controls="" src="uploads/{{location.audio}}" type="audio/ogg"></audio>
+          <audio id="audio-player" controls="" src="uploads/{{location.audio}}" type="audio/mp3"></audio>
           {% endif %}
         </div>
         <div>
           <a class="delete_btn" href="location/{{location.id}}/delete">delete</a>
         </div>
       </div>
-      <audio controls>
-        <source src="uploads/{{location.audio}}" type="audio/mpeg">
-        Your browser does not support the audio tag.
-      </audio> 
     {% endfor %}
   </div>
 </div>

app/views.py

@@ -125,7 +125,7 @@ def addaudio():
             dt = datetime.now()
             # getting the timestamp
             ts = datetime.timestamp(dt)
-            filename = str(id) + "_" + str(ts) +"_"+ secure_filename(file.filename)
+            filename = secure_filename(str(id) + "_" + file.filename) # + str(int(ts))
             fullpath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
             file.save(fullpath)
             #add to database