search

muhammed / mini-player

https://codepen.io/JavaScriptJunkie/pen/qBWrRyg
906 stars 294 forks source link

Fix NaN audio duration #8

Closed AndyM1H closed 5 months ago

mikeyhodl commented 2 years ago

No description provided.

image

The Nan is still there

AndyM1H commented 2 years ago

No description provided.

image

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.

mikeyhodl commented 2 years ago

I added a link that has no duration that is why I was getting NaN, I wanted it to display LIVE instead

mikeyhodl commented 2 years ago

No description provided.

image 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.

image

I will need to add a condition as it is not fully solved

jorge-rodr commented 8 months ago

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.