function init() {
    let songName = document.getElementById("songName"),
        audio = document.getElementById("audio"),
        previousSong = document.getElementById("previousSong"),
        nextSong = document.getElementById("nextSong"),
        speedButtonReset = document.getElementById("speedButtonReset"),
        answerColumn = document.getElementById("answerColumn"),
        counter = 1;

    console.log(audio);
    console.log(previousSong);
    console.log(nextSong);

    fetch("../mp3/mp3_path.csv")
        .then((response) => {
            return response.text();
        })
        .then((data) => {
            let result = data.split(/\r?\n|\r/).map((e) => {
                return e.split(",");
            });
            console.log(result);
            console.log(`このCSVには ${result.length - 1}曲 登録されています。`);
            songName.innerHTML = result[1][0];

            nextSong.addEventListener("click", next, false);
            previousSong.addEventListener("click", previous, false);

            function previous() {
                counter -= 1;
                if (counter == 0) {
                    counter = result.length - 1;
                }
                songName.innerHTML = result[counter][0];
                audio.src = result[counter][1];

                socket.send("reset");
                answerColumn.innerHTML = "";
            }

            function next() {
                counter += 1;
                if (counter == result.length) {
                    counter = 1;
                }
                songName.innerHTML = result[counter][0];
                audio.src = result[counter][1];

                socket.send("reset");
                answerColumn.innerHTML = "";
            }

        })
        .catch((error) => {
            console.log(error);
        });

    let socket;
    function websocket() {
        try {
            if (!socket || socket.readyState !== 1) { //!socketは最初の接続のときに真になる、socket.readyStateは接続後に真になる

                socket = new WebSocket('wss://www.koeki-prj.org/quiz2024');
                // socket = new WebSocket('ws://localhost:8293');
                socket.onopen = function (event) {
                    console.log("JS:接続されました！");
                    socket.send("JS:Hostです！")
                };

                socket.onmessage = function (event) {
                    let receivedMsg = event.data;
                    try {
                        button_clicker = JSON.parse(receivedMsg);
                        console.log(button_clicker);
                        answerColumn.innerHTML = "" //表示場所のリセット
                        for(let i = 0; i < button_clicker.length; i++) {
                            console.log(button_clicker[i][1]);
                            answerColumn.innerHTML += `${i + 1}: ${button_clicker[i][0]} の ${button_clicker[i][1]} です！<br>`
                        }
                    } catch (error) {
                        console.log(event.data);
                        if (event.data.match(/pushed button/)) {
                            console.log(event.data);
                            audio.pause();
                        }
                    }
                }

                socket.onclose = function (event) {
                    if (event.wasClean) {
                        console.log("JS:切断しました！")
                    } else {
                        console.error("JS:切断エラーが起きました！");
                    }
                }

                socket.onerror = function (error) {
                    console.error("JS:WebSocket Error" + error)
                }

                speedButtonReset.addEventListener("click", reset, false);

                function reset() {
                    socket.send("reset");
                    answerColumn.innerHTML = "";
                }
            }
        } catch (error) {
            console.error("エラーが発生しました！" + error);
        }
    }

    document.addEventListener("DOMContentLoaded", websocket, false);
}

init()