Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added texts in php and other details

Browse Source
master
Angeliki 6 years ago
parent e5b2fe7ab1
commit 53e60751a5
24 changed files with 277 additions and 871 deletions
Show Stats Download Patch File Download Diff File

29
amplification.html → amplification.php
Unescape Escape View File

@ -6,8 +6,10 @@
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<title>Amplification</title>
</head> </head>
<body> <body>
@ -102,25 +104,38 @@
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="width: 500px; top: 20px; right: 0px;"> <div class="draggable" style="width: 500px; top: 20px; right: 0px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content">How can we engage politically with the exclusion of specific voices from the public sphere? Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal.<div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts.</div> <div class="drag-content">
<?php include 'texts/amplification.txt'; ?>
</div> </div>
<div class="draggable" style="top: 1070px; right: 0px;"> <div class="draggable" style="top: 1070px; right: 0px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 1000px; right: 0px;"> <div class="draggable" style="top: 1000px; right: 0px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 800px; right: 0px;"> <div class="draggable" style="top: 800px; right: 0px;">
<h2 ><a href="podcast1.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 700px; right: 0px;"> <div class="draggable" style="top: 270px; right: 100px;z-index: 1;">
<h2 ><a href="podcast1.php">Podcasts</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable" style="top: 320px; right: 50px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable" style="top: 420px; right: 80px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<div class="draggable" style="top: 900px; right: 0px; z-index: 9;"> <div class="draggable" style="top: 900px; right: 0px; z-index: 9;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
<!-- end draggable --> <!-- end draggable -->

75
index.php
Unescape Escape View File

