-
-XPPL is a project aimed at people who are studying the field of media culture, or as we like to call them: knowledge comrades.
- 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
@@ -20,18 +20,24 @@
{{ form.csrf_token }}
-
- message: {{ form.message(cols="45", rows="10", class="form-control") }}
-
+
-
+
+
+
+ message:
Submit
@@ -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 @@
store my position
add message
add audio
-
-
-{{location.id}}: {{location.longitude}}, {{location.latitude}} {{location.message if location.loc_type == "message"}}
- {% if location.loc_type == "audio" %}
-
- {% endif %}
-
delete
+
+
+
+ {% for location in locations %}
+
+
{{location.id}}
+
{{location.longitude}}, {{location.latitude}}
+
{{location.message if location.loc_type == "message"}}
+
+ {% if location.loc_type == "audio" %}
+
+ {% endif %}
+
+
+
+ {% endfor %}
+
+