Search code examples
javascripthtml5-audioreusability

how to get seconds, minutes, and hours in a proper form?


I managed to create this code that sets the timer for the songs....... the problem is, as you can see, that I have to repeat the same line of code for two different functions ("tiempo" and "duracion") where the only difference is that in one I want to know the .duration time and in the other the .currentTime.

So I want to isolate the part of code that repeats and call it later but I don't know how to do it.

The variable "totalNumberOfSeconds" needs to change its content in both functions, and if I isolate the code that repeats the "result" is NaN.

"audio" is the variable that contains the tag <audio> from html with the songs and "timer" is a <span> tag that contains "0:00/0:00" for the time counter.

** **

audio.ontimeupdate = function() {totalTiempo()};

function totalTiempo() {
    document.getElementById("timer").innerHTML = tiempo() + '/' + duracion()
}


function tiempo() {
     totalNumberOfSeconds = Math.floor(audio.currentTime)
     const hours = parseInt( totalNumberOfSeconds / 3600 );
     const minutes = parseInt( (totalNumberOfSeconds - (hours * 3600)) / 60 );
     const seconds = Math.floor((totalNumberOfSeconds - ((hours * 3600) + (minutes * 60))));
     const result = (minutes < 10 ?  + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
     console.log(result)
     return result
}

function duracion() {
     totalNumberOfSeconds = Math.floor(audio.duration)
     const hours = parseInt( totalNumberOfSeconds / 3600 );
     const minutes = parseInt( (totalNumberOfSeconds - (hours * 3600)) / 60 );
     const seconds = Math.floor((totalNumberOfSeconds - ((hours * 3600) + (minutes * 60))));
     const result = (minutes < 10 ?  + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
     console.log(result)
     return result
}

Solution

  • You can do this by making a function that takes a parameter, like so:

    function convertTimeToString(time) {
         totalNumberOfSeconds = Math.floor(time)
         const hours = parseInt( totalNumberOfSeconds / 3600 );
         const minutes = parseInt( (totalNumberOfSeconds - (hours * 3600)) / 60 );
         const seconds = Math.floor((totalNumberOfSeconds - ((hours * 3600) + (minutes * 60))));
         const result = (minutes < 10 ?  + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
         console.log(result)
         return result
    }
    

    You can then call this function later using whatever variable you want, like this:

    function tiempo() {
         return convertTimeToString(audio.currentTime)
    }
    
    function duracion() {
         return convertTimeToString(audio.duration)
    }
    

    You can also call it directly within the getTotalTiempo function like this:

    function totalTiempo() {
        document.getElementById("timer").innerHTML = convertTimeToString(audio.currentTime) + '/' + convertTimeToString(audio.duration)
    }