<video src="assets/video/akihabara-oreimo.mp4"></video>

<img id="frame" src="assets/image/output_oreimo_0001.jpg" alt="動画の画像">
<script>
    const img = document.getElementById("frame");
    let frameNum = 1;
    const totalFrames = 169;
    const fps = 30;

    function update() {
        const index = String(frameNum).padStart(4, "0");
        const audio = new Audio(`assets/audio/output_oreimo_${index}.mp3`);
        img.src = `assets/image/output_oreimo_${index}.jpg`;
        audio.play();
    }

    function play() {
        const loopId = setInterval(() => {
            frameNum++;
            if (frameNum > totalFrames) {
                frameNum = 1;
                update();

                // 終了する
                clearInterval(loopId);
            }

            update();
        }, 1000 / fps);
    }

    img.addEventListener("click", () => {
        play();
    });

</script>