Creating a countdown timer script that instead of a specific date counts the duration of a sound file

Question

I've created a sound installation for an exhibition. The sound file last for 24 hours. What I would like to do is to create a site just for this file. I want it to be as stark and simple as possible. A dark background and a white countdown that start once the file start's streaming and countdowns until the file ends. That's from hour 24 to 00:00.

All the countdown scripts count to an specific date and rarely restart themselves.

Is this even possible?

Answer 1

So if I get it right you want to know how to make a progress bar?

I'd say if you don't want to get too much into the niddy-griddy parts, I'd recommend bootsrap and jquery.

I made an example of something I would do: http://jsfiddle.net/1tq6scga/3/

//JS
var song_seconds = 10;

c = 0;
i = 0;
var invt = setInterval(function(){
    c = i/song_seconds;
    c = (Math.round(c * 100 * 100)/100) + '%';
    $('.progress-bar').html(c);
    $('.progress-bar').css({'width':c});
    i++;
    if(i === song_seconds + 1) {
        clearInterval(invt);
    }
}, 1000);

so for you I would make it so that the variable max is the length of the song in seconds. Then I'd wrap this up in a function and do it so once a button play is clicked this code is ran in the background, and when I pause the song then the interval gets cleared.

I really don't wanna write more than this, because it requires coding a whole webpage. But this should be enough to get you started.