< 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; }
.internet {font-weight: regular; font-size: 18px; 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;
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;}
/*style internet sources*/
.dropbtn2 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: pink;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
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 list of podcasts*/
.dropbtn3 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn3:focus {
background-color: pink;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: none;}
.show3 {display: block;}
< / style >
< body >
< 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 style = "list-style: none;" >
< a class = "internet" href = "https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target = "popup" onclick = "window.open('https://www.youtube.com/watch?v=HlvfPizooII','popup','width=600,height=600'); return false;" > Angela Davis @Occupy< / a >
< / li >
< li style = "list-style: none;" >
< a class = "internet" href = "https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be" target = "popup" onclick = "window.open('https://www.youtube.com/watch?v=JVpoOdz1AKQ&feature=youtu.be','popup','width=600,height=600'); return false;" > Judith Butler @Occupy Wall Street< / a >
< / li >
< li style = "list-style: none;" >
< a class = "internet" href = "https://www.youtube.com/watch?v=SirOxIeuNDE" target = "popup" onclick = "window.open('https://www.youtube.com/watch?v=SirOxIeuNDE','popup','width=600,height=600'); return false;" > Laurie Anderson - Mach 20< / a >
< / li >
< li style = "list-style: none;" >
< a class = "internet" href = "https://www.thisamericanlife.org/667/wartime-radio" target = "popup" onclick = "window.open('https://www.thisamericanlife.org/667/wartime-radio','popup','width=600,height=600'); return false;" > Ballout, D. (2019) ‘ ’ < / a >
< / li >
< li style = "list-style: none;" >
< a class = "internet" href = "https://www.youtube.com/watch?v=TY96Ma6YdtQ" target = "popup" onclick = "window.open('https://www.youtube.com/watch?v=TY96Ma6YdtQ','popup','width=600,height=600'); return false;" > Vocal performance of Katalin Ladik in the film ‘ ’ < / a >
< / li >
< / 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: 400px !important;" >
< button >
make your own podcast
< / button > < br > < br >
< div > Listen to the latest podcast:< / 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 > ";
?>
< br > < div style = "font-size:12px;" > < b > sample_rate< / b > : 44100< br > < b > duration< / b > : 534.857143< br > < b > title< / b > : transformation for presence< br > < b > narrator< / b > : angeliki< br > < b > topic< / b > : female voice to male< / li > < / ul > < br > < b > filename< / b > : podcasts/podcast.20190501-1223-femalemale.mp3< br > < b > format_name< / b > : mp3< br > < b > size< / b > : 8558073< / div >
<!-- links from all the podcasts from the directory -->
<!-- <div class="dropdown3">
< button onclick = "myFunction3()" class = "dropbtn3" > Internet sources< / button >
< div id = "myDropdown3" class = "dropdown-content3" >
<?php
$files = glob("project/podcasts/*.*");
for ($i=1; $i< count ( $ files ) ; $ i + + )
{ $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '< li style = "list-style: none;" > < a class = "internet" href = '.$num.' > '.$num.'< / a > < / li > ';
}?>
< / div >
< / div > -->
< br >
< label for = "selection" > Listen:< / label >
< br >
< select id = "selection" >
< option value = "" > - Select track -< / option >
<?php
$files = glob("project/podcasts/*.*");
for ($i=1; $i< count ( $ files ) ; $ i + + )
{ $num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '< option id = "playlist" value = "'.$num.'" > '.$num.'< / option > ';
}?>
< / select >
< br >
< b > audio zines< / b >
< / 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 >
