mini-player
mini-player copied to clipboard
muhammed
Fix NaN audio duration
_ No description provided. _
The Nan is still there
How do you check it? Describe your steps, I can't reproduce them. Before there was NaN cause of this.audio.duration eq undefined, if we add ' || 0 ' then we resolve it.
I added a link that has no duration that is why I was getting NaN, I wanted it to display LIVE instead
_ No description provided. _
The Nan is still there
How do you check it? Describe your steps, I can't reproduce them. Before there was NaN cause of this.audio.duration eq undefined, if we add ' || 0 ' then we resolve it.
I will need to add a condition as it is not fully solved
To prevent the text in the div with the class progress__duration from showing NaN:NaN when you click on the button with the id #icon-next, you can modify the generateTime function in your JavaScript. This function is responsible for updating the playback time and duration of the current track.
The NaN:NaN issue usually occurs when the duration data or the current time of the track are not available or have not loaded correctly. You can add a check to ensure that if these data are not available, --:-- is displayed instead.
Here is the modified code for the generateTime function:
generateTime() { // Check if duration and current time are valid numbers if (!isNaN(this.audio.duration) && !isNaN(this.audio.currentTime)) { let width = (100 / this.audio.duration) * this.audio.currentTime; this.barWidth = width + "%"; this.circleLeft = width + "%"; let durmin = Math.floor(this.audio.duration / 60); let dursec = Math.floor(this.audio.duration - durmin * 60); let curmin = Math.floor(this.audio.currentTime / 60); let cursec = Math.floor(this.audio.currentTime - curmin * 60); if (durmin < 10) { durmin = "0" + durmin; } if (dursec < 10) { dursec = "0" + dursec; } if (curmin < 10) { curmin = "0" + curmin; } if (cursec < 10) { cursec = "0" + cursec; } this.duration = durmin + ":" + dursec; this.currentTime = curmin + ":" + cursec; } else { // Display --:-- if data is not available this.duration = "--:--"; this.currentTime = "--:--"; } },
This code will first check if the values of this.audio.duration and this.audio.currentTime are valid numbers before attempting to calculate and display the time. If they are not, --:-- will be displayed as a default value.
