Html5 构建自定义播放器时音频简短 NaN 时间

Question

我的 MinutesDuration 和 SecondsDuration 被设置为 NaN 一小段时间，然后按预期切换到音乐持续时间。

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

您可以对持续时间分钟数和持续时间秒数使用反向 if 语句。然后如果 NaN，就不要完成 updateTime 函数和 return.

if(!(DurationMinutes >= 0 || DurationMinutes < 0)){ /*is NaN*/ return; }

Answer 2

我已通过在 updateTime() 方法的开头添加这行代码来修复此问题：

const duration = sound.duration || 0

Html5 构建自定义播放器时音频简短 NaN 时间

Html5 audio brief NaN time while building a custom player

javascript

html5-audio