Merge branch 'main' of https://git.xpub.nl/XPUB/SI18
commit
3afc1d026b
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Parliament</title>
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>The Jingle Board Parliament</h1>
|
||||||
|
<div class="btn" id="info-btn" >?</div>
|
||||||
|
<div class="info" id="info">
|
||||||
|
<h2>SI18 - Weekly Release #4</h2>
|
||||||
|
<p>17—05—2022</p>
|
||||||
|
<br />
|
||||||
|
<p>The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.</p>
|
||||||
|
<p>Our take on this idea of the parliament is rooted in the influence that elements of pop-culture have on politics, and more precisely on shaping the characters and the voices that then inhabit a parliament. While much of the politics happens outside of official institutional buildings, yet the idea of the parliament remains a pure symbol of the place in which democracy is being performed. Let's renew the voices that are usually heard in political discourses!</p>
|
||||||
|
<dl>
|
||||||
|
<dt>Contribution by:</dt>
|
||||||
|
<dd>Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione</dd>
|
||||||
|
<br>
|
||||||
|
<dt>Caretakers:</dt>
|
||||||
|
<dd>Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="hemicycle">
|
||||||
|
<div class="party"id="partyRef">
|
||||||
|
<h4 id="partyName"></h4>
|
||||||
|
<div class="seats">
|
||||||
|
<div class="seat" id="seatRef">
|
||||||
|
<button class="mic">Loading...</button>
|
||||||
|
<div class="label">name</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>l
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
let source_url = ""
|
||||||
|
let partyRef = document.getElementById("partyRef")
|
||||||
|
let seatRef = document.querySelector(".seat")
|
||||||
|
let hemicycle = document.getElementsByClassName("hemicycle")[0]
|
||||||
|
let row = 5
|
||||||
|
|
||||||
|
let btn = document.getElementById("info-btn")
|
||||||
|
let info = document.getElementById("info")
|
||||||
|
|
||||||
|
fetch("https://hub.xpub.nl/soupboat/the-parliament/")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
source_url = data.base_url;
|
||||||
|
populateSeats(data.parliament)
|
||||||
|
});
|
||||||
|
|
||||||
|
function populateSeats(parliament) {
|
||||||
|
for (const group of Object.keys(parliament)){ //gets the parent's keys
|
||||||
|
let party = partyRef.cloneNode(true);
|
||||||
|
let partyName = party.querySelector("h4")
|
||||||
|
party.id = group;
|
||||||
|
|
||||||
|
partyName.innerHTML = group;
|
||||||
|
for (representative of parliament[group]){
|
||||||
|
let seat = seatRef.cloneNode(true);
|
||||||
|
seat.querySelector(".label").innerHTML = representative.who;
|
||||||
|
seat.id = representative.who;
|
||||||
|
let filename = source_url + group + '/' + representative.filename;
|
||||||
|
let audio = new Audio(filename)
|
||||||
|
audio.addEventListener("canplaythrough", (e) => {
|
||||||
|
console.log(filename);
|
||||||
|
let mic = seat.querySelector(".mic");
|
||||||
|
mic.innerHTML = "Talk";
|
||||||
|
mic.addEventListener("click", () => {
|
||||||
|
console.log(filename);
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.play();
|
||||||
|
mic.innerHTML="Pause";
|
||||||
|
mic.style.color ="white";
|
||||||
|
mic.style.background = "red"
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
mic.innerHTML="Talk"
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
audio.addEventListener("ended", () => {
|
||||||
|
audio.pause();
|
||||||
|
audio.currentTime = 0;
|
||||||
|
mic.style.background = "white"
|
||||||
|
mic.style.color ="red";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
party.appendChild(seat);
|
||||||
|
}
|
||||||
|
|
||||||
|
hemicycle.appendChild(party);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// info
|
||||||
|
btn.addEventListener("click", showInfo)
|
||||||
|
|
||||||
|
|
||||||
|
function showInfo(){
|
||||||
|
|
||||||
|
if (info.style.display === "none"){
|
||||||
|
btn.innerHTML = "X";
|
||||||
|
console.log("click");
|
||||||
|
info.style.display = "block";
|
||||||
|
} else {
|
||||||
|
btn.innerHTML = "?";
|
||||||
|
info.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
TODO
|
||||||
|
- upload svg
|
||||||
|
- loop through the elements to associate seat to each of them
|
||||||
|
- create label
|
||||||
|
- rotation?
|
||||||
|
*/
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
|
||||||
|
:root{
|
||||||
|
--color1: rgb(105, 105, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--color1);
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
border: solid 2px var(--color1);
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: white;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
.btn:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
font-size: 2.5ch;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: white;
|
||||||
|
border: solid 2px var(--color1);
|
||||||
|
overflow: auto;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 96px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hemicycle{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column wrap;
|
||||||
|
align-content: stretch;
|
||||||
|
justify-content: right;
|
||||||
|
/* width: 100vw; */
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 60px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#partyRef,
|
||||||
|
#seatRef{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.party{
|
||||||
|
/* border: solid 1px black; */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4{
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seats{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
margin: 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seat .mic{
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 10%;
|
||||||
|
border: solid 3px var(--color1);
|
||||||
|
background-color: white;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
.label{
|
||||||
|
width: 90px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
font-size: 1.5ch;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Loading…
Reference in New Issue