From 60ac20d90d6ff8256d19d280ab2f2c37897c4956 Mon Sep 17 00:00:00 2001 From: Alexander Roidl Date: Wed, 9 Nov 2022 17:06:27 +0100 Subject: [PATCH] new audioplayer --- app/mydatabase.db | Bin 8192 -> 8192 bytes app/static/css/style.css | 183 +++++++++++++++++++++++++++++++++++- app/templates/about.html | 21 +---- app/templates/addaudio.html | 92 +++++++++++++----- app/templates/header.html | 4 +- app/templates/home.html | 34 ++----- app/templates/list.html | 33 +++++++ app/views.py | 21 +++-- run.py | 2 +- 9 files changed, 307 insertions(+), 83 deletions(-) create mode 100755 app/templates/list.html diff --git a/app/mydatabase.db b/app/mydatabase.db index 77ebe0ebd63b498efa74d8431dc6b37fba2a5700..4a536929738b22597da8ddd9c39abeb734e71873 100644 GIT binary patch delta 379 zcmZp0XmFSy%@{vX#+fmGW5PmyNxuIK9K3&-`0nzp{g(GqAIZ^SV1I)LgiKtH#d3@(XaE2J delta 375 zcmZp0XmFSy%@{UO#+fl}W5PmyQGRU(cD`&DzW;o8`PT9K@*m}|;me+^AfPeXK!9tr zhrm|e`pQ5DkN-h%F6?kc$r!Q3aGTLUP&@vW|_T4HHRW`0^? zaS8~V#~YfNnOhneS(+Q`85&rcSQ<}WA{Wh~#m3GsnOR#}7?{R`73t-tr?bmi@_`NF1sPAbout
-

-XPPL is a project aimed at people who are studying the field of media culture, or as we like to call them: knowledge comrades. -
-
-This digital library gathers all the books and articles floating around on the shelves of the Piet Zwart Institute, and our hard drives and memory sticks, so that they can be shared, annotated and grouped together into stacks... Its web interface hosts a curated catalogue of books and articles, and its distributed architecture provides instances for uploading and downloading. -
-
- It starts at XPUB, but can go anywhere we want it to. -
-
-Are you interested in how this library works? Have a look at the source code in our git. -

-

What's the deal with the stacks?

-

- A stack is a number of books that are read at a certain point in time, alternating between them. They usually have a topic in common, or follow a certain study path that can bring you to a point of knowledge. Rather than a bookshelf, where books are lined up and often forgotten, the stack on your table/nightstand/toilet consists of books prone to be opened and reopened at any time. -

-

Who's behind this?

-

-We're Angeliki, Alex, Alice, Joca, Natasha and Zalán, helped and supported by Femke, Aymeric, Michael, Steve, Andre, Leslie and many more. XPUB is a study path within the Piet Zwart Institute masters program. -

+

About

{% endblock %} diff --git a/app/templates/addaudio.html b/app/templates/addaudio.html index 3ad2f89..8a031d7 100755 --- a/app/templates/addaudio.html +++ b/app/templates/addaudio.html @@ -3,7 +3,7 @@ {% block main %} {% from "_formhelpers.html" import render_field %} -

Add Message

+

Add Audio

{% with messages = get_flashed_messages() %} {% if messages %}
@@ -20,18 +20,24 @@ {{ form.csrf_token }} -
- message: {{ form.message(cols="45", rows="10", class="form-control") }} -
+
- record - stop - seconds +
+ record + stop + play + redo + +
-
+
+ +
+ message:
{{ form.message(class="form-control") }} +
@@ -48,26 +54,32 @@ var mediaRecorder; var seconds_rec = 0; var seconds_int; +var audio; +var state = "empty"; function record_audio(){ - seconds_int = setInterval( - function () { - document.getElementById("seconds_rec").innerHTML = seconds_rec; - seconds_rec += 1; - }, 1000); - + if(state == "empty"){ navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); + 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); + const audioChunks = []; mediaRecorder.addEventListener("dataavailable", event => { audioChunks.push(event.data); }); mediaRecorder.addEventListener("stop", () => { - const audioBlob = new Blob(audioChunks); + const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'}); const audioUrl = URL.createObjectURL(audioBlob); var sound = document.createElement('audio'); sound.id = 'audio-player'; @@ -75,32 +87,68 @@ navigator.mediaDevices.getUserMedia({ audio: true }) sound.src = audioUrl; console.log(audioUrl) sound.type = 'audio/mpeg'; - document.getElementById("audio-player-container").innerHTML = sound.outerHTML; + // document.getElementById("audio-player-container").innerHTML = sound.outerHTML; + + 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' + - const audio = new Audio(audioUrl); //audio.play(); let file = new File([audioBlob], "audio.mp3",{type:"audio/mpeg"}); let container = new DataTransfer(); container.items.add(file); document.getElementById("uploadedFile").files = container.files; - - //const audio = new Audio(audioUrl); - //audio.play(); + }); setTimeout(() => { stop_audio() }, 1000 * 60); }); - +} } function stop_audio(){ clearInterval(seconds_int); mediaRecorder.stop(); +} - +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() +} + +function play_audio(){ + if(audio.paused){ + audio.play(); + document.getElementById("play_btn").innerHTML = 'pause' + } + else{ + audio.pause(); + document.getElementById("play_btn").innerHTML = 'play' + + } } diff --git a/app/templates/header.html b/app/templates/header.html index ea8947a..c48ac39 100755 --- a/app/templates/header.html +++ b/app/templates/header.html @@ -1,8 +1,8 @@ diff --git a/app/templates/home.html b/app/templates/home.html index 31e7346..e039daf 100755 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -7,22 +7,11 @@ - - -


- -{% for location in locations %} - -
{{location.id}}: {{location.longitude}}, {{location.latitude}} {{location.message if location.loc_type == "message"}} - {% if location.loc_type == "audio" %} - - {% endif %} - delete
- -{% endfor %} -
+ + + {% endblock main %} {% block js %} @@ -41,21 +30,16 @@ attributionControl:false, scrollWheelZoom: false, zoom: 2000 - }).setView([48.505, 1.09], 10); - - - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - zoom:2, - attribution: '© OpenStreetMap' - }).addTo(map); - + }).setView([48.505, 1.09], 16); + // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + // maxZoom: 19, + // zoom:2, + // attribution: '© OpenStreetMap' + // }).addTo(map); locations.forEach(function (item, index) { - - try { var circle = L.circle([item.latitude, item.longitude], { color: 'red', diff --git a/app/templates/list.html b/app/templates/list.html new file mode 100755 index 0000000..0ec81c9 --- /dev/null +++ b/app/templates/list.html @@ -0,0 +1,33 @@ +{% extends "base.html" %} + +{% block main %} +
+

