edit position of images and menu

master
Angeliki 6 years ago
parent 62145bba86
commit e2e3907289

@ -16,29 +16,31 @@
--> -->
<!-- draggable archive --> <!-- draggable archive -->
<!-- div vowels -->
<div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 99px; left: 868px; line-height: 0 !important;"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></div> <div id="resize" class="draggable ui-draggable-handle" style="top: 47px; left: 1083px;line-height: 0 !important;"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 475px; left: 1049px;line-height: 0 !important;"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></div> <div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 119px; left: 1405px;line-height: 0 !important;"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 116px; left: 1176px;"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></div>
</div>
<div id="img" class="draggable ui-draggable-handle" style="top: 228px; left: 608px;"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 1106px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 390px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 264px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 1334px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 100px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 404px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 125px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 885px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 385px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 61px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 16px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 928px;z-index: -1;"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div> <div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 228px;z-index: -1;"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
<div id="img"> <div id="img">
@ -78,7 +80,6 @@
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
</div> </div>
<!-- end draggable --> <!-- end draggable -->

@ -19,45 +19,46 @@
<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_logo.png" width="100px">
<h1>Let's amplify 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>
<!-- (the unfolding/overlayering of) --> <!-- (the unfolding/overlayering of) -->
<!-- draggable --> <!-- draggable -->
<div class="draggable" style="top:9%;left:10%;"> <div class="draggable" style="top:9%;left:6%;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2> <h2 ><a href="index.php" target="_blank">About</a></h2>
<div class="drag-content"> <div class="drag-content">
'Amplified Utterances' 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. 'Amplified Utterances' is upsetting binaries such as male/female, expert/amateur, rational/irrational. It is about creating poetic (audio) narratives emerging from the contribution of people. '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.
</div></div> </div></div>
<div class="draggable" id="resize" style="top:12%;left:48%;width: 500px;"> <div class="draggable" id="resize" style="top:12%;left:55%;width: 500px;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/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="texts/thesis/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" style="top:81%;left:76%;"> <div class="draggable" style="top:81%;left:76%;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> Podcast is a series of episodes of moments of an online audio archive overlayered by my voice as a narrator. <div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
</div> </div>
</div> </div>
<div class="draggable" style="top:34%;left:60%;"> <div class="draggable" style="top:4%;left:80%;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let's Talk About Unspeakable Things</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let's Talk About Unspeakable Things"</a></h2>
<div class="drag-content">Thesis</div> <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.
</div>
</div> </div>
<div class="draggable" style="top:25%;left:27%;"> <div class="draggable" style="top:35%;left:25%;">
<h2 ><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> <h2 ><a href="amplification.html" target="_blank">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">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" style="top:75%;left:47%;"> <div class="draggable" style="top:75%;left:47%;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2> <h2 ><a href="player.html" target="_blank">Diary of West Rotterdam</a></h2>
<div class="drag-content"><p>I recorded sounds from West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around a neighborhood<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> 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">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/" target="_blank">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.
</p>
</div></div> </div></div>
<div class="draggable" style="top:1%;left:36%;"> <div class="draggable" style="top:1%;left:36%;">
<h2 ><a href="player.html" target="_blank">player</a></h2> <h2 ><a href="player.html" target="_blank">Player</a></h2>
<div class="drag-content">Audio collection</div> <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> </div>
<!-- end draggable --> <!-- end draggable -->

@ -13,13 +13,6 @@ $(document).ready(function() {
}); });
// draggable video pop up
$("#angela").click(function(){
$("#show").fadeIn()
console.log("around")
})
@ -228,3 +221,7 @@ window.onclick2 = function(event) {
} }
} }
} }
// for thesis
var socket = new WebSocket(`wss://hypothes.is/ws?access_token=${'6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik'}`)

