Beiträge von Sempervivum

     <script>

        var songs = [
            "audio/01_-_The_Greatest_Cowboy_Of_Them_All.mp3",
            "audio/05-Lagos_de_Moreno.mp3",
            "audio/09-Asi_Semos_en_Jalisco.mp3"
        ];
        var nameSongs = ["Control", "Sunshine", "Ruleta", "Bebe", "Better Days", "Instagram", "Intentions", "Rojo", "SICKO", "Superstar", "Troubled Water"];
        var poster = ["images/busleft.png", "images/busright.png", "images/01_th.jpg"];

        var songTitle = document.getElementById("songTitle");
        var fillBar = document.getElementById("fill");
        var currentTime = document.getElementById("currentTime");

        var song = new Audio();
        var currentSong = 0;



        function playSong() {

            song.src = songs[currentSong];

            songTitle.textContent = nameSongs[currentSong];

            song.play();
        }

        function playOrPauseSong() {

            if (song.paused) {
                song.play();
                document.querySelector("#play img").src = "Images/buttonpause.png";
            }
            else {
                song.pause();
                document.querySelector("#play img").src = "Images/buttonplay.png";
            }
        }

        song.addEventListener('timeupdate', function () {

            var position = song.currentTime / song.duration;

            fillBar.style.width = position * 100 + '%';
            convertTime(Math.round(song.currentTime));
            if (song.ended) {
                next();
            }
        });

        function convertTime(seconds) {
            var min = Math.floor(seconds / 60);
            var sec = seconds % 60;
            min = (min < 10) ? "0" + min : min;
            sec = (sec < 10) ? "0" + sec : sec;
            currentTime.textContent = min + ":" + sec;
            totalTime(Math.round(song.duration));
        }
        function totalTime(seconds) {
            var min = Math.floor(seconds / 60);
            var sec = seconds % 60;
            min = (min < 10) ? "0" + min : min;
            sec = (sec < 10) ? "0" + sec : sec;
            currentTime.textContent += "/" + min + ":" + sec;
        }
        function next() {

            currentSong++;
            if (currentSong >= songs.length) {
                currentSong = 0;
            }
            getSong(currentSong);
            song.play();
        }
        function pre() {

            currentSong--;
            if (currentSong < 0) {
                currentSong = songs.length - 1;
            }
            getSong(currentSong);
            song.play();
        }

        function getSong(idx) {
            song.src = songs[idx];
            document.querySelector("#songTitle").textContent = nameSongs[idx];
            document.querySelector("#image img").src = poster[idx];
        }
        var seekBar = document.getElementById("seek-bar");
        function scrub(e) {
            const scrubTime = (e.offsetX / seekBar.offsetWidth) * song.duration;
            song.currentTime = scrubTime
            console.log(e);
        }
        seekBar.addEventListener('click', scrub);
        getSong(0);
    </script>

    <style>
        #seek-bar {
            max-width: 200px;
            height: 20px;
            background-color: lightgrey;
        }

        #fill {
            height: 100%;
            background-color: aqua;
            width: 0;
        }
    </style>

<script>
    function getStatus() {
        fetch('td-status.html')
        .then(res => {
            return res.text();
        }).then(res => {
            document.getElementById('td-status').innerHTML = res;
        });
    }
    getStatus();
    setInterval(getStatus, 1000);
</script>
</body>
</html>