|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
|
|
|
|
|
|
section {margin-bottom: 50px;margin-top: 50px;}
|
|
|
|
|
|
a {font-weight: bold; font-size: 24px; text-decoration: none; }
|
|
|
|
|
|
.list {
|
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
border-top: 1px solid #47505e;
|
|
|
|
|
|
}
|
|
|
|
|
|
.description {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
font-weight: normal !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* .mini-player {
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
background-image: url(/project/images/player.png);
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}*/
|
|
|
|
|
|
.audio-mini {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dropbtn {
|
|
|
|
|
|
font-family: "Old Standard TT";
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropbtn:hover, .dropbtn:focus {
|
|
|
|
|
|
background-color: pink;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown-content {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
min-width: 1900px;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown-content a {
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown a:hover {background-color: none;}
|
|
|
|
|
|
|
|
|
|
|
|
.show {display: block;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.dropbtn2 {
|
|
|
|
|
|
font-family: "Old Standard TT";
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropbtn2:hover, .dropbtn:focus {
|
|
|
|
|
|
background-color: pink;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown2 {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown-content2 {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
min-width: 1900px;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown-content2 a {
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.dropdown2 a:hover {background-color: none;}
|
|
|
|
|
|
|
|
|
|
|
|
.show2 {display: block;}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<h4 align="right">woman-in-the-middle-attack</h4>
|
|
|
|
|
|
<h4 align="right">...a space for Angeliki Diakrousi to unpack</h4>
|
|
|
|
|
|
<div style="position:absolute; bottom:0px;right:150px;">You can send me a message here angeliki@conversations.im</div>
|
|
|
|
|
|
<link style="text-align: top;" rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css">
|
|
|
|
|
|
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js" charset="utf-8"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
converse.initialize({
|
|
|
|
|
|
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
|
|
|
|
|
|
show_controlbox_by_default: false
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- menu dropdown -->
|
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
|
<button onclick="myFunction()" class="dropbtn">Menu</button>
|
|
|
|
|
|
<div id="myDropdown" class="dropdown-content">
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="project/about.html" target="_blank">About <div class="description">WHAT?</div></a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS, ANNOTATIONS</div></a>
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="project/amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="project/overlapping-interface.html" target="_blank">Feedback Composition <div class="description">SOUNDWALKS, ANNOTATIVE RECORDINGS</div></a>
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- internet resources -->
|
|
|
|
|
|
<div class="dropdown2">
|
|
|
|
|
|
<button onclick="myFunction2()" class="dropbtn2">Internet sources</button>
|
|
|
|
|
|
<div id="myDropdown2" class="dropdown-content2">
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="https://www.youtube.com/watch?v=HlvfPizooII" target="_blank">Angela Davis @Occupy Wall St </a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target="_blank">Judith Butler @Occupy Wall Street</a>
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="https://www.youtube.com/watch?v=SirOxIeuNDE" target="_blank">Laurie Anderson - Mach 20</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
<a href="https://www.thisamericanlife.org/667/wartime-radio" target="_blank">Ballout, D. (2019) ‘Good Morning, Kafranbel’, This American Life: Wartime Radio</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
https://www.youtube.com/watch?v=TY96Ma6YdtQ
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div style="position:absolute; top:30%; left:26%;">
|
|
|
|
|
|
<img src="thesis/carson-list.jpg"></img>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position:absolute; top:35%; left:41%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:32%; left:51%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:40%; left:63%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-alex2.mp3"></audio>describing/annotating
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:50%; left:70%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: mediumseagreen;" src="project/audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:62%; left:75%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:75%; left:69%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:85%; left:63%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: greenyellow;" src="project/audio/selectionB.mp3"></audio>city sounds
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:90%; left:53%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-eugenie-CUT-SHORT.mp3"></audio>describing/annotating
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:77%; left:33%;;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:53%; left:26%;;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-lidia-CUT.mp3"></audio>describing/annotating
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position:absolute; top:66%; left:28%;;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: mediumseagreen;" src="project/audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:86%; left:41%;;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="position:absolute; top:43%; left:32%;">
|
|
|
|
|
|
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position:absolute; top:47%; left:29%;">
|
|
|
|
|
|
<audio controls style="background-color: violet;" src="project/audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section style="margin-top: 450px !important;">
|
|
|
|
|
|
<button>
|
|
|
|
|
|
make your own podcast
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<div>latest episode</div>
|
|
|
|
|
|
<?php
|
|
|
|
|
|
//insert the folder HERE
|
|
|
|
|
|
$files = scandir("project/podcasts", SCANDIR_SORT_DESCENDING);
|
|
|
|
|
|
$newest_file = $files[0];
|
|
|
|
|
|
echo "<audio controls src='project/podcasts/$newest_file'></audio>";
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<?php
|
|
|
|
|
|
if(!is_dir("recordings")){
|
|
|
|
|
|
$res = mkdir("recordings",0777);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// pull the raw binary data from the POST array
|
|
|
|
|
|
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
|
|
|
|
|
|
$filename = urldecode($_POST['fname']);
|
|
|
|
|
|
|
|
|
|
|
|
// write the data out to the file
|
|
|
|
|
|
$fp = fopen('recordings/'.$filename, 'wb');
|
|
|
|
|
|
fwrite($fp, $decodedData);
|
|
|
|
|
|
fclose($fp);
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function uploadAudio(mp3Data){
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
|
reader.onload = function(event){
|
|
|
|
|
|
var fd = new FormData();
|
|
|
|
|
|
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
|
|
|
|
|
|
console.log("mp3name = " + mp3Name);
|
|
|
|
|
|
fd.append('fname', mp3Name);
|
|
|
|
|
|
fd.append('data', event.target.result);
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
type: 'POST',
|
|
|
|
|
|
url: 'upload.php',
|
|
|
|
|
|
data: fd,
|
|
|
|
|
|
processData: false,
|
|
|
|
|
|
contentType: false
|
|
|
|
|
|
}).done(function(data) {
|
|
|
|
|
|
//console.log(data);
|
|
|
|
|
|
log.innerHTML += "\n" + data;
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
reader.readAsDataURL(mp3Data);
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <audio controls autoplay></audio>
|
|
|
|
|
|
<script type="text/javascript" src="recorder.js"> </script>
|
|
|
|
|
|
<fieldset><legend>RECORD AUDIO</legend>
|
|
|
|
|
|
<input onclick="startRecording()" type="button" value="start recording" />
|
|
|
|
|
|
<input onclick="stopRecording()" type="button" value="stop recording and play" />
|
|
|
|
|
|
</fieldset>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var onFail = function(e) {
|
|
|
|
|
|
console.log('Rejected!', e);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var onSuccess = function(s) {
|
|
|
|
|
|
var context = new webkitAudioContext();
|
|
|
|
|
|
var mediaStreamSource = context.createMediaStreamSource(s);
|
|
|
|
|
|
recorder = new Recorder(mediaStreamSource);
|
|
|
|
|
|
recorder.record();
|
|
|
|
|
|
|
|
|
|
|
|
// audio loopback
|
|
|
|
|
|
// mediaStreamSource.connect(context.destination);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
window.URL = window.URL || window.webkitURL;
|
|
|
|
|
|
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
|
|
|
|
|
|
|
|
|
|
var recorder;
|
|
|
|
|
|
var audio = document.querySelector('audio');
|
|
|
|
|
|
|
|
|
|
|
|
function startRecording() {
|
|
|
|
|
|
if (navigator.getUserMedia) {
|
|
|
|
|
|
navigator.getUserMedia({audio: true}, onSuccess, onFail);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.log('navigator.getUserMedia not present');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function stopRecording() {
|
|
|
|
|
|
recorder.stop();
|
|
|
|
|
|
recorder.exportWAV(function(s) {
|
|
|
|
|
|
|
|
|
|
|
|
audio.src = window.URL.createObjectURL(s);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
</script> -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/* When the user clicks on the button,
|
|
|
|
|
|
toggle between hiding and showing the dropdown content */
|
|
|
|
|
|
function myFunction() {
|
|
|
|
|
|
document.getElementById("myDropdown").classList.toggle("show");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Close the dropdown if the user clicks outside of it
|
|
|
|
|
|
window.onclick = function(event) {
|
|
|
|
|
|
if (!event.target.matches('.dropbtn')) {
|
|
|
|
|
|
var dropdowns = document.getElementsByClassName("dropdown-content");
|
|
|
|
|
|
var i;
|
|
|
|
|
|
for (i = 0; i < dropdowns.length; i++) {
|
|
|
|
|
|
var openDropdown = dropdowns[i];
|
|
|
|
|
|
if (openDropdown.classList.contains('show')) {
|
|
|
|
|
|
openDropdown.classList.remove('show');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/* When the user clicks on the button,
|
|
|
|
|
|
toggle between hiding and showing the dropdown content */
|
|
|
|
|
|
function myFunction2() {
|
|
|
|
|
|
document.getElementById("myDropdown2").classList.toggle("show2");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Close the dropdown if the user clicks outside of it
|
|
|
|
|
|
window.onclick2 = function(event) {
|
|
|
|
|
|
if (!event.target.matches('.dropbtn2')) {
|
|
|
|
|
|
var dropdowns = document.getElementsByClassName("dropdown-content2");
|
|
|
|
|
|
var i;
|
|
|
|
|
|
for (i = 0; i < dropdowns.length; i++) {
|
|
|
|
|
|
var openDropdown = dropdowns[i];
|
|
|
|
|
|
if (openDropdown.classList.contains('show2')) {
|
|
|
|
|
|
openDropdown.classList.remove('show2');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