Index

+ +
+ {% for location in locations %} +
+
{{location.id}}
+
{{location.longitude}}, {{location.latitude}}
+
{{location.message if location.loc_type == "message"}}
+
+ {% if location.loc_type == "audio" %} + + {% endif %} +
+
+ delete +
+
+ {% endfor %} +
+
+ +{% endblock main %} +{% block js %} + + + +{% endblock js %} \ No newline at end of file diff --git a/app/views.py b/app/views.py index 4e62520..326da1d 100755 --- a/app/views.py +++ b/app/views.py @@ -52,20 +52,20 @@ def uploaded_file(filename): @app.route('/', methods= ['POST','GET']) def home(): - - username = 'librarian' server = request.host - if request.environ.get('HTTP_X_FORWARDED_FOR') is None: - client =request.environ['REMOTE_ADDR'] - else: - client = request.environ['HTTP_X_FORWARDED_FOR'] + locations = db.session.query(Location).all() + serialized = [location_schema.dump(location) for location in locations] + return render_template('home.html',domain=DOMAIN, server=server, locations = locations, data_locations = serialized) + +@app.route('/listlocations', methods= ['POST','GET']) +def list_locations(): locations = db.session.query(Location).all() serialized = [location_schema.dump(location) for location in locations] - print(locations) + return render_template('list.html',domain=DOMAIN, locations = locations, data_locations = serialized) + - return render_template('home.html',domain=DOMAIN, server=server, locations = locations, data_locations = serialized) @app.route('/hello/') def hello(name): @@ -138,7 +138,10 @@ def addaudio(): return render_template('addaudio.html', form=upload_form, longitude=longitude, latitude=latitude) - +@app.route('/about/') +def about(): + """Render the website's about page.""" + return render_template('about.html') @app.route('/location//delete', methods=['POST', 'GET']) def delete_location(id): diff --git a/run.py b/run.py index 61f7a27..df06e09 100755 --- a/run.py +++ b/run.py @@ -1,3 +1,3 @@ #! /usr/bin/env python from app import app, socketio -socketio.run(app,host="0.0.0.0", port=8080) +socketio.run(app,host="0.0.0.0", port=8080, ssl_context='adhoc')