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