From 7e076105c7a45af93ce21852e0c58725d1fa820b Mon Sep 17 00:00:00 2001 From: Alexander Roidl Date: Sat, 19 Nov 2022 12:49:26 +0100 Subject: [PATCH] finally mp3 works --- app/models.py | 2 - app/mydatabase.db | Bin 8192 -> 8192 bytes app/templates/addaudio.html | 155 +++++++++++++++++++++++++----------- app/templates/base.html | 5 +- app/templates/list.html | 8 +- app/views.py | 2 +- 6 files changed, 113 insertions(+), 59 deletions(-) diff --git a/app/models.py b/app/models.py index 1d55dcc..7aff091 100755 --- a/app/models.py +++ b/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 diff --git a/app/mydatabase.db b/app/mydatabase.db index 1c24e49c02700313c8a8adad550a1306378b595a..6ba44275e18bc842ad55a5c37b5a5b8fbb264906 100644 GIT binary patch delta 554 zcmZp0XmFSy&A4Ntj5FhojR_0+4H+01SoxJ1_^tsDZj17~2$+|KzWKMRJORWd0h+=0K=T&!5 z*Zdh%enHy7L(u!Aj$TY+X-a0kkzss1n4yj{xEh&MDdvoJR>w=go& zGqW%to7^+KxMkh4hj|7H{E4Q96Y%N7)zrdwr3S*WM`$M zW#lAg7iVRpq?yL&mKJ9wgWRId0@lb2(pcBi^5ru~qoB!0aj@G=kQ6c_6c&|!;W!0S zxKhLY5?G;e43bJFgv$D7>w?Y!RSISt7mJ2?7fB%_LSf5aqtiQq3WfT+o=*lVG(;!_ E0MmD!rvLx| delta 554 zcmZp0XmFSy&Db$f#+k8WW5PmyLq1yuey%4Byx(|N@#gay^L*#o%~Q|g%)`!on!BGn zm|KDC3I7$YCkVLNNMI8ei(F|fp0vY>33<)6PH;5q)WSGlZuvm%#8O5^ZEMB5O#yVLK z7FQ7<r74;DdbtJ03=E7x?CjFoybcO|W=W5FuQ+)8UoN3?OF1{S zxHvIA)z39t!Phl7*wNip5eWEe7<7Qj1wqP<7lu!I2vS~o+;js}d44uf1s70-DzAe) zKRW|EyDTqIZO!pVfj{>;c>KBZ<)Y&C-2CGD!qUu=dtZ=-Dgme zW(jtJI4_V}b3#o^5ab|`(-dNAp7Kj|@d53-yZm5_3)HaeoUDwT?6j=JjN%laN!CD< xz*?V7?9ozUXW-xv=k-hkg`A;jyrG$yg{g^=p{c2!p^2fPiA6kEMlU}-9ROFkpu_+G diff --git a/app/templates/addaudio.html b/app/templates/addaudio.html index 641ee41..675240d 100755 --- a/app/templates/addaudio.html +++ b/app/templates/addaudio.html @@ -21,13 +21,6 @@ - -
- Recorder - - - 

-    

     
     

       

@@ -38,6 +31,7 @@
 
       

       

+      
    
     
    
 
     
    
@@ -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"){
-  navigator.mediaDevices.getUserMedia({ audio: true })
-  .then(stream => {
-    mediaRecorder = new MediaRecorder(stream);
-    mediaRecorder.start();
+    if(state == "empty"){
+    // navigator.mediaDevices.getUserMedia({ audio: true })
+    // .then(stream => {
+    //   mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm;codecs=opus'}); // , {mimeType:"audio/ogg"}
+    //   mediaRecorder.start();
 
-    state = "recording";
-    document.getElementById('stop_btn').style.display = 'block'
+    //   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);
+    //   seconds_int = setInterval(
+    //   function () {
+    //     document.getElementById("record_btn").innerHTML = seconds_rec + " s";
+    //     seconds_rec += 1;
+    // }, 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", () => {
-      console.log("stopping");
-      const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});
+    recorder.start().then(() => {
+
+      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)
-      sound.type     = 'audio/mpeg';
+      console.log(audioBlob)
+      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 = '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('stop_btn').style.display = 'block'
-      document.getElementById('record_btn').style.display = 'block'
-      record_audio()
+    document.getElementById('redo_btn').style.display = 'none'
+    document.getElementById('stop_btn').style.display = 'block'
+    document.getElementById('record_btn').style.display = 'block'
+    record_audio()
 }
 
 function  play_audio(){
diff --git a/app/templates/base.html b/app/templates/base.html
index d9e89fc..81222b9 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -15,10 +15,7 @@
     
     
     
-
-    
-    
-    
+    
     
     GEO
 
diff --git a/app/templates/list.html b/app/templates/list.html
index 75f0817..9ee5ca3 100755
--- a/app/templates/list.html
+++ b/app/templates/list.html
@@ -9,21 +9,17 @@
       
    
         
    {{location.id}}
     
         
    {{location.longitude}}, {{location.latitude}}
    
-        
    {{location.message if location.loc_type == "message"}}
    
+        
    {{location.message if location.loc_type == "message"}}{{location.message if location.loc_type == "audio"}}
    
         
    
           {% if location.loc_type == "audio" %}
           
-          
+          
           {% endif %}
         
    
         
       
    
-       
     {% endfor %}
   
 
diff --git a/app/views.py b/app/views.py
index 0a6d671..b33ff3e 100755
--- a/app/views.py
+++ b/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