@ -9,6 +9,7 @@
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<!-- <link href="styles/app.css" rel="stylesheet" type="text/css"> <!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
@ -19,7 +20,7 @@
<body> <body>
<div style="top: 50%; left:50%;margin-top: -50px;margin-left: -50px;width: 700px; position: absolute;"> <div style="top: 50%; left:50%;margin-top: -50px;margin-left: -50px;width: 700px; position: absolute;">
<img src="images/speaker_logo.png" width="100px"> <img src="images/speaker_logo3.png" width="130px">
<h1 style="color: #A19696;">Let's <span style="font-style: italic;color:black !important;">amplify</span> unspeakable things <p style="font-size: 25px !important;">overlayered utterances</p></h1> <h1 style="color: #A19696;">Let's <span style="font-style: italic;color:black !important;">amplify</span> unspeakable things <p style="font-size: 25px !important;">overlayered utterances</p></h1>
</div> </div>
@ -33,49 +34,67 @@
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div> <div class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 4px; right: 1500px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 4px; right: 1500px;width: 300px; font-size: 20px;">
<h2 ><a href="podcast1.php" >Podcast1</a></h2> <h2 style="font-size: 26px;"><a href="podcast1.php" >Podcast1</a></h2>
<div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">
<?php include 'texts/podcast1.txt'; ?>
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:3%;left:75%; width: 500px; font-size: 24px">
<h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2>
<div class="drag-content">
<?php include 'texts/amplification.txt'; ?>
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 680px; right: 300px;width: 300px; font-size: 20px;">
<h2 ><a href="podcast2.php" >Podcast2</a></h2> <h2 style="font-size: 26px;"><a href="podcast2.php" >Podcast2</a></h2>
<div class="drag-content">
<?php include 'texts/podcast2.txt'; ?>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php" >Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 820px; right: 700px;width: 300px; font-size: 20px;">
<h2 ><a href="podcast4.php" >Podcast4</a></h2> <h2 style="font-size: 26px;"><a href="podcast3.php" >Podcast3</a></h2>
<div class="drag-content">
<?php include 'texts/podcast3.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:4%;left:80%;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top: 920px; right: 510px;width: 300px; font-size: 20px;">
<h2 ><a href="thesis-angeliki.html" >"Let's Talk About Unspeakable Things"</a></h2> <h2 style="font-size: 26px;"><a href="podcast4.php" >Podcast4</a></h2>
<div class="drag-content"> <div class="drag-content">
This thesis is a series of three essays which relate to female and collective voices, and their mediation. They address the voice as a feminist tool for communication; studying how the female voice creates conditions for forms of listening and making space. Historically, some modes of address have been marginalized and shut out of the public domain. Collective voices are marginalized under the realm of patriarchal individualistic society. Even though voice is a medium for collective practice it is situated in a context that tends towards social binary structures and oppositions that restrict its possibilities. These binaries, which favor the 'civilized white male' subjectivities, have held influence on Western thinking since antiquity. Nevertheless, the nature of voice and its mediation overpass oppositions of gender, nationality, culture, space, technology and power relations. My research seeks to unravel these political capabilities of voices, in order to explore democratic ways of communication that embrace excluded forms of address. <?php include 'texts/podcast4.txt'; ?>
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:35%;left:25%;">
<h2 ><a href="amplification.html" >Amplification of female voices</a></h2>
<div class="drag-content">Part of the project is a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal, an open library that I consider a diverse public space. How can we engage politically with the exclusion of specific voices from the public sphere? Here I have documented our attempts. Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts. The produced material is being included in an audio archive, the player. </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:75%;left:47%;width: 200px; font-size: 14px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;">
<h2 style="font-size: 20px;"><a href="player.html" >Diary of West Rotterdam</a></h2> <h2 style="font-size: 20px;"><a href="player.php" >Diary of West Rotterdam</a></h2>
<div class="drag-content">I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space. <div class="drag-content">
<?php include 'texts/diary.txt'; ?>
</div></div> </div></div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:1%;left:36%;">
<h2 ><a href="player.html" >Player</a></h2>
<div class="drag-content">The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. </div> <div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:70px;left:810px">
<h2 ><a href="player.php" >Player</a></h2>
<div class="drag-content">
<?php include 'texts/player.txt'; ?>
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;width: 800px; font-size: 28px" > <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:18%;left:6%;width: 800px; font-size: 28px" >
<h2 style="font-size: 36px"><a href="index.php" >About</a></h2> <h2 style="font-size: 44px"><a href="index.php" >About</a></h2>
<div class="drag-content"> <div class="drag-content">
'Let's amplify unspeakable things' is an online platform that supports a space for exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It consists of a set of experiments that questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit an archive of audio recordings produced in situated meetings and soundwalks. Every podcast exists on a way that creates repetetive layers of the same material. I perceive amplification as a way to create presence through repetition and multiplication. 'Let's amplify unspeakable things' is upsetting binaries such as male/female, expert/amateur, rational/irrational. It is about creating poetic (audio) narratives emerging from the contribution of people. <?php include 'texts/about.txt'; ?>
</div></div> </div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:67%;left:25%;" >
<h2 ><a href="thesis-angeliki.php" >"Let's Talk About Unspeakable Things"</a></h2>
<div class="drag-content">
<?php include 'texts/thesis-summary.txt'; ?>
</div>
</div>
<!-- end draggable --> <!-- end draggable -->

190
index.php.save
Unescape Escape View File

@ -1,190 +0,0 @@
<html lang="en">
<style type="text/css">
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
section {margin-bottom: 50px;}
a {font-weight: bold; font-size: 24px; text-decoration: none; }
.list {
border-top: 1px solid #47505e;
padding-top: 10px;
padding-bottom: 10px;
list-style: none;
}
.description {
font-size: 12px;
float: right;
}
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
cursor: pointer;
}*/
.audio-mini {
width: 50px;
}
</style>
<body>
<h4 align="left">woman-in-the-middle-attack</h4>
<h4 align="right">...a space for Angeliki Diakrousi to unpack</h4>
<!-- <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>
<link 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: true
});
</script>
<button>
make your own podcast
</button>
<?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> -->
<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>";
?>
<div>You can send me a message here angeliki@conversations.im</div>
</body>
</html>

371
index.php.save.1
Unescape Escape View File

@ -1,371 +0,0 @@
<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>

11
js/jquery.ui.touch-punch.min.js vendored
Unescape Escape View File

@ -0,0 +1,11 @@
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

