From dff7e2c66b8630b7d45b75f79cf960f409ec2eba Mon Sep 17 00:00:00 2001 From: grgr Date: Sat, 14 May 2022 12:08:21 +0200 Subject: [PATCH] js and index page --- index.html | 19 +++++++++++++++++++ script.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..b18fa90 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + The Parliament + + + +
+
+ +
name
+
+
+ + +l \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8cc00fb --- /dev/null +++ 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); + + } +} +