improved text and added speaker icon

master
Angeliki 6 years ago
parent aefb0c5636
commit bfc958dcfe

@ -304,7 +304,7 @@
</div>
<div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>

@ -74,7 +74,7 @@
<div class="draggable scaleable-wrapper"style="top:5%;left:35%">
<h2 ><a href="player.php" >Player</a></h2>
<h2 ><a href="player.php" >Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
<?php include 'texts/player.txt'; ?>
</div>

@ -482,7 +482,7 @@ $("#katalin").click(function(){
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 125%; left: 1%;">
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div>s</a></h2>
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 1%; left: 1%;">

@ -39,12 +39,12 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<div class="draggable scaleable-wrapper" style="top: 83%; left: 2%;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
@ -58,13 +58,13 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<div class="draggable scaleable-wrapper" style="top: 34%; right: 5%">
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<div class="draggable scaleable-wrapper" style="top: 44%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<div class="draggable scaleable-wrapper" style="top: 53%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
@ -245,7 +245,7 @@ echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
// if (person != null) {
// document.getElementById("name").innerHTML =
// person;
// }
}
// }

@ -39,12 +39,12 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<div class="draggable scaleable-wrapper" style="top: 83%; left: 2%;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
@ -58,13 +58,13 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<div class="draggable scaleable-wrapper" style="top: 34%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<div class="draggable scaleable-wrapper" style="top: 44%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<div class="draggable scaleable-wrapper" style="top: 53%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>

@ -39,12 +39,12 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<div class="draggable scaleable-wrapper" style="top: 83%; left: 2%;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
@ -58,13 +58,13 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<div class="draggable scaleable-wrapper" style="top: 34%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<div class="draggable scaleable-wrapper" style="top: 44%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<div class="draggable scaleable-wrapper" style="top: 53%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>

@ -40,12 +40,12 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 92%; left: 2%;">
<div class="draggable scaleable-wrapper" style="top: 83%; left: 2%;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
@ -59,13 +59,13 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<div class="draggable scaleable-wrapper" style="top: 34%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<div class="draggable scaleable-wrapper" style="top: 44%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<div class="draggable scaleable-wrapper" style="top: 53%; right: 8%">
<h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div>

@ -77,6 +77,11 @@ h2 a:hover .hover-icon {
opacity: 1;
}
h2 a:hover .hover-icon-speaker {
opacity: 1;
}
li a {
text-decoration: none;
color: #A19696;
@ -99,6 +104,20 @@ li a:hover {
width: 20%;
}
.hover-icon-speaker
{
transition: .5s ease;
opacity: 0;
position: absolute;
top:20px;
left:-60%;
}
.hover-icon-speaker img{
width: 5%;
}
h3 {
font-size: 95%;

@ -1,5 +1,5 @@
<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">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 worthy of attention by listening, recording and repeating parts of the podcasts that you find worthy of attention with your own voice and then upload it in the archive. Amplification can happen through repetition and multiplication, through the gathering of multiple individual voices repeating fragments of situations. <p>Maximum duration: 1 min</p>
you are invited to <div class="tooltip-wrap">amplify</div> parts of the podcasts that you find worthy of attention by listening, recording and repeating them, with your own voice, and upload them in the archive. The stories and sounds, you will listen to, are related to how female voices have been marginalised and what methods (rational/irrational) amplify and bring them in the front. Amplification can happen through repetition and multiplication. Your recording can become part of a gathering of multiple individual voices, that repeat fragments of situations and things that are unspeakable. <p>Maximum duration: 1 min</p>

@ -1 +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 city sounds with descriptions. 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.
The player is an audio archive of voices and sounds from workshops I have co-organised, soundwalks and media sources from a body of research. 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 +1,2 @@
Podcast1 "Mediating Speech" includes a series of episodes about the amplification of one's speech through the voice of others.
Podcast1 "Mediating Speech" includes a series of episodes about the amplification of one's speech through the voice of others.
<i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

@ -1 +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.
Podcast2 "Voice's Transition" includes a series of episodes about the electronical transformation of one's voice into another voice in terms of gender. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

@ -1 +1 @@
Podcast3 "Blocking our Voices" includes a series of episodes about the ways we learn to self-control and sensor our speech.
Podcast3 "Blocking our Voices" includes a series of episodes about the ways we learn to self-control and sensor our speech. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

@ -1 +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.
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. <i>All the podcasts are made from parts of the "player", an online archive, with my voice as a narrator. The voices and sounds, you will listen to, come from workshops I have co-organised, soundwalks and media sources from a body of research.</i>

@ -48,7 +48,7 @@
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 130%; left: 1%;">
<h2 ><a href="player.php">Player</a></h2>
<h2 ><a href="player.php">Player<div class="hover-icon-speaker"><img src="images/icon-speaker.png"></div></a></h2>
<div class="drag-content">
(audio archive)
</div>

Loading…
Cancel
Save