jQuery: Uncaught TypeError: Не удалось установить свойство 'value' для 'HTMLProgressElement': предоставленное двойное значение не является конечным

Question

Я знаю, что есть похожие вопросы, но, похоже, ничего не подходит для моей текущей проблемы. У меня есть простой аудиоплеер с индикатором выполнения:

$(document).ready(function() {
  $(".audio-clip .volume").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.volume = this.value;
  });

  $(".audio-clip .position").on("input", function() {
    var audio = $(this)
      .closest("div")
      .find("audio")[0];
    audio.currentTime = (audio.duration / 100) * this.value;
  });

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });

и в HTML

   <label>
    Position:
    <input type="range" class="position" min="0" max="100" step="1" value="0" />

    <progress class="nes-progress is-pattern position" value="0" max="100"></progress>
  </label>

все работает как положено, но в консоли JS я вижу

Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite

Answer 1

Убедитесь, что pc является допустимым числом, прежде чем пытаться использовать его для установки значения.

  $("audio").on("timeupdate", function() {
    var pc = (audio.currentTime / audio.duration) * 100;
    if (isNaN(pc)) {
      return;
    }
    $(this)
      .closest("div")
      .find(".position")
      .val(pc);
  });