add sounds in various html

master
Angeliki 6 years ago
parent 4baed224b1
commit 73347b65b8

@ -13,10 +13,13 @@
font-size: 12px;
float: right;
}
.mini-player {
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
cursor: pointer;
}*/
.audio-mini {
width: 50px;
}
</style>
@ -38,17 +41,38 @@
<div class="description">SOUNDWALKS, ANNOTATIVE RECORDINGS</div>
</li>
<div style="position:absolute; top:45%; left:30%;">
<audio class="player" controls src="http://pzwiki.wdka.nl/mw-mediadesign/images/d/d5/Selection-track-extracts-1.mp3">
</audio>
</div>
<p>
<div class="mini-player" rel="http://pzwiki.wdka.nl/mw-mediadesign/images/d/d5/Selection-track-extracts-1.mp3" style="position:absolute; top:35%; left:50%;">
<audio controls src="http://pzwiki.wdka.nl/mw-mediadesign/images/d/d5/Selection-track-extracts-1.mp3"></audio>
</div></p>
<div style="position:absolute; top:40%; left:30%;">
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/leeszaal-meetings-warming.mp3"></audio>warming up
</div>
<div style="position:absolute; top:35%; left:45%;">
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/leeszaal-meetings-choir.mp3"></audio>singing vowels
</div>
<div style="position:absolute; top:40%; left:60%;">
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-alex2.mp3"></audio>describing
</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
</div>
<div style="position:absolute; top:65%; left:68%;">
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing
</div>
<div style="position:absolute; top:75%; left:63%;">
<audio controls class="audio-mini" style="background-color: orange;" src="project/audio/finearts-meeting-choir.mp3"></audio>singing vowels
</div>
<div style="position:absolute; top:80%; left:50%;">
<audio controls class="audio-mini" style="background-color: dodgerblue;" src="project/audio/description-eugenie-CUT-SHORT.mp3"></audio>describing
</div>
<div style="position:absolute; top:73%; left:35%;;">
<audio controls class="audio-mini" style="background-color: tomato;" src="project/audio/finearts-meeting-warming.mp3"></audio>warming up
</div>
<div style="position:absolute; top:63%; left:25%;;">
<audio controls class="audio-mini" style="background-color: mediumseagreen;" src="project/audio/leeszaal-meetings-discussion.mp3"></audio>discussing
</div>
<div style="position:absolute; top:52%; left:23%;">
<audio controls class="audio-mini" style="background-color: violet;" src="project/audio/finearts-meeting-transcribing.mp3"></audio>transcribing
</div>
</body>
</html>

@ -6,6 +6,7 @@ These binaries have structured Western thinking since antiquity and favor the 'c
My research seeks to unravel the possibilities of voices to include and break these binaries, with the intention to *explore democratic ways of communication that embraces excluded forms of address*.
## What to show (strategy)
DIAGRAM!! UNDERNEATH SOUNDS
My approach is to create a space for that exploration to happen with others through performative actions, meetings and sound walks. I focus on one specific area and public space (around Leeszaal in Rotterdam West) because my past exploration on voice and research showed me that the site-specificity and involvement of people in the process can actually break these binaries and engage more people. It is also that voice through the form of speech acts or public exposure, can create space of dialogue and be inviting.
My main focus is on the presence and amplification of female voices in public spaces. My approach is based on feedback and process-based actions unraveled throughout a short period around the area of Leeszaal. So I first started exploring the area by walking and listening to the sounds that reveal who occupies public space and how, what sounds describe the absense of excluded voices? **What voices are amplified and mediated and how? What mediation allows them to be amplified** I then ask from people visiting leeszaal- most of them are inhabitants from that area- to listen to a selection of sounds I have recorded and describe them. From that process I want to create an archive of annotated sounds that reveal the different interpretations of these sounds, that depend on the perspective of each person, that is formed by culture, gender, social status.