@ -1,7 +1,6 @@
<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">
<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>
@ -11,34 +10,68 @@
<body> <body>
<!-- draggable youtube links and other -->
<!-- sources -->
<div id="show1" class="draggable"><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- draggable youtube links and other --> <div id="show3" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><iframe width="500" height="400" src="https://www.thisamericanlife.org/667/wartime-radio" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show5" class="draggable"><iframe width="500" height="400" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- sources -->
<div id="show" class="draggable" style="left:50%;"><iframe width="250px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- links --> <!-- links -->
<div class="draggable"> <div class="draggable" style="width: 500px !important">
<li id="angela" style="list-style: none;"> <li id="angela">
<a href="#" >Angela Davis @Occupy Wall Street</a> <a href="#" >Angela Davis @Occupy Wall Street</a>
</li> </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 id="judith">
<a href="#" >Judith Butler @Occupy Wall Street</a>
</li> </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 id="laurie">
<a href="#" >Laurie Anderson - Mach 20</a>
</li> </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) Good Morning, Kafranbel, This American Life: Wartime Radio</a> <li id="dana">
<a href="#" >Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio</a>
</li> </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 Berberian Sound Studio, 2012</a> <li id="katalin">
<a href="#" >Vocal performance of Katalin Ladik in the film Berberian Sound Studio, 2012</a>
</li> </li>
</div> </div>
<script>
// draggable video pop up
$("#angela").click(function(){
$("#show1").fadeIn()
console.log("around")
});
$("#judith").click(function(){
$("#show2").fadeIn()
console.log("around")
});
$("#laurie").click(function(){
$("#show3").fadeIn()
console.log("around")
});
$("#dana").click(function(){
$("#show4").fadeIn()
console.log("around")
});
$("#katalin").click(function(){
$("#show5").fadeIn()
console.log("around")
});
</script>
@ -507,26 +540,27 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top:75%;right: 0px;"> <div class="draggable" style="top:60%;left: 0;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2> <h2 ><a href="player.html" target="_blank">Diary of West Rotterdam</a></h2>
<div class="drag-content">I recorded sounds from West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around a neighborhood<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> 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">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/" target="_blank">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></div> </div></div>
<div class="draggable" style="top:1000px; right: 0px;"> <div class="draggable" style="top:700px; right: 0px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> <h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="width: 500px; top: 20px; right: 0px;"> <div class="draggable" style="top: 316.833px; left: 0;">
<h2 ><a href="player.html" target="_blank">Player</a></h2> <h2 ><a href="player.html" target="_blank">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> </div>
<div class="draggable" style="top: 800px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2> <div class="draggable" style="top: 200px; right: 0px;">
<h2 ><a href="index.php" target="_blank">About</a></h2>
</div> </div>
<div class="draggable" style="top: 700px; right: 0px;"> <div class="draggable" style="top: 100px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
</div> </div>
<div class="draggable" style="top: 900px; right: 0px; z-index: 9;"> <div class="draggable" style="top: 600px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2> <h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
</div> </div>
@ -535,12 +569,6 @@ Oh, I hear children in the background crying</div>
<script>
</script>

@ -25,25 +25,28 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 600px; right: 0px;"> <div class="draggable" style="top: 740px; right: 0px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2> <h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 0px;"> <div class="draggable" style="top: 948.6px; right: 0px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2> <h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div> </div>
<div class="draggable" style="top: 786.533px; right: 0px;"> <div class="draggable" style="top: 848.533px; right: 0px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2> <h2 ><a href="player.html" target="_blank">Player</a></h2>
</div> </div>
<div class="draggable" style="top: 125px; right: 0px;"> <div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2> <h2 ><a href="podcast1.php" target="_blank">About</a></h2>
</div> </div>
<div class="draggable" style="top: 51.9833px; right: 0px;"> <div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2> <h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
</div> </div>
<div class="draggable" style="top: 500px; right: 0px; z-index: 9;"> </div>
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>

