Html5 audio brief NaN time while building a custom player

Question

My MinutesDuration and SecondsDuration gets set to NaN for a brief second and then switches to music duration as intended.

I am not using tag in my HTML the method is triggered onclick of a button.

How can i stop this NaN from happening?

previousSong () {
  if (sound) {
    if (this.isPlaying && sound.currentTime > 5) {
      sound.currentTime = 0
    } else {
      sound.pause()
      sound = new Audio(require('assets/YES.mp3'))
      sound.play()
      // I assume some if statement is needed before eventListener
      sound.addEventListener('timeupdate', (update) => { this.updateTime(sound) })
    }
  }
},
updateTime (sound) {
  const timeMinutes = Math.floor(sound.currentTime / 60).toFixed()
  const timeSeconds = (sound.currentTime - timeMinutes * 60).toFixed()
  this.TimeMinutes = (timeMinutes >= 10) ? timeMinutes.toString() : '0' + timeMinutes.toString()
  this.TimeSeconds = (timeSeconds >= 10) ? timeSeconds.toString() : '0' + timeSeconds.toString()
  const durationMinutes = Math.floor(sound.duration / 60).toFixed()
  const durationSeconds = (sound.duration - durationMinutes * 60).toFixed()
  this.DurationMinutes = (durationMinutes >= 10) ? durationMinutes.toString() : '0' + durationMinutes.toString()
  this.DurationSeconds = (durationSeconds >= 10) ? durationSeconds.toString() : '0' + durationSeconds.toString()
}

Answer 1

I have fixed this by adding this line of code at the beginning of updateTime() method:

const duration = sound.duration || 0