@ -16,6 +16,31 @@
a {
text-decoration:none;
}
div.gallery {
margin: 1px;
border: 1px solid #ccc;
float: left;
width: 31%;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
font-size: 14px;
/* text-align: left;*/
font-style: italic;
}
.audio-mini {
width: 50px;
}
</style>
<html>
<head>
@ -35,61 +60,86 @@
<body>
<table style="width:100%">
<tr>
<td>
<img src="images/vowels-20190322-leeszaal.jpg" width="80%"></img><img src="images/vowels-leeszaal-test.jpg" width="80%"></img>
</td>
<td>
<img src="images/vowels-20190328-leeszaal.jpg" width="45%"></img>
<img src="images/vowels-20190329-finearts.jpg" width="45%"></img>
</td>
</tr>
</table>
<br>
<br>
<br>
<table>
<td>
<img src="images/meeting-20190328-leeszaal-2.JPG" width="90%"></img>
</td>
<tr>
<td>
<img src="images/meeting-20190328-leeszaal-1.JPG" width="90%"></img>
</td>
<td>
<img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="90%"></img>
</td>
<td>
<img src="images/meeting-20190328-leeszaal-5.JPG" width="90%"></img>
</td>
</tr>
<tr>
<td>
<img src="images/meeting-20190329-finearts-1.JPG" width="90%"></img>
<td align="right">
<div class="desc" align="right">first experiments</div>
<img src="images/vowels-leeszaal-test.jpg" width="70%"></img><img src="images/vowels-20190322-leeszaal.jpg" width="70%"></img>
</td>
<td>
<img src="images/meeting-20190329-finearts-2.JPG" width="90%"></img>
<div class="desc">at Leeszaal</div>
<img src="images/vowels-20190328-leeszaal.jpg" width="100%"></img><audio controls class="audio-mini" src="audio/leeszaal-meetings-choir.mp3"></audio>
</td>
<td>
<img src="images/meeting-20190329-finearts-3.JPG" width="90%"></img>
<div class="desc">at fine arts</div>
<img src="images/vowels-20190329-finearts.jpg" width="100%"></img><audio controls class="audio-mini" src="audio/finearts-meeting-choir.mp3"></audio>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<img src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/13/Extracts-reading.jpg" width="100%"></img>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<iframe align="right" src="https://pad.xpub.nl/p/tender_reading_meeting" width="100%" height="500px"></iframe>
<div class="gallery">
<a target="_blank" href="images/meeting-20190328-leeszaal-2.JPG">
<img src="images/meeting-20190328-leeszaal-2.JPG" width="50%">
</a>
</div>
<div class="gallery">
<a target="_blank" href="images/meeting-20190328-leeszaal-1.JPG">
<img src="images/meeting-20190328-leeszaal-1.JPG" width="50%">
</a>
</div>
<div class="gallery">
<a target="_blank" href="images/meeting-20190328-leeszaal-3.JPG.jpg">
<img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="50%">
</a>
</div>
<div class="gallery">
<a target="_blank" href="images/meeting-20190329-finearts-1.JPG">
<img src="images/meeting-20190329-finearts-1.JPG" width="50%">
</a>
</div>
<div class="gallery">
<a target="_blank" href="images/meeting-20190329-finearts-2.JPG">
<img src="images/meeting-20190329-finearts-2.JPG" width="50%">
</a>
</div>
<div class="gallery">
<a target="_blank" href="images/meeting-20190328-leeszaal-5.JPG">
<img src="images/meeting-20190328-leeszaal-5.JPG" width="50%">
</a>
</div>
<div class="desc">
<audio controls class="audio-mini" src="audio/leeszaal-meetings-warming.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/leeszaal-meetings-discussion.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/leeszaal-meetings-transcribing.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/finearts-meeting-warming.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/finearts-meeting-extracts.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/finearts-meeting-discussion.mp3"></audio></div>
<div class="desc">
<audio controls class="audio-mini" src="audio/finearts-meeting-transcribing.mp3"></audio></div>
<img src="http://pzwiki.wdka.nl/mw-mediadesign/images/1/13/Extracts-reading.jpg" width="100%" style="margin-top: 150px;"></img>
<section>
<iframe align="right" src="https://pad.xpub.nl/p/tender_reading_meeting" width="100%" height="500px"></iframe>
</section>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 5.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 MiB

After

Width:  |  Height:  |  Size: 9.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 MiB

After

Width:  |  Height:  |  Size: 9.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

@ -32,19 +32,19 @@ Experiment: I listen and record carefully sounds from the area that are coming f
<section>
<div>
<audio style="width: 100%; background: #FFFFFF;" id="a1" controls src="selection-track-extracts-1.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a2" controls src="description-lidia-CUT.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a3" controls src="description-eugenie-CUT-SHORT.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a4" controls src="description-alex1.mp3"></audio>
<audio style="width: 100%; background: #FFFFFF;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio>
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio>
<button id="but">listen</button>
</div>
</section>
<section>
<div>
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="selectionB.mp3"></audio>
<audio style="width: 100%; background: #222;" id="b2" controls src="description-tommi.mp3"></audio>
<audio style="width: 100%; background: #222;" id="b3" controls src="description-alex2.mp3"></audio>
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio>
<audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio>
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio>
<button id="butB">listen</button>
</div>
</section>

Loading…
Cancel
Save