1
js/mp3recorder.js
Unescape Escape View File

@ -72,6 +72,7 @@
this.exportMP3 = function(cb) { this.exportMP3 = function(cb) {
this.logStatus('converting...'); this.logStatus('converting...');
// export the blob from the worker // export the blob from the worker
this.exportBlob(function(blob) { this.exportBlob(function(blob) {
var fileReader = new FileReader(); var fileReader = new FileReader();

27
player.html → player.php
Unescape Escape View File

@ -5,7 +5,9 @@
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<title>Player</title>
</head> </head>
@ -330,27 +332,38 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px">
<h2 ><a href="player.html">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 316.833px; left: 10;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 316.833px; left: 10;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. </div> <div class="drag-content">
<?php include 'texts/player.txt'; ?>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 100px; right: 5px; width: 150px; font-size: 16px"> <div class="draggable" style="top: 270px; right: -1500;z-index: 1;">
<h2 ><a href="podcast1.php">Podcasts</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable" style="top: 1%; right: -1910px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable" style="top: 2%px; right: -1700px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable" style="top: 3%px; right: -1880px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>

84
podcast1.php
Unescape Escape View File

@ -4,7 +4,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> <title>Podcast1</title>
</head>
<body> <body>
@ -15,38 +17,39 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.html">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.html">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
<div class="drag-content">Podcast1 "Mediating Speech" is about the amplification of one's voice through another person.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">
<?php include 'texts/podcast1.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
@ -57,36 +60,16 @@ $files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt'; echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">'; echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '</p></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
<br> <br>
<div align="center"> <div align="center">
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <?php include 'texts/dear_listener.txt'; ?>
<p>Dear listener,</p>
<p>you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right" ><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone" </div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p>
<!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ -->
<!-- <div class="wrapper">
<section class="main-controls">
<canvas class="visualizer" height="60px"></canvas>
<div id="buttons">
<button class="record">Record</button>
<button class="stop">Stop</button>
</div>
</section>
<section class="sound-clips">
</section>
</div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
@ -95,14 +78,15 @@ echo '</p></div></td>'; } ?>
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br />
<div id="dataUrlcontainer" hidden></div> <div><button id="button_upload" onclick="upload()">Upload</button></div>
<br />
<div id="saved_msg"></div>
<pre id="log" hidden></pre> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div> </div>
<br /> <br />
<br /> <br />
@ -120,19 +104,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
@ -141,6 +112,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->
<script type="text/javascript"> <script type="text/javascript">
@ -180,6 +152,8 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}, function(e) { }); }, function(e) { });
}); });
document.getElementById("button_upload").style.display='none';
$('.recorder .stop').on('click', function() { $('.recorder .stop').on('click', function() {
$this = $(this); $this = $(this);
$recorder = $this.parent(); $recorder = $this.parent();
@ -193,6 +167,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
document.getElementById("playerContainer").innerHTML = ""; document.getElementById("playerContainer").innerHTML = "";
// console.log(url) // console.log(url)
document.getElementById("button_upload").style.display='block';
var duc = document.getElementById("dataUrlcontainer"); var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url; duc.innerHTML = url;
@ -202,6 +177,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
//$recorder.append(au); //$recorder.append(au);
$('#playerContainer').append(au); $('#playerContainer').append(au);
recorderObject.logStatus(''); recorderObject.logStatus('');
}); });
@ -224,10 +200,12 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
}).done(function(o) { }).done(function(o) {
console.log('saved'); console.log('saved');
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
}); });
} }
</script> </script>
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>

84
podcast2.php
Unescape Escape View File

