XPUB
/
XPPL
53
0
Fork 2
Code Issues Pull Requests Releases Wiki Activity

finally mp3 works

Browse Source
geo
Alexander Roidl 1 year ago
parent cb17ab7c1a
commit 7e076105c7
6 changed files with 113 additions and 59 deletions
Show Stats Download Patch File Download Diff File

2
app/models.py
Unescape Escape View File

@ -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

BIN
app/mydatabase.db
View File

Binary file not shown.

155
app/templates/addaudio.html
Unescape Escape View File

@ -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"){
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 = '<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('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(){

5
app/templates/base.html
Unescape Escape View File

@ -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 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>
<script src="https://unpkg.com/mic-recorder-to-mp3"></script>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>GEO</title>

8
app/templates/list.html
Unescape Escape View File

@ -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>

2
app/views.py
Unescape Escape View File

@ -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

Write Preview
Loading…
Cancel
Save