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);
    }
 }