@ -4,7 +4,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> <title>Podcast2</title>
</head>
<body> <body>
@ -15,38 +17,39 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.html">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.html">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
<div class="drag-content">Podcast2 "Voice's Transition" is about the transformation of one's voice into another voice in terms of pitch that responds to another gender.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">
<?php include 'texts/podcast2.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
@ -57,36 +60,16 @@ $files = glob("podcasts/podcast2/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt'; echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">'; echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '</p></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
<br> <br>
<div align="center"> <div align="center">
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <?php include 'texts/dear_listener.txt'; ?>
<p>Dear listener,</p>
<p>you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right" ><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone" </div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p>
<!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ -->
<!-- <div class="wrapper">
<section class="main-controls">
<canvas class="visualizer" height="60px"></canvas>
<div id="buttons">
<button class="record">Record</button>
<button class="stop">Stop</button>
</div>
</section>
<section class="sound-clips">
</section>
</div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
@ -95,14 +78,15 @@ echo '</p></div></td>'; } ?>
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br />
<div id="dataUrlcontainer" hidden></div> <div><button id="button_upload" onclick="upload()">Upload</button></div>
<br />
<div id="saved_msg"></div>
<pre id="log" hidden></pre> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div> </div>
<br /> <br />
<br /> <br />
@ -120,19 +104,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
@ -141,6 +112,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->
<script type="text/javascript"> <script type="text/javascript">
@ -180,6 +152,8 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}, function(e) { }); }, function(e) { });
}); });
document.getElementById("button_upload").style.display='none';
$('.recorder .stop').on('click', function() { $('.recorder .stop').on('click', function() {
$this = $(this); $this = $(this);
$recorder = $this.parent(); $recorder = $this.parent();
@ -193,6 +167,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
document.getElementById("playerContainer").innerHTML = ""; document.getElementById("playerContainer").innerHTML = "";
// console.log(url) // console.log(url)
document.getElementById("button_upload").style.display='block';
var duc = document.getElementById("dataUrlcontainer"); var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url; duc.innerHTML = url;
@ -202,6 +177,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
//$recorder.append(au); //$recorder.append(au);
$('#playerContainer').append(au); $('#playerContainer').append(au);
recorderObject.logStatus(''); recorderObject.logStatus('');
}); });
@ -224,10 +200,12 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
}).done(function(o) { }).done(function(o) {
console.log('saved'); console.log('saved');
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
}); });
} }
</script> </script>
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>

86
podcast3.php
Unescape Escape View File

@ -4,49 +4,52 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> <title>Podcast3</title>
</head>
<body> <body>
<!-- draggable --> <!-- draggable -->
<br><br> <br><br>
<h3 id="box-title" style="width: 220px; left: 45%; position: absolute;"> <h3 id="box-title" style="width: 215px; left: 45%; position: absolute;">
"Blocking our Voices" "Blocking our Voices"
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.html">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.html">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
<div class="drag-content">Podcast3 "Blocking our Voices" is about the ways we learn tpo self-control and sencor our speech.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">
<?php include 'texts/podcast3.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
@ -57,36 +60,16 @@ $files = glob("podcasts/podcast3/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt'; echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">'; echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '</p></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
<br> <br>
<div align="center"> <div align="center">
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <?php include 'texts/dear_listener.txt'; ?>
<p>Dear listener,</p>
<p>you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right" ><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone" </div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p>
<!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ -->
<!-- <div class="wrapper">
<section class="main-controls">
<canvas class="visualizer" height="60px"></canvas>
<div id="buttons">
<button class="record">Record</button>
<button class="stop">Stop</button>
</div>
</section>
<section class="sound-clips">
</section>
</div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
@ -95,14 +78,15 @@ echo '</p></div></td>'; } ?>
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br />
<div id="dataUrlcontainer" hidden></div> <div><button id="button_upload" onclick="upload()">Upload</button></div>
<br />
<div id="saved_msg"></div>
<pre id="log" hidden></pre> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div> </div>
<br /> <br />
<br /> <br />
@ -120,19 +104,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
@ -141,6 +112,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->
<script type="text/javascript"> <script type="text/javascript">
@ -180,6 +152,8 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}, function(e) { }); }, function(e) { });
}); });
document.getElementById("button_upload").style.display='none';
$('.recorder .stop').on('click', function() { $('.recorder .stop').on('click', function() {
$this = $(this); $this = $(this);
$recorder = $this.parent(); $recorder = $this.parent();
@ -193,6 +167,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
document.getElementById("playerContainer").innerHTML = ""; document.getElementById("playerContainer").innerHTML = "";
// console.log(url) // console.log(url)
document.getElementById("button_upload").style.display='block';
var duc = document.getElementById("dataUrlcontainer"); var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url; duc.innerHTML = url;
@ -202,6 +177,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
//$recorder.append(au); //$recorder.append(au);
$('#playerContainer').append(au); $('#playerContainer').append(au);
recorderObject.logStatus(''); recorderObject.logStatus('');
}); });
@ -224,10 +200,12 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
}).done(function(o) { }).done(function(o) {
console.log('saved'); console.log('saved');
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
}); });
} }
</script> </script>
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>

