js and index page

3 years ago · dff7e2c66b
commit dff7e2c66b
2 changed files with 63 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
+<!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>
+</head>
+<body>
+    <div class="hemicycle">
+        <div class="seat" id="seatRef">
+            <button class="mic">Loading...</button>
+            <div class="label">name</div>
+        </div>
+    </div>
+    
+</body>
+</html>l
--- a/script.js
+++ b/script.js
@ -0,0 +1,44 @@
+let source_url = ""
+let seatRef = document.getElementById("seatRef")
+let hemicycle = document.getElementsByClassName("hemicycle")[0]
+
+fetch("https://hub.xpub.nl/soupboat/the-parliament/")
+    .then((response) => response.json()) 
+    .then((data) => {
+        source_url = data.base_url;
+        populateSeats(data.files)
+    }); 
+
+function populateSeats(representatives) {
+    for (const representative of representatives){
+        let seat = seatRef.cloneNode(true);
+        seat.querySelector(".label").innerHTML = representative.who;
+        seat.id = representative.who;
+        let filename = source_url + 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 ="red";
+                } else {
+                    audio.pause();
+                    mic.innerHTML="Talk"
+                }
+            });
+            audio.addEventListener("ended", () => {
+                audio.pause();
+                audio.currentTime = 0;
+                mic.innerHTML = "Talk Again"
+            });
+        });
+        hemicycle.appendChild(seat);
+
+    }
+}
+