@ -2,6 +2,12 @@
<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">
<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/mp3recorder.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="js/main.js"></script>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -10,14 +16,40 @@
<a href="podcast1.php">Podcast1 </a> <a href="podcast1.php">Podcast1 </a>
<a href="podcast2.php" class="active">Podcast2 </a> <a href="podcast2.php" class="active">Podcast2 </a>
<a href="podcast3.php">Podcast3 </a> <a href="podcast3.php">Podcast3 </a>
<a href="podcast4.php">Podcast4 </a>
</div> </div>
<br><br>
<h3> <h3 id="box-title" style="width: 200px; left: 45%; position: absolute;">
"Voice's Transition" "Voice's Transition"
</h3> </h3>
<!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 0px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div>
<div class="draggable" style="top: 948.6px; right: 0px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div>
<div class="draggable" style="top: 848.533px; right: 0px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
</div>
</div>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<br><br><br><br><br><br>
<table><tr> <table><tr>
<?php <?php
$files = glob("podcasts/podcast2/*.mp3"); $files = glob("podcasts/podcast2/*.mp3");
@ -33,13 +65,14 @@ echo '</p></div></td>'; } ?>
<br> <br>
<div align="center"> <div align="center">
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating/recording them or annotate them with your vocal comments </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>
</div> <!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ --> <!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper"> <!-- <div class="wrapper">
<section class="main-controls"> <section class="main-controls">
<canvas class="visualizer" height="60px"></canvas> <canvas class="visualizer" height="60px"></canvas>
<div id="buttons"> <div id="buttons">
@ -49,109 +82,62 @@ echo '</p></div></td>'; } ?>
</section> </section>
<section class="sound-clips"> <section class="sound-clips">
</section> </section>
</div> </div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div> </div>
<section style="float:right;"> <div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div>
<div id="dataUrlcontainer" hidden></div>
<!-- save the new recordings --> <pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php <?php
if(!is_dir("recordings")){ $files = glob("uploads/*.wav");
$res = mkdir("recordings",0777); for ($i=0; $i<count($files); $i++)
} {$num = $files[$i];
$var1 = $_GET["files"]["name"];
// pull the raw binary data from the POST array echo '<audio src='.$num.' controls></audio><br /><br />'; }
$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);
?> ?>
</div>
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method
window.alert(data);
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "multipart/form-data");
if(data != null) //&& data != "")
{
req.setRequestHeader("Content-length", data.length);
req.send(data);
}}
// <!-- attempt to save the new recordings --> <!-- scripts for dictaphone -->
<?php <!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
$save_folder = dirname(__FILE__) ."/js";
if(! file_exists($save_folder)) {
if(! mkdir($save_folder)) {
die("failed to create save folder $save_folder");
}
}
$key = 'filename';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$upload_name = $_FILES["audiofile"]["name"];
$type = $_FILES["audiofile"]["type"];
$filename = "$save_folder/$upload_name";
$saved = 0;
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {
$saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0;
}
//name is needed to send in the php file
?>
</script>
<!-- save recordings -->
<!-- <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> -->
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>
@ -178,6 +164,94 @@ if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match
; ;
</script> </script>
<!-- scripts for recorder -->
<script type="text/javascript">
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
</script>
<script>
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadWav.php",
data: {
wavBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>

@ -2,6 +2,12 @@
<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">
<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/mp3recorder.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="js/main.js"></script>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -10,15 +16,40 @@
<a href="podcast1.php">Podcast1 </a> <a href="podcast1.php">Podcast1 </a>
<a href="podcast2.php">Podcast2 </a> <a href="podcast2.php">Podcast2 </a>
<a href="podcast3.php" class="active">Podcast3 </a> <a href="podcast3.php" class="active">Podcast3 </a>
<a href="podcast4.php">Podcast4 </a>
</div> </div>
<br><br>
<h3> <h3 id="box-title" style="width: 220px; left: 45%; position: absolute;">
"Blocking our Voices" "Blocking our Voices"
</h3> </h3>
<!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 0px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div>
<div class="draggable" style="top: 948.6px; right: 0px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div>
<div class="draggable" style="top: 848.533px; right: 0px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
</div>
</div>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<br><br><br><br><br><br>
<table><tr> <table><tr>
<?php <?php
$files = glob("podcasts/podcast3/*.mp3"); $files = glob("podcasts/podcast3/*.mp3");
@ -34,13 +65,14 @@ echo '</p></div></td>'; } ?>
<br> <br>
<div align="center"> <div align="center">
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating/recording them or annotate them with your vocal comments </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>
</div> <!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ --> <!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper"> <!-- <div class="wrapper">
<section class="main-controls"> <section class="main-controls">
<canvas class="visualizer" height="60px"></canvas> <canvas class="visualizer" height="60px"></canvas>
<div id="buttons"> <div id="buttons">
@ -50,109 +82,62 @@ echo '</p></div></td>'; } ?>
</section> </section>
<section class="sound-clips"> <section class="sound-clips">
</section> </section>
</div> </div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div> </div>
<section style="float:right;"> <div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div>
<div id="dataUrlcontainer" hidden></div>
<!-- save the new recordings --> <pre id="log" hidden></pre>
</div>
<br />
<br />
<br />
<?php <?php
if(!is_dir("recordings")){ $files = glob("uploads/*.wav");
$res = mkdir("recordings",0777); for ($i=0; $i<count($files); $i++)
} {$num = $files[$i];
$var1 = $_GET["files"]["name"];
// pull the raw binary data from the POST array echo '<audio src='.$num.' controls></audio><br /><br />'; }
$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);
?> ?>
</div>
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method
window.alert(data);
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "multipart/form-data");
if(data != null) //&& data != "")
{
req.setRequestHeader("Content-length", data.length);
req.send(data);
}}
// <!-- attempt to save the new recordings --> <!-- scripts for dictaphone -->
<?php <!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
$save_folder = dirname(__FILE__) ."/js";
if(! file_exists($save_folder)) {
if(! mkdir($save_folder)) {
die("failed to create save folder $save_folder");
}
}
$key = 'filename';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$upload_name = $_FILES["audiofile"]["name"];
$type = $_FILES["audiofile"]["type"];
$filename = "$save_folder/$upload_name";
$saved = 0;
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {
$saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0;
}
//name is needed to send in the php file
?>
</script>
<!-- save recordings -->
<!-- <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> -->
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>
@ -179,6 +164,94 @@ if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match
; ;
</script> </script>
<!-- scripts for recorder -->
<script type="text/javascript">
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
</script>
<script>
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadWav.php",
data: {
wavBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>

@ -2,6 +2,12 @@
<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">
<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/mp3recorder.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="js/main.js"></script>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -10,14 +16,40 @@
<a href="podcast1.php">Podcast1 </a> <a href="podcast1.php">Podcast1 </a>
<a href="podcast2.php">Podcast2 </a> <a href="podcast2.php">Podcast2 </a>
<a href="podcast3.php">Podcast3 </a> <a href="podcast3.php">Podcast3 </a>
<a href="podcast4.php" class="active">Podcast4 </a> <a href="podcast4.php" class="active">Podcast4 </a>
</div> </div>
<br><br>
<h3> <h3 id="box-title" style="width: 360px; left: 42%; position: absolute;">
"City Sounds Reveal Voice Binaries" "City Sounds Reveal Voice Binaries"
</h3> </h3>
<!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 0px;">
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
</div>
<div class="draggable" style="top: 948.6px; right: 0px;">
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
</div>
<div class="draggable" style="top: 848.533px; right: 0px;">
<h2 ><a href="player.html" target="_blank">Player</a></h2>
</div>
<div class="draggable" style="top: 540px; right: 0px;">
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
</div>
<div class="draggable" style="top: 51.9833px; right: 0px; width: 500px;">
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
<div class="drag-content"> These podcasts are separated in different topics. They include series of episodes of the online audio archive of the player, overlayered and commented by my voice as a narrator.
</div>
</div>
<div class="draggable" style="top: 640px; right: 0px; z-index: 9;">
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<br><br><br><br><br><br>
<table><tr> <table><tr>
<?php <?php
$files = glob("podcasts/podcast4/*.mp3"); $files = glob("podcasts/podcast4/*.mp3");
@ -33,13 +65,14 @@ echo '</p></div></td>'; } ?>
<br> <br>
<div align="center"> <div align="center">
<div style="width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
<p>you are invited to amplify parts of the podcasts that you find interesting by repeating them or annotate them with your vocal messages. You can listen to the podcasts with headphones... </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>
</div> <!-- keep the time of file limited -->
<!-- https://github.com/mdn/web-dictaphone/ --> <!-- https://github.com/mdn/web-dictaphone/ -->
<div class="wrapper"> <!-- <div class="wrapper">
<section class="main-controls"> <section class="main-controls">
<canvas class="visualizer" height="60px"></canvas> <canvas class="visualizer" height="60px"></canvas>
<div id="buttons"> <div id="buttons">
@ -49,108 +82,62 @@ echo '</p></div></td>'; } ?>
</section> </section>
<section class="sound-clips"> <section class="sound-clips">
</section> </section>
</div> </div> -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
<div class="recorder">
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div> </div>
<section style="float:right;"> <div><button onclick="upload()">Upload</button></div>
<div id="playerContainer"></div>
<div id="dataUrlcontainer" hidden></div>
<!-- save the new recordings -->
<!-- <?php
if(!is_dir("recordings")){
$res = mkdir("recordings",0777);
}
// pull the raw binary data from the POST array <pre id="log" hidden></pre>
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1); </div>
$filename = urldecode($_POST['fname']); <br />
<br />
<br />
// write the data out to the file <?php
$fp = fopen('recordings/'.$filename, 'wb'); $files = glob("uploads/*.wav");
fwrite($fp, $decodedData); for ($i=0; $i<count($files); $i++)
fclose($fp); {$num = $files[$i];
?> --> $var1 = $_GET["files"]["name"];
echo '<audio src='.$num.' controls></audio><br /><br />'; }
?>
</div>
<!-- scripts for dictaphone -->
<script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;; // you have to check how to get the data from your saveAudio() method
window.alert(data);
(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "multipart/form-data");
if(data != null) //&& data != "")
{
req.setRequestHeader("Content-length", data.length);
req.send(data);
}}
// <!-- attempt to save the new recordings --> <!-- scripts for dictaphone -->
<?php <!-- <script src="scripts/mediaDevices-getUserMedia-polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
$save_folder = dirname(__FILE__) ."/js";
if(! file_exists($save_folder)) {
if(! mkdir($save_folder)) {
die("failed to create save folder $save_folder");
}
}
$key = 'filename';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$upload_name = $_FILES["audiofile"]["name"];
$type = $_FILES["audiofile"]["type"];
$filename = "$save_folder/$upload_name";
$saved = 0;
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {
$saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0;
}
//name is needed to send in the php file
?>
</script>
<!-- save recordings -->
<!-- <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> -->
<!-- script for subs and sound --> <!-- script for subs and sound -->
<script> <script>
@ -177,6 +164,94 @@ if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match
; ;
</script> </script>
<!-- scripts for recorder -->
<script type="text/javascript">
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
</script>
<script>
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadWav.php",
data: {
wavBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>

@ -42,6 +42,10 @@ padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
li {
list-style: none;
}
.list { .list {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -482,7 +486,7 @@ cursor: pointer;
border-color:black;*/ border-color:black;*/
cursor: all-scroll; cursor: all-scroll;
position: absolute !important; position: absolute !important;
width: 300px; width: 400px;
} }
@ -500,6 +504,8 @@ cursor: pointer;
#show { #show {
display: none; display: none;
left: 20%;
width: 550px !important;
} }
#box-title { #box-title {
@ -507,3 +513,30 @@ cursor: pointer;
} }
/*for thesis html*/
#maintext{margin:50px;}
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}
#dashed {
border-bottom: 1px dashed
}
#box_metadata {
background: white none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
width: 1000px;
left: 0px;
position: absolute;
}

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save