88
podcast4.php
Unescape Escape View File

@ -1,54 +1,55 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> <title>Podcast4</title>
</head>
<body> <body>
<!-- draggable --> <!-- draggable -->
<br><br> <br><br>
<h3 id="box-title" style="width: 370px; left: 45%; position: absolute;"> <h3 id="box-title" style="width: 360px; left: 42.5%; position: absolute;">
"City Sounds Reveal Voice Binaries" "City Sounds Reveal Voice Binaries"
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.html">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.html">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
</div> </div>
<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
<div class="drag-content">Podcast4 "City Sounds Reveal Voice Binaries" is about recorded sounds from the city of Rotterdam as an attempt to approach how public spaces reveal binaries and speech exclusion.<br><i> It includes series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.</i> <div class="drag-content">
<?php include 'texts/podcast4.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
@ -59,36 +60,16 @@ $files = glob("podcasts/podcast4/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down" style="min-width:1100px;>';include $num.'.txt'; echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt';
echo '</div><p style="font-size:14px;line-height:1;text-align: left;">'; echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '</p></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>
<br> <br>
<div align="center"> <div align="center">
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <?php include 'texts/dear_listener.txt'; ?>
<p>Dear listener,</p>
<p>you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right" ><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone" </div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. </p>
<!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ -->
<!-- <div class="wrapper">
<section class="main-controls">
<canvas class="visualizer" height="60px"></canvas>
<div id="buttons">
<button class="record">Record</button>
<button class="stop">Stop</button>
</div>
</section>
<section class="sound-clips">
</section>
</div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder --> <!-- recorder -->
<div class="recorder"> <div class="recorder">
@ -97,14 +78,15 @@ echo '</p></div></td>'; } ?>
<pre class="status"></pre> <pre class="status"></pre>
</div> </div>
<div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div> <div id="playerContainer"></div>
<br />
<div id="dataUrlcontainer" hidden></div> <div><button id="button_upload" onclick="upload()">Upload</button></div>
<br />
<div id="saved_msg"></div>
<pre id="log" hidden></pre> <div id="dataUrlcontainer" hidden></div>
<pre id="log" hidden></pre>
</div> </div>
<br /> <br />
<br /> <br />
@ -122,19 +104,6 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
@ -143,6 +112,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<!-- scripts for recorder --> <!-- scripts for recorder -->
<script type="text/javascript"> <script type="text/javascript">
@ -182,6 +152,8 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
}, function(e) { }); }, function(e) { });
}); });
document.getElementById("button_upload").style.display='none';
$('.recorder .stop').on('click', function() { $('.recorder .stop').on('click', function() {
$this = $(this); $this = $(this);
$recorder = $this.parent(); $recorder = $this.parent();
@ -195,6 +167,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
document.getElementById("playerContainer").innerHTML = ""; document.getElementById("playerContainer").innerHTML = "";
// console.log(url) // console.log(url)
document.getElementById("button_upload").style.display='block';
var duc = document.getElementById("dataUrlcontainer"); var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url; duc.innerHTML = url;
@ -204,6 +177,7 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
//$recorder.append(au); //$recorder.append(au);
$('#playerContainer').append(au); $('#playerContainer').append(au);
recorderObject.logStatus(''); recorderObject.logStatus('');
}); });
@ -226,10 +200,12 @@ echo '<audio src='.$num.' controls></audio><br /><br />'; }
} }
}).done(function(o) { }).done(function(o) {
console.log('saved'); console.log('saved');
document.getElementById("saved_msg").innerHTML = "Saved '*|o.o/*' You can now refresh and see your voice message in the list below :<";
}); });
} }
</script> </script>
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>

