edited images/audio tags

master
Angeliki 6 years ago
parent 8f70fef1c8
commit e90b440dee

@ -6,6 +6,7 @@
<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/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</head> </head>
<body> <body>

@ -28,7 +28,7 @@
<!-- draggable --> <!-- draggable -->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;" > <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:9%;left:6%;width: 1200px; font-size: 30px" >
<h2 ><a href="index.php" target="_blank">About</a></h2> <h2 ><a href="index.php" target="_blank">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. '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.

@ -4,6 +4,7 @@
<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/draggable.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</head> </head>
@ -73,143 +74,100 @@ $("#katalin").click(function(){
<!-- draggable audio tags/recordings --> <!-- draggable audio tags/images -->
<section> <section>
<div style="position:absolute; top:15%; left:41%;">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div>
<div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;"> <div class="draggable" style="position:absolute; top:12%; left:51%;width: 270px">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal <audio controls src="audio/leeszaal-meetings-warming.mp3"></audio><p>warming up @Leeszaal</p>
<div class="tooltip-content-down"> </div>
<div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px">
</div>
<!-- <div class="column"><img src="images/meeting-20190328-leeszaal-5.JPG" width="500px">
</div> -->
</div>
</div>
</div>
<div class="draggable" style="position:absolute; top:15%; left:41%; width: 270px">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>
<img src="images/vowels-20190328-leeszaal.jpg" width="270px">
<p>singing vowels @Leeszaal</p>
</div>
<div style="position:absolute; top:20%; left:63%;"> <div class="draggable" style="position:absolute; top:20%; left:63%;width: 270px">
<audio controls src="audio/description-alex2.mp3"></audio>describing/annotating <audio controls src="audio/leeszaal-meeting-warming-20190523.mp3"></audio><p>warming up @Leeszaal</p>
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:30%; left:70%;"> <div class="draggable" style="position:absolute; top:30%; left:70%;width: 270px">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts <audio controls src="audio/finearts-meeting-discussion.mp3"></audio><img src="images/meeting-20190329-finearts-1.JPG" width="270px" />
<div class="tooltip-content-down"> <p>discussing about voice in public @Fine Arts</p>
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:42%; left:75%;">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/meeting-20190328-leeszaal-1.JPG" width="500px" />
</div>
</div>
</div> <div class="draggable" style="position:absolute; top:42%; left:75%;width: 270px">
</div> <audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio><img src="images/meeting-20190328-leeszaal-1.JPG" width="270px" />
<p>transcribing vowels @Leeszaal</p>
</div>
<div class="draggable" style="position:absolute; top:55%; left:69%;width: 270px">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio><img src="images/vowels-20190329-finearts.jpg" width="270px" /><p>singing vowels @Fine Arts</p>
</div>
<div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts <div class="draggable" style="position:absolute; top:65%; left:63%;width: 270px">
<div class="tooltip-content-down"> <audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio>
<div class="row"> <img src="images/meeting-20190523-leeszaal-1.jpg" width="270px">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" /> <p>singing vowels-distorted voice @Leeszaal</p>
</div>
</div>
</div>
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:65%; left:63%;">
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio>singing vowels-distorted voice @Leeszaal
<div class="tooltip-content-up">
<table>
<tr>
</tr> <div class="draggable" style="position:absolute; top:70%; left:53%;width: 270px">
</table> <audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio>
</div> <img src="images/meeting-20190523-leeszaal-2.jpg" width="270px">
<p>personal experiences-distorted voice @Leeszaal</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:32%;width: 270px">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>
<img src="images/meeting-20190329-finearts-2.JPG" width="270px" />
<p>transcribing vowels @Fine Arts</p>
</div>
<div style="position:absolute; top:70%; left:53%;"> <div class="draggable" style="position:absolute; top:27%; left:29%; width: 270px">
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio>personal experiences-distorted voice @Leeszaal <audio controls src="audio/finearts-meeting-extracts.mp3"></audio>
</div> <img src="images/carson-extract.jpg" width="270px" />
<div style="position:absolute; top:57%; left:33%;;"> <p>reading extracts @Fine Arts</p>
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts </div>
</div>
<div style="position:absolute; top:33%; left:26%;;">
<audio controls src=""></audio>
</div>
<div class="draggable" style="position:absolute; top:33%; left:26%;width: 270px;">
<audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3"></audio>
<img src="images/meeting-20190523-leeszaal-4.jpg" width="270px">
<p>transcribing vowels @Leeszaal</p>
</div>
<div class="tooltip-wrap" style="position:absolute; top:46%; left:28%;"> <div class="draggable" style="position:absolute; top:46%; left:28%; width: 270px">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal <audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>
<div class="tooltip-content-up"> <img src="images/meeting-20190328-leeszaal-2.JPG" width="270px" />
<table> <p>discussing about voice in public @Leeszaal </p>
<tr>
<td><img src="images/meeting-20190328-leeszaal-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div> </div>
<div style="position:absolute; top:66%; left:41%;;"> <div class="draggable" style="position:absolute; top:57%; left:33%;width: 270px;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts <audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio><p>singing vowels (high) @Fine Arts</p>
</div>
<div class="tooltip-wrap" style="position:absolute; top:23%; left:32%;">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-2.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:27%; left:29%;">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
<div class="tooltip-content-down"> <div class="draggable" style="position:absolute; top:66%; left:41%;width: 270px;">
<table> <audio controls src="audio/finearts-meeting-warming.mp3"></audio><p>warming up @Fine Arts</p>
<tr>
<td><img src="images/carson-extract.jpg" width="500px" />
</td>
<td><img src="images/fresh1.jpg" width="500px" />
</td>
<td><img src="images/fresh2.jpg" width="500px" />
</td>
</tr>
</table>
</div>
</div> </div>
</section> </section>
<br> <br>
<!-- soundwalk player -->
<section style="margin-top: 800px !important;">
<!-- soundwalk player -->
<section style="margin-top: 1300px !important;">
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio>
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -363,45 +321,6 @@ Oh, I hear children in the background crying</div>
</section> </section>
<div class="container">
<div class="rowcircle">
<span>
<div class="tooltip-wrap">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
<div class="tooltip-content-down">
<table>
<tr>
<td><img src="images/meeting-20190329-finearts-1.JPG" width="500px" />
</td>
</tr>
</table>
</div>
</div>
</span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal</audio></span>
</div>
<div class="rowcircle">
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
<span><audio controls src="audio/leeszaal-meetings-warming.mp3"></audio></span>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
<div class="rowcircle">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>
</div>
@ -410,27 +329,27 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top:60%;left: 0;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px">
<h2 ><a href="player.html" 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 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 class="draggable" style="top:700px; right: 0px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px">
<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: 316.833px; left: 0;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 316.833px; left: 10;">
<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 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: 200px; right: 0px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
<h2 ><a href="index.php" target="_blank">About</a></h2> <h2 ><a href="index.php" target="_blank">About</a></h2>
</div> </div>
<div class="draggable" style="top: 100px; right: 0px;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 100px; right: 5px; width: 150px; font-size: 16px">
<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: 600px; right: 0px; z-index: 9;"> <div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px">
<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>

@ -539,7 +539,7 @@ input[type=checkbox]:checked ~ aside {
.ui-resizable-se { .ui-resizable-se {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: orange; background: pink;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;

Loading…
Cancel
Save