36
styles/stylesheet.css
Unescape Escape View File

@ -36,7 +36,9 @@ a {
h2 { h2 {
text-align: center; text-align: center;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 28px; font-size: 32px;
margin: 5px;
margin-bottom: 10px;
} }
h3 { h3 {
@ -47,7 +49,7 @@ table, th, td {
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
border-collapse: separate; border-collapse: separate;
padding: 6px; padding:20px;
} }
button { button {
@ -316,23 +318,24 @@ input[type=checkbox]:checked ~ aside {
/*hover of images and transcriptions style*/ /*hover of images and transcriptions style*/
.tooltip-wrap { .tooltip-wrap {
position: relative; position: relative;
font-size: 1.6rem;
} }
.tooltip-wrap .tooltip-content-down { .tooltip-wrap .tooltip-content-down {
display: none; display: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 100%; top: 50px;
/*bottom: 100%;*/ /*bottom: 100%;*/
left: 2%; left: 50px;
/*right: 100%;*/ /*right: 100%;*/
padding: 0.2em; padding: 0.2em;
background-color: rgba(255, 255, 255, 0.8); background-color: white;
/*background-color: rgba(255, 255, 255, 0.8);*/
border: 1px; border: 1px;
border-style: solid; border-style: solid;
border-color: black; border-color: black;
text-align: left; text-align: left;
min-width:600px;
} }
.tooltip-wrap .tooltip-content-right { .tooltip-wrap .tooltip-content-right {
@ -348,6 +351,7 @@ input[type=checkbox]:checked ~ aside {
border: none; border: none;
text-align: left; text-align: left;
min-width: 400px; min-width: 400px;
font-size: 20px;
} }
.tooltip-wrap .tooltip-content-up { .tooltip-wrap .tooltip-content-up {
@ -526,12 +530,15 @@ input[type=checkbox]:checked ~ aside {
.drag-content { .drag-content {
/*float: right;*/ /*float: right;*/
font-weight: normal !important; font-weight: normal !important;
padding: 0.8em; padding: 5px;
padding-bottom: 20px;
text-align: center;
/*font-size: 20px;*/ /*font-size: 20px;*/
} }
.scaleable-wrapper { .scaleable-wrapper {
padding: 20px; padding: 20px;
padding-bottom: 20px;
resize: both; resize: both;
position: relative; position: relative;
/*height: 400px;*/ /*height: 400px;*/
@ -594,3 +601,18 @@ input[type=checkbox]:checked ~ aside {
} }
/*# sourceMappingURL=stylesheet.css.map */ /*# sourceMappingURL=stylesheet.css.map */
.status {
color: red;
}
/*#button_upload {
background-color: pink;
padding: 10px;
font-size: 20px;
}*/
#saved_msg {
color: red;
font-size: 20px;
}

41
test.html
Unescape Escape View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<style type="text/css">
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
h2 {
text-align: center;
letter-spacing: 4px;
font-size: 28px;}
section {margin-bottom: 100px; margin-top: 50px;}
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
button {width: 100px;}
.short-description{
margin-left: 40%;
margin-right: 40%;
text-align: center;
}
a {
text-decoration:none;
}
</style>
<html>
<head>
<section>
<h2 >Extracts</h2>
<div class="short-description">
<p>"Nusra considered their voices shameful, a form of nakedness" </p>
<p>
<a href="../index.html">Utterance</a>
</p>
</div>
</section>
<img src="texts/fresh1.jpg" width="35%"></img>
<img src="texts/fresh2.jpg" width="35%"></img>
<img src="texts/carson-extract.jpg" width="28%"></img>
<img src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/13/Extracts-reading.jpg" width="100%" style="margin-top: 150px;"></img>
</head>
<body>
</body>
</html>

1
texts/about.txt
Unescape Escape View File

@ -0,0 +1 @@
'Let's amplify unspeakable things' is an online platform of exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational. It includes a set of <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect and difficulties, of a project like that reveals? The website consists of different web-audio implementations</div></div></div>that revisit and overlay an archive of audio recordings produced in situated meetings and soundwalks, and media sources from a body of research. 'Let's amplify unspeakable things' is based on the concept that amplification can create presence through repetition and multiplication.

1
texts/amplification.txt
Unescape Escape View File

@ -0,0 +1 @@
This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts. The produced material is being included in an audio archive, the player.

4
texts/dear_listener.txt
Unescape Escape View File

@ -0,0 +1,4 @@
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p>
you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. <p>Maximum duration: 1 min</p>

1
texts/diary.txt
Unescape Escape View File

@ -0,0 +1 @@
I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.

1
texts/player.txt
Unescape Escape View File

@ -0,0 +1 @@
The player is an audio archive of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice.

1
texts/podcast1.txt
Unescape Escape View File

@ -0,0 +1 @@
Podcast1 "Mediating Speech" includes a series of episodes about the amplification of one's speech through the voice of others.

1
texts/podcast2.txt
Unescape Escape View File

@ -0,0 +1 @@
Podcast2 "Voice's Transition" includes a series of episodes about the electronical transformation of one's voice into another voice in terms of gender.

1
texts/podcast3.txt
Unescape Escape View File

@ -0,0 +1 @@
Podcast3 "Blocking our Voices" includes a series of episodes about the ways we learn to self-control and sensor our speech.

1
texts/podcast4.txt
Unescape Escape View File

@ -0,0 +1 @@
Podcast4 "City Sounds Reveal Voice Binaries" includes a series of episodes about active listening of public spaces on a way that it reveals the binaries and exclusion of voices.

1
texts/thesis-summary.txt
Unescape Escape View File

@ -0,0 +1 @@
This is a thesis of three essays which relate to female and collective voices, and their mediation. The essay address the voice as a feminist tool for communication; studying how the female voice creates conditions for forms of listening and making space. Historically, some modes of address have been marginalized and shut out of the public domain. Collective voices are marginalized under the realm of patriarchal individualistic society. Even though voice is a medium for collective practice it is situated in a context that tends towards social binary structures and oppositions that restrict its possibilities. These binaries have held influence on Western thinking since antiquity. Nevertheless, the nature of voice and its mediation overpass oppositions of gender, nationality, culture, space, technology and power relations. My research seeks to unravel these political capabilities of voices, in order to explore democratic ways of communication that embrace excluded forms of address.

12
thesis-angeliki.html → thesis-angeliki.php
Unescape Escape View File

@ -1,8 +1,12 @@
<html> <html>
<head>
<title>Let' s Talk About Unspeakable Things</title>
</head>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<style> <style>
@ -47,14 +51,14 @@
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable" style="top: 740px; right: 300px;">
<h2><a href="amplification.html">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.html">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
@ -76,9 +80,9 @@
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable" style="top: 640px; right: 2000px; z-index: 9;">
<h2 ><a href="thesis-angeliki.html">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
This thesis is a series of three essays which relate to female and collective voices, and their mediation. They address the voice as a feminist tool for communication; studying how the female voice creates conditions for forms of listening and making space. Historically, some modes of address have been marginalized and shut out of the public domain. Collective voices are marginalized under the realm of patriarchal individualistic society. Even though voice is a medium for collective practice it is situated in a context that tends towards social binary structures and oppositions that restrict its possibilities. These binaries, which favor the 'civilized white male' subjectivities, have held influence on Western thinking since antiquity. Nevertheless, the nature of voice and its mediation overpass oppositions of gender, nationality, culture, space, technology and power relations. My research seeks to unravel these political capabilities of voices, in order to explore democratic ways of communication that embrace excluded forms of address. <?php include 'texts/thesis-summary.txt'; ?>
</div> </div>
</div> </div>
Write Preview
Loading…
